/* Private beta waitlist and owner access UI. */
:root { --bg:#f7f5ef; --surface:#fff; --subtle:#f2efe7; --ink:#15171b; --muted:#595e66; --line:#ded9cf; --accent:#fff52b; --green:#227b3c; --red:#a72b31; color-scheme:light; font-family:'Segoe UI',Tahoma,system-ui,sans-serif; }
:root[data-theme="dark"] { --bg:#121418; --surface:#1b1e24; --subtle:#22262d; --ink:#f5f3ee; --muted:#b6bac2; --line:#3f4551; --green:#8bdca0; --red:#ff9ca1; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.6; }
/* Match the homepage typography without changing the owner management page. */
body[data-beta-page="waitlist"] { font-family:'Inter','Prompt','Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
html[lang="th"] body[data-beta-page="waitlist"] { font-family:'Prompt','Inter','Segoe UI',system-ui,sans-serif; }
body[data-beta-page="waitlist"] :is(h1,h2,.brand) { font-family:'Kanit','Prompt','Segoe UI',sans-serif; letter-spacing:-.01em; }
/* Layer the public landing page without affecting the owner interface. */
body[data-beta-page="waitlist"] { position:relative; isolation:isolate; min-height:100svh; --waitlist-glow:#d9c72b20; --waitlist-shadow:#3530191c; }
html[data-theme="dark"] body[data-beta-page="waitlist"] { --waitlist-glow:#fff52b0d; --waitlist-shadow:#0007; }
.waitlist-scene { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.waitlist-scene::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 630px 470px at 50% 23%,var(--waitlist-glow),transparent 85%),radial-gradient(ellipse 480px 400px at 95% 70%,var(--waitlist-glow),transparent 85%); }
.waitlist-scene::after { content:""; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 72% 60% at 50% 35%,#0006,transparent); }
.scene-orbit { position:absolute; top:-120px; left:calc(50% - 470px); width:940px; height:940px; border:1px solid var(--line); border-radius:50%; opacity:.3; }
.scene-orbit::before,.scene-orbit::after { content:""; position:absolute; border:1px solid var(--line); border-radius:50%; }.scene-orbit::before { inset:65px; }.scene-orbit::after { inset:130px; }
.scene-frame { position:absolute; width:180px; padding:14px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,var(--surface),var(--subtle)); box-shadow:0 28px 50px -20px var(--waitlist-shadow),6px 6px 0 -1px var(--bg),6px 6px 0 var(--line); opacity:.65; }
.scene-frame-left { top:245px; left:calc(50% - 590px); transform:rotate(-13deg); }.scene-frame-right { top:390px; left:calc(50% + 410px); transform:rotate(12deg); }
.scene-screen { display:block; height:172px; border-radius:9px; border:1px solid var(--line); background:linear-gradient(155deg,transparent 30%,var(--waitlist-glow) 90%),linear-gradient(45deg,var(--subtle),var(--bg)); position:relative; }
.scene-screen::before { content:""; position:absolute; inset:22px 36px; border:1px solid var(--line); border-radius:55% 45% 35% 65%; transform:rotate(-20deg); }.scene-screen::after { content:""; position:absolute; bottom:28px; left:24px; right:24px; height:6px; border-radius:3px; background:var(--accent); opacity:.45; box-shadow:0 12px 0 -1px var(--line); }
.scene-wave { display:flex; height:28px; align-items:center; gap:4px; margin:15px 0 10px; justify-content:center; }.scene-wave i { width:5px; height:10px; background:var(--muted); opacity:.35; border-radius:3px; }.scene-wave i:nth-child(3n) { height:25px; }.scene-wave i:nth-child(2n) { height:17px; }.scene-wave i:nth-child(5) { height:28px; background:var(--accent); opacity:.7; }
.scene-track { display:block; height:13px; border-radius:4px; border:1px solid var(--line); background:repeating-linear-gradient(90deg,var(--subtle) 0 24px,var(--line) 24px 25px); }
body[data-beta-page="waitlist"] .signup-card { position:relative; background:linear-gradient(145deg,var(--surface),var(--bg)); box-shadow:0 7px 0 -1px var(--surface),0 8px 0 -1px var(--line),0 15px 0 -3px var(--surface),0 16px 0 -3px var(--line),0 32px 65px -22px var(--waitlist-shadow); }
body[data-beta-page="waitlist"] .signup-card::before { content:""; position:absolute; top:-1px; left:30px; right:30px; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); pointer-events:none; }
body[data-beta-page="waitlist"] .eyebrow { width:fit-content; margin-left:auto; margin-right:auto; padding:7px 13px; border:1px solid var(--line); border-radius:30px; background:var(--surface); box-shadow:0 3px 10px -6px var(--waitlist-shadow); }
body[data-beta-page="waitlist"] .highlight { box-shadow:0 5px 18px -10px #c6ba0080; }
@media(max-width:1100px) { .scene-frame { display:none; } }
@media(max-width:540px) { .scene-orbit { top:-35px; left:calc(50% - 280px); width:560px; height:560px; opacity:.2; }.scene-orbit::before { inset:45px; }.scene-orbit::after { inset:90px; }.waitlist-scene::after { background-size:44px 44px; opacity:.2; } }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
[hidden] { display:none!important; }
h1,h2,p { margin:0; }
h1 { font-size:clamp(46px,6vw,82px); line-height:1.04; letter-spacing:-.055em; font-weight:800; }
h2 { font-size:23px; line-height:1.3; letter-spacing:-.025em; }
.preview-note { padding:8px 20px; background:var(--subtle); border-bottom:1px solid var(--line); text-align:center; color:var(--muted); font-size:12px; }
.header { max-width:1200px; margin:auto; padding:26px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:23px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { display:flex; align-items:flex-end; gap:3px; padding:7px; background:var(--accent); border-radius:8px; }
.brand-mark i { background:#121212; width:4px; border-radius:1px; height:10px; }
.brand-mark i:nth-child(2) { height:18px; }.brand-mark i:nth-child(3) { height:13px; }
.header-actions { display:flex; gap:8px; align-items:center; }
.theme,select { border:1px solid var(--line); border-radius:9px; padding:8px 12px; min-height:42px; background:var(--surface); color:var(--ink); font-size:13px; }
.waitlist-main { max-width:690px; padding:55px 24px 65px; margin:auto; text-align:center; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:9px; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.14em; margin-bottom:22px; }
.status-dot { width:7px; height:7px; background:var(--green); border-radius:50%; }
/* Let the highlight reserve line space instead of painting over the previous row. */
.highlight { position:relative; display:inline-block; max-width:100%; vertical-align:baseline; line-height:1.25; margin-block:.08em; background:var(--accent); color:#121212; padding:0 .08em .045em; }
.intro { max-width:500px; margin:24px auto 0; font-size:18px; color:var(--muted); line-height:1.65; }
.signup-card { margin:36px 0 0; padding:28px 30px 0; background:var(--surface); border:1px solid var(--line); border-radius:20px; text-align:left; box-shadow:0 15px 45px -32px #0005; }
.muted { color:var(--muted); font-size:14px; margin-top:7px; }
form { margin-top:24px; }form>label { display:block; font-size:13px; font-weight:650; margin-bottom:8px; }
.email-row { display:flex; gap:10px; }
input[type="email"],input[type="search"] { background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:12px 14px; min-width:0; min-height:48px; width:100%; }
input::placeholder { color:var(--muted); opacity:.85; }
.primary,.secondary,.danger { display:inline-flex; justify-content:center; align-items:center; gap:15px; border:1px solid var(--line); border-radius:10px; padding:12px 19px; font-weight:650; line-height:1.4; min-height:48px; }
.primary { background:var(--accent); color:#121212; border-color:#c6ba00; white-space:nowrap; }
.primary:hover { background:#fff76b; }.secondary { background:var(--surface); color:var(--ink); }.secondary:hover { background:var(--subtle); }
.consent { display:flex; align-items:flex-start; gap:9px; margin:15px 0 10px; font-size:12px; font-weight:400; color:var(--muted); line-height:1.7; }.consent input { width:17px; height:17px; flex-shrink:0; margin:2px 0 0; accent-color:var(--ink); }
.fine { color:var(--muted); font-size:12px; line-height:1.7; margin-bottom:22px; }
.invited { display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; margin:0 -30px; border-top:1px solid var(--line); padding:18px 20px; font-size:13px; color:var(--muted); }
.text-button { background:transparent; border:0; padding:5px 0; color:var(--ink); font-size:13px; font-weight:650; }.text-button:hover { text-decoration:underline; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:33px auto 0; max-width:590px; text-align:left; }.steps>div { display:flex; align-items:center; gap:9px; }.step-number { font-family:ui-monospace,monospace; font-size:11px; color:var(--muted); border:1px solid var(--line); width:27px; height:27px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }.steps p { font-size:12px; color:var(--muted); }
footer { max-width:1136px; margin:0 auto; padding:23px 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); }
.admin-main { max-width:1136px; margin:45px auto 65px; padding:0 24px; }.admin-main .eyebrow { justify-content:flex-start; margin-bottom:17px; }.admin-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }.admin-heading h1 { font-size:clamp(38px,4vw,60px); }.admin-heading .intro { margin:15px 0 0; max-width:620px; font-size:16px; }.admin-heading a { flex-shrink:0; font-size:14px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:30px 0; }.stats>div { padding:20px 24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); display:flex; align-items:center; justify-content:space-between; }.stats span { color:var(--muted); font-size:14px; }.stats strong { font-size:30px; font-weight:700; }.stats>div:nth-child(2) { border-top:3px solid var(--accent); padding-top:18px; }
.access-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; }.list-top { display:flex; align-items:center; justify-content:space-between; gap:22px; }.list-controls { display:flex; align-items:center; gap:10px; }.list-controls input { max-width:260px; font-size:13px; min-height:42px; }.list-controls select { max-width:165px; }.result-count { color:var(--muted); font-size:12px; margin:20px 0 3px; }.account-row { display:grid; grid-template-columns:minmax(0,1fr) 100px 150px; align-items:center; gap:24px; padding:19px 0; border-bottom:1px solid var(--line); }.account-row:last-child { border-bottom:0; }.account-name { font-weight:650; font-size:14px; }.account-email,.account-id { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }.account-id { font-family:ui-monospace,monospace; font-size:10px; margin-top:3px; }.account-row button { padding:8px 12px; min-height:40px; font-size:12px; }.badge { justify-self:start; padding:4px 9px; border:1px solid var(--line); border-radius:20px; font-size:11px; background:var(--subtle); }.badge.approved { color:var(--green); }.badge.revoked { color:var(--red); }
.danger { background:var(--surface); color:var(--red); }.danger:hover { background:var(--subtle); }.owner-guidance { display:flex; align-items:flex-start; gap:13px; margin:24px 8px; color:var(--muted); font-size:13px; max-width:760px; }.guide-icon { font-size:23px; line-height:1; color:var(--ink); }.empty { padding:32px 0; color:var(--muted); text-align:center; font-size:14px; }.feedback { color:var(--green); padding:14px 16px; margin:15px 0; border:1px solid var(--line); border-radius:10px; background:var(--subtle); font-size:13px; }.feedback.info { color:var(--muted); }.waitlist-detail { border-top:1px solid var(--line); padding-top:18px; font-size:14px; }.waitlist-detail summary { cursor:pointer; color:var(--muted); }.waitlist-detail>div { max-width:600px; padding:18px 0; }.waitlist-detail p { margin-top:8px; }.waitlist-detail .badge { display:inline-block; }
dialog { max-width:440px; width:calc(100% - 32px); padding:28px; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink); }dialog::backdrop { background:#0008; }dialog>p { margin-top:12px; overflow-wrap:anywhere; }.dialog-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; }.dialog-actions button { font-size:13px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }.skip { position:absolute; left:16px; top:-90px; background:var(--accent); color:#121212; padding:10px 16px; z-index:10; }.skip:focus { top:10px; }
html[lang="th"] h1 { letter-spacing:-.025em; line-height:1.3; font-size:clamp(36px,5vw,66px); }html[lang="th"] .admin-heading h1 { font-size:clamp(33px,3.5vw,48px); }
@media(max-width:760px) { .list-top { align-items:flex-start; flex-direction:column; }.list-controls { width:100%; }.list-controls input { max-width:none; }.account-row { gap:14px; grid-template-columns:minmax(0,1fr) 90px 135px; }.stats>div { padding:16px; }.stats>div:nth-child(2) { padding-top:14px; }.admin-heading { align-items:flex-start; flex-direction:column; } }
@media(max-width:540px) { .header { padding:20px; gap:12px; }.brand { font-size:20px; }.header-actions { gap:6px; }.theme,select { padding:8px; font-size:12px; }.waitlist-main { padding:35px 20px 45px; }.intro { font-size:16px; margin-top:20px; }.signup-card { padding:24px 20px 0; margin-top:28px; }.invited { margin:0 -20px; }.email-row { flex-direction:column; }.email-row button { width:100%; }.steps { gap:10px; }.steps>div { flex-direction:column; align-items:flex-start; gap:6px; }.steps p { font-size:11px; }footer { margin:0 20px; padding:20px 0; flex-wrap:wrap; }.admin-main { margin-top:30px; padding:0 20px; }.stats { gap:8px; }.stats>div { flex-direction:column; align-items:flex-start; padding:14px; }.stats>div:nth-child(2) { padding-top:12px; }.stats span { font-size:12px; }.access-card { padding:18px; }.list-controls { flex-direction:column; align-items:stretch; }.list-controls select { max-width:none; }.account-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; }.account-row .account-info { grid-column:1/-1; }.account-row .badge { grid-column:1; }.account-row button { min-width:130px; }.dialog-actions { flex-wrap:wrap; }html[lang="th"] h1 { font-size:clamp(32px,8vw,44px); } }
@media(prefers-reduced-motion:no-preference) { button,a { transition:background .15s ease; } }
/* Match the homepage's brief palette blend, without changing normal hover motion. */
@media(prefers-reduced-motion:no-preference) {
  html.theme-transitioning *,
  html.theme-transitioning *::before,
  html.theme-transitioning *::after {
    transition-property:background-color,color,border-color,box-shadow,fill,stroke!important;
    transition-duration:480ms!important;
    transition-timing-function:cubic-bezier(0.22,1,0.36,1)!important;
  }
}

/* Connected forms and owner lists. */
input[type="password"] { width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); }
#authForm label { margin-top:14px; }
.account-status { margin-top:24px; padding:24px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:18px; }
.account-status .fine { overflow-wrap:anywhere; margin-top:12px; margin-bottom:0; }.access-status { margin-top:15px; font-size:14px; }
.account-actions,.admin-links,.pagination { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px; }.account-actions>* { font-size:13px; }.admin-links { margin-top:0; }
.pagination { justify-content:flex-end; }.pagination button { font-size:12px; min-height:40px; padding:8px 14px; }
.waitlist-section { margin-top:24px; }.waitlist-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }.waitlist-row:last-child { border-bottom:0; }.waitlist-row>div { min-width:0; }.waitlist-row .account-name { overflow-wrap:anywhere; }.waitlist-row button { font-size:12px; padding:8px 14px; flex-shrink:0; }
button:disabled { cursor:not-allowed; opacity:.5; }.feedback.error { color:var(--red); }.access-notice { color:var(--muted); font-size:14px; margin-bottom:18px; }
@media(max-width:540px) { .waitlist-row { align-items:flex-start; flex-direction:column; } .account-actions .primary { width:100%; } }

.google-auth { margin-top:20px; overflow:hidden; }.google-auth .fine { margin-top:14px; text-align:center; margin-bottom:0; }
.create-card { margin-top:30px; }
.create-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:16px; }
.create-fields>div:last-child { grid-column:1 / -1; }
.create-fields label { display:block; font-size:13px; font-weight:650; margin-bottom:8px; }
.create-fields input { width:100%; min-width:0; padding:12px 14px; min-height:48px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; }
.create-fields .fine { margin-top:8px; margin-bottom:0; }
.create-actions { display:flex; gap:10px; flex-wrap:wrap; }
.password-tools { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }.password-tools button { font-size:13px; min-height:42px; padding:9px 13px; }
.credential-panel { margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }.credential-panel>label { display:block; font-size:13px; font-weight:650; margin:16px 0 8px; }.credential-email { overflow-wrap:anywhere; }
.credential-password { width:100%; min-width:0; min-height:48px; padding:12px 14px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; }.credential-panel .fine { margin-top:10px; margin-bottom:0; }
@media(max-width:540px) { .create-fields { grid-template-columns:1fr; gap:16px; }.create-fields>div:last-child { grid-column:auto; } }
.consent .terms-link { font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }.consent .terms-link:hover { text-decoration-thickness:2px; }