/* ===== auth-v2.css — DEV-064 (owner 2026-10-12): the new landing / login / sign-up pages behind AUTH_UI.
   Colours, fonts and tokens are the site's own (themes/default.css + ruay-refresh.css tokens, index.css .topbar/.goldpattern/.golden-btn,
   member.css .botnavbar colours) — ported from the approved mockups new-mgmt research/front/mockups/signup-2026-10-12/R/*.html.
   Every class is `au-*` so nothing in bootstrap.css / style.css / index.css / member.css can change the measured sizes.
   Elderly rules (report §4.2): text ≥ 17 px, labels ≥ 18 px, taps ≥ 48 px, primary buttons ≥ 56 px, fields ≥ 56 px, no marquee, no popup,
   no auto-scroll, prefers-reduced-motion respected. ===== */
.au { --au-gold: #d5ad6d; --au-gold-deep: #b47e18; --au-gold-grad: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
  --au-edge: rgba(213, 173, 109, 1); --au-edge-soft: rgba(213, 173, 109, .6); --au-glow: rgba(213, 173, 109, .3) 0 0 5px;
  --au-light: blanchedalmond; --au-warm: burlywood; --au-ok: #1e7e34; --au-err: #c0392b; --au-line: #06C755;
  --au-radius: 14px; --au-radius-sm: 10px; --au-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  font-family: NotosansThai, sans-serif; font-size: 17px; line-height: 1.5; color: #212529; -webkit-text-size-adjust: 100%; }
.au *, .au *::before, .au *::after { box-sizing: border-box; }
.au [id] { scroll-margin-top: 66px; }
/* the reset stays off classed paragraphs — `.au p` (0,1,1) used to beat `.au-help` / `.au-msg` / `.au-h-lead` (0,1,0) and ate their margins (review 2026-10-12) */
.au h1, .au h2, .au h3, .au ul, .au ol, .au p:not([class]) { margin: 0; }
.au ul, .au ol { padding: 0; list-style: none; }
.au button { font: inherit; cursor: pointer; }
.au img { vertical-align: middle; border-style: none; }
.au a { text-decoration: none; }
.au .au-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.au .au-num { font-family: SukhumvitBold, sans-serif; font-variant-numeric: tabular-nums; }
.au .fa, .au .fas, .au .far { display: inline-block; flex: none; }
.au .au-container { width: 100%; max-width: 1140px; padding: 0 10px; margin: 0 auto; }
@media (min-width: 1024px) { .au .au-container { padding: 0 15px; } }

/* ===== top bar (index.css .topbar/.goldpattern) — every pill ≥ 48 px ===== */
.au-top { width: 100%; position: sticky; top: 0; z-index: 1030; }
.au-top .au-topbar { width: 100%; min-height: 30px; padding: 5px 0; box-shadow: 0 1px #000; display: block; line-height: 0; }
.au-top .au-topbar > .au-container { display: flex; flex-direction: row; align-items: center; font-family: SukhumvitReg, sans-serif; min-height: 48px; gap: 8px; }
.au-logo { flex: none; }
.au-logo a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; white-space: nowrap; color: #000; font-size: 22px; line-height: 1; text-shadow: goldenrod 0 1px 0; font-family: SukhumvitBold, sans-serif; }
.au-logo a:hover { color: brown; }
.au-logo img { width: 30px; height: 30px; }
.au-logo.au-mid { margin-left: auto; }
.au-top .au-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.au-tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 13px; border-radius: 10px; background: #fff; color: #6c757d; border: 1px solid #343a40; font-family: SukhumvitReg, sans-serif; font-size: 17px; line-height: 1; cursor: pointer; white-space: nowrap; }
.au-tb-btn:hover { color: #212529; }
.au-tb-btn.au-ml { margin-left: auto; }
.au-back { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; min-width: 48px; padding: 0 10px 0 4px; color: #111; font-family: SukhumvitBold, sans-serif; font-size: 17px; border-radius: 10px; line-height: 1; }
@media (max-width: 399px) { .au-tb-btn.au-lang > span { display: none; } .au-tb-btn { padding: 0 11px; } }

/* ===== body ===== */
.au-body { width: 100%; display: block; position: relative; padding: 0 0 84px; }
.au-body.au-reg { padding: 10px 0 24px; }
@media (min-width: 1024px) { .au-body { padding-bottom: 0; } }
.au-section { margin-top: 14px; }

/* ===== landing hero: headline → 3 doors → CTAs → login card → banner → games → trust ===== */
.au-hero { padding: 14px 0 0; color: #fff; }
.au-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; grid-template-areas: "left" "login" "banner" "games" "trust"; }
.au-h-left { grid-area: left; min-width: 0; }
.au-h-title { font-family: SukhumvitBold, sans-serif; font-size: 27px; line-height: 1.25; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.au-h-title .au-nw, .au-h-title em { white-space: nowrap; }
.au-h-title em { font-style: normal; color: goldenrod; display: block; }
.au-h-lead { font-size: 17px; line-height: 1.45; color: var(--au-light); margin: 6px 0 12px; }
.au-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.au-door { display: flex; flex-direction: column; align-items: stretch; min-height: 96px; min-width: 0; background: #222; border: var(--au-edge) 1px solid; box-shadow: var(--au-glow); border-radius: 10px; overflow: hidden; color: #fff; }
.au-door:hover { border-color: #f5bd70; color: #fff; }
.au-door img { display: block; width: 100%; height: 64px; object-fit: cover; flex: none; }
.au-door-t { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1 1 auto; padding: 6px 4px 7px; gap: 1px; min-width: 0; }
.au-door b { font-family: SukhumvitBold, sans-serif; font-size: 19px; line-height: 1.2; color: #fff; }
.au-door small { font-family: SukhumvitReg, sans-serif; font-size: 17px; line-height: 1.2; color: var(--au-gold); }
.au-door small span { display: block; }
.au-door small .au-sep { display: none; }
@media (min-width: 640px) { .au-door small span { display: inline; } .au-door small .au-sep { display: inline; } }
.au-cta { display: grid; gap: 8px; }
/* gold / silver faces get #111 text (owner DEV-003: "เห็นไม่ชัด ขอ font สีดำ") */
.au-btn-signup, .au-btn-login { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border-radius: 12px; line-height: 1.2; padding: 0 10px; color: #111 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); text-transform: none; font-family: SukhumvitBold, sans-serif; }
.au-btn-signup { min-height: 60px; font-size: 22px; }
.au-btn-signup .au-main { display: inline-flex; align-items: center; gap: 10px; }
/* GOV days: the phase sub-line under "สมัครสมาชิก ฟรี" (mockup: "ทันแทงงวดนี้ · ก่อนปิดรับ 15:20") */
.au-btn-signup.au-two { flex-direction: column; gap: 1px; min-height: 72px; padding: 6px 10px; }
.au-btn-signup .au-sub { display: block; font-family: SukhumvitReg, sans-serif; font-size: 17px; line-height: 1.2; color: #111; }
.au-btn-login { min-height: 56px; font-size: 20px; }
.au-btn-outline { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: 2px solid var(--au-gold-deep); color: var(--au-light); background: #222; border-radius: 12px; font-family: SukhumvitBold, sans-serif; font-size: 19px; line-height: 1.2; }
.au-btn-outline:hover { color: var(--au-warm); border-color: var(--au-warm); }
.au-chk-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 7px; font-family: SukhumvitReg, sans-serif; font-size: 17px; color: var(--au-light); line-height: 1.3; text-align: center; margin: 0; }
.au-chk-line .fa, .au-chk-line .fas, .au-chk-line .far { color: var(--au-gold); }

/* ===== login card (.toplogin black / 1px #f5bd70) ===== */
.au-card-dark { grid-area: login; display: block; width: 100%; border: 1px #f5bd70 solid; border-radius: var(--au-radius); background: #000; padding: 12px 12px 6px; color: var(--au-light); box-shadow: black 0 0 5px, var(--au-shadow); font-family: SukhumvitReg, sans-serif; line-height: 1.3; }
.au-card-dark .au-title { display: flex; align-items: center; gap: 8px; font-family: SukhumvitBold, sans-serif; font-size: 19px; color: #fff; margin: 0 0 8px; }
.au-card-dark .au-title .au-hint { margin-left: auto; font-family: SukhumvitReg, sans-serif; font-size: 17px; color: var(--au-gold); white-space: nowrap; }
.au-lbl { display: block; font-family: SukhumvitBold, sans-serif; font-size: 18px; color: var(--au-light); margin: 0 0 4px; line-height: 1.3; }
.au-field { display: flex; align-items: stretch; width: 100%; margin-bottom: 8px; position: relative; min-height: 56px; border: 1.5px solid #ced4da; border-radius: var(--au-radius-sm); background: #fff; overflow: hidden; }
.au-field:focus-within { border-color: #f5bd70; box-shadow: 0 0 0 3px rgba(245, 189, 112, .35); }
.au-field .au-ic { display: flex; align-items: center; justify-content: center; width: 46px; flex: none; background: #e9ecef; border-right: 1px solid #ced4da; color: #495057; }
.au-field input { flex: 1 1 auto; min-width: 0; height: 53px; font-size: 18px; font-family: NotosansThai, sans-serif; padding: 0 12px; border: 0; outline: 0; background: transparent; color: #111; line-height: 1; }
.au-field input::placeholder { color: #8a8f94; }
.au-field .au-act { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 48px; padding: 0 12px; border: 0; border-left: 1px solid #e9ecef; background: #f8f9fa; color: #495057; font-family: SukhumvitBold, sans-serif; font-size: 17px; }
.au-field.au-big { min-height: 64px; }
.au-field.au-big input { height: 61px; font-family: SukhumvitBold, sans-serif; font-size: 26px; letter-spacing: .04em; }
.au-field.au-big.au-pw input { font-size: 30px; letter-spacing: .06em; }
.au-field .au-pre { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 12px; font-family: SukhumvitBold, sans-serif; font-size: 20px; color: #111; border-right: 1px solid #e9ecef; background: #f8f9fa; }
.au-field.au-bad { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, .16); }
.au-flag { display: inline-block; width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); background: linear-gradient(to bottom, #a51931 0 16.6%, #f4f5f8 16.6% 33.3%, #2d2a4a 33.3% 66.6%, #f4f5f8 66.6% 83.3%, #a51931 83.3%); }
.au-login-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; font-size: 17px; flex-wrap: wrap; }
.au-login-foot a { color: var(--au-light); display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 2px; font-family: SukhumvitBold, sans-serif; }
.au-login-foot a:hover { color: var(--au-warm); }
.au-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; padding: 0 2px; margin: 0; font-family: SukhumvitReg, sans-serif; font-size: 17px; color: var(--au-light); font-weight: 400; }
.au-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-chk .au-box { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #ced4da; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #111; flex: none; }
.au-chk .au-box .fa, .au-chk .au-box .fas { display: none; }
.au-chk input:checked + .au-box { background-image: var(--au-gold-grad); border-color: #a55d07; }
.au-chk input:checked + .au-box .fa, .au-chk input:checked + .au-box .fas { display: inline-block; }
.au-chk input:focus-visible + .au-box { outline: 3px solid #f5bd70; outline-offset: 2px; }
.au-msg { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 2px; font-size: 17px; line-height: 1.4; font-family: SukhumvitReg, sans-serif; }
.au-msg .fa, .au-msg .fas { margin-top: 3px; }
.au-msg.au-err { color: #ff8a80; }
.au-card-white .au-msg.au-err { color: var(--au-err); }
.au-msg.au-ok { color: var(--au-ok); }
.au-msg.au-info { color: #495057; }
.au-msg.au-dim { color: var(--au-gold); margin: 0 0 2px; }
.au-help.au-center-text { text-align: center; }

/* ===== hero banner slot (690×310 static, by time state) ===== */
.au-h-banner { grid-area: banner; min-width: 0; }
.au-slot { display: block; position: relative; width: 100%; aspect-ratio: 690 / 310; border-radius: 10px; overflow: hidden; background: #0f0f10; border: var(--au-edge) 1px solid; box-shadow: var(--au-glow); }
.au-slot > a { display: block; width: 100%; height: 100%; }
.au-slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
/* text cards size by their content (the old min-height left a black band under the gold card) */
.au-slot.au-slot-gov { aspect-ratio: auto; min-height: auto; }
.au-ph { background: linear-gradient(120deg, #b8842a 0%, #f1c66a 50%, #d4a63a 100%); color: #111; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 10px 18px; box-sizing: border-box; width: 100%; height: 100%; font-family: SukhumvitReg, sans-serif; line-height: 1.2; gap: 2px; }
/* (0,1,1) `.au-slot > a` beat (0,1,0) `.au-ph` → the card rendered as one inline line (review 2026-10-12): pin the stacked layout */
.au-slot > a.au-ph { display: flex; flex-direction: column; height: auto; min-height: 152px; }
.au-ph > .au-tag, .au-ph > b, .au-ph > span, .au-ph > em { display: block; }
.au-ph > em, .au-ph > .au-gov-row { display: flex; }
.au-ph:hover, .au-ph:focus { color: #111; }
.au-ph .au-tag { font-size: 17px; padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .18); margin: 0 0 4px; font-family: SukhumvitBold, sans-serif; }
.au-ph b { font-size: 30px; line-height: 1.05; font-weight: 700; color: #111; font-family: SukhumvitBold, sans-serif; }
.au-ph span { font-size: 17px; margin-top: 4px; line-height: 1.2; }
.au-ph em { font-style: normal; font-size: 17px; font-weight: 700; margin-top: 7px; padding: 0 14px; min-height: 48px; border-radius: 999px; background: #111; color: #f2c14e; display: inline-flex; align-items: center; gap: 6px; font-family: SukhumvitBold, sans-serif; }
.au-ph .au-gov-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 3px 0; border-top: 1px solid rgba(0, 0, 0, .12); font-size: 17px; }
.au-ph .au-gov-row:first-of-type { border-top: 0; }
.au-ph .au-gov-row b { font-size: 22px; letter-spacing: .06em; }
.au-ph .au-gov-row.au-first b { font-size: 28px; letter-spacing: .1em; }

/* ===== GOV days: the first-screen card of the landing (mockups landing-mobile-gov*.png) — every row a stacked block ===== */
.au-govcard { display: block; width: 100%; margin: 0 0 12px; padding: 14px 14px 12px; border-radius: 14px; border: var(--au-edge) 1px solid; box-shadow: var(--au-glow); background: linear-gradient(120deg, #b8842a 0%, #f1c66a 50%, #d4a63a 100%); color: #111; font-family: SukhumvitReg, sans-serif; line-height: 1.25; }
.au-govcard:hover, .au-govcard:focus { color: #111; }
.au-govcard .au-gc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.au-govcard .au-gc-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1 1 auto; }
.au-govcard .au-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .18); margin: 0 0 4px; font-family: SukhumvitBold, sans-serif; }
.au-govcard .au-gc-title { display: block; font-size: 30px; line-height: 1.05; font-weight: 700; font-family: SukhumvitBold, sans-serif; }
.au-govcard .au-gc-when { display: block; font-size: 24px; line-height: 1.15; margin-top: 2px; }
.au-govcard .au-gc-line { display: block; font-size: 19px; line-height: 1.25; }
.au-govcard img { display: block; flex: none; width: 124px; height: 82px; object-fit: cover; object-position: 50% 50%; border-radius: 10px; border: 2px solid #111; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.au-govcard .au-gnums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.au-govcard .au-gn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 6px 7px; border-radius: 12px; background: #111; color: #fff; text-align: center; min-width: 0; }
.au-govcard .au-gn > span { font-size: 17px; line-height: 1.2; color: #f1f1f1; }
.au-govcard .au-gn > b { font-size: 28px; line-height: 1.1; letter-spacing: .08em; color: #fff; font-family: SukhumvitBold, sans-serif; white-space: nowrap; }
.au-govcard .au-gn.au-first, .au-govcard .au-gn.au-last { grid-column: 1 / -1; }
.au-govcard .au-gn.au-first > b { font-size: 40px; letter-spacing: .12em; color: #f2c14e; }
.au-govcard .au-gc-next { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 17px; line-height: 1.3; }
.au-govcard .au-gc-next .fa, .au-govcard .au-gc-next .far { margin-top: 3px; }
/* the "อัตราจ่าย หวยรัฐบาล" card under the CTA (the site's register-page rate table) */
.au-rates { flex-direction: column; margin-top: 12px; padding: 10px 10px 10px; font-family: SukhumvitReg, sans-serif; }
.au-rates .au-rates-hd { display: flex; align-items: center; gap: 8px; font-family: SukhumvitBold, sans-serif; font-size: 19px; color: #fff; margin: 0 0 8px; }
.au-rates .au-rates-hd .fa, .au-rates .au-rates-hd .fas { color: var(--au-gold); }
.au-rates .au-rates-hd .au-u { margin-left: auto; font-family: SukhumvitReg, sans-serif; font-size: 17px; color: var(--au-light); }
.au-rates .au-rates-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.au-rates .au-rc { grid-column: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 64px; padding: 6px 4px; border-radius: 10px; background: #2a2a2a; border: 1px solid var(--au-edge-soft); text-align: center; min-width: 0; }
.au-rates .au-rc:nth-child(4), .au-rates .au-rc:nth-child(5) { grid-column: span 3; }
.au-rates .au-rl { font-size: 17px; color: var(--au-light); line-height: 1.2; }
.au-rates .au-rv { font-size: 26px; color: var(--au-gold); line-height: 1.1; }
/* ===== GOV days: the slim strip of the dedicated login page (mockup login-gov.html) ===== */
.au-govstrip { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding: 8px 10px 8px 8px; min-height: 56px; border-radius: 12px; border: var(--au-edge) 1px solid; box-shadow: var(--au-glow); background: linear-gradient(120deg, #b8842a 0%, #f1c66a 50%, #d4a63a 100%); color: #111; text-align: left; font-family: SukhumvitReg, sans-serif; line-height: 1.2; }
.au-govstrip:hover, .au-govstrip:focus { color: #111; }
.au-govstrip img { flex: none; width: 84px; height: 60px; object-fit: cover; border-radius: 8px; border: 2px solid #111; }
.au-govstrip .au-gs-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.au-govstrip .au-gs-tx > b { font-family: SukhumvitBold, sans-serif; font-size: 19px; line-height: 1.2; }
.au-govstrip .au-gs-line { font-size: 17px; }
.au-govstrip .au-gs-rate { font-family: SukhumvitBold, sans-serif; font-size: 17px; }
.au-govstrip > .fa, .au-govstrip > .fas { flex: none; font-size: 17px; }
/* ===== trust row ===== */
.au-h-trust { grid-area: trust; }
.au-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: #222; border: 1px solid #333; border-radius: 10px; padding: 10px 4px 9px; font-family: SukhumvitReg, sans-serif; }
.au-trust div { text-align: center; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.au-trust .fa, .au-trust .fas, .au-trust .far { color: var(--au-gold); margin-bottom: 3px; font-size: 22px; }
.au-trust b { display: block; font-family: SukhumvitBold, sans-serif; font-size: 18px; color: #fff; line-height: 1.2; white-space: nowrap; }
.au-trust span { display: block; font-size: 17px; color: var(--au-light); line-height: 1.2; margin-top: 3px; }

/* ===== gold section bar (views/main.vue .tab + ruay-refresh rg-bar) ===== */
.au-bar { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-family: SukhumvitBold, sans-serif; font-size: 18px; line-height: 1.2; margin: 0 0 8px; padding: 5px 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); background-image: var(--au-gold-grad); border: 1px solid #a55d07; color: rgb(120, 50, 5); text-align: center; width: 100%; }
.au-bar.au-has-link { justify-content: space-between; }
.au-bar .au-bar-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.au-bar .fa, .au-bar .fas, .au-bar .far { color: #fff; }
.au-bar .au-bar-sub { font-family: SukhumvitReg, sans-serif; font-size: 17px; }
.au-bar .au-bar-link { font-family: SukhumvitBold, sans-serif; font-size: 17px; color: rgb(120, 50, 5); display: inline-flex; align-items: center; gap: 5px; min-height: 48px; margin: -5px 0; padding: 0 2px; white-space: nowrap; }
.au-bar .au-bar-link .fa, .au-bar .au-bar-link .fas { color: rgb(120, 50, 5); }
/* ===== dark cards ===== */
.au-dark { background: #222; border: var(--au-edge) 1px solid; border-radius: 10px; box-shadow: var(--au-glow); color: #fff; display: flex; }
/* ===== games strip ===== */
.au-h-games { grid-area: games; min-width: 0; }
.au-provs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.au-prov { grid-column: span 2; flex-direction: column; overflow: hidden; align-items: stretch; min-width: 0; }
.au-prov:hover { color: #fff; }
.au-prov.au-big { grid-column: span 3; }
.au-prov img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; display: block; flex: none; }
.au-prov .au-pname { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 50px; padding: 5px 2px; text-align: center; font-family: SukhumvitBold, sans-serif; font-size: 17px; color: #fff; line-height: 1.15; }
.au-prov.au-big .au-pname { font-size: 19px; min-height: 48px; }
.au-prov .au-pname small { font-family: SukhumvitReg, sans-serif; font-size: 17px; color: var(--au-gold); font-weight: 400; margin-top: 2px; }
.au-games-note { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; text-align: center; margin-top: 8px; font-family: SukhumvitReg, sans-serif; font-size: 17px; color: var(--au-light); line-height: 1.3; }
.au-games-note .fa, .au-games-note .fas { color: var(--au-gold); }
.au-games-note a { color: var(--au-gold); font-family: SukhumvitBold, sans-serif; min-height: 48px; display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }
/* ===== next draws ===== */
.au-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.au-nx { flex-direction: column; padding: 10px 14px 2px; font-family: SukhumvitReg, sans-serif; }
.au-nx:hover { color: #fff; }
.au-nx-top { display: flex; align-items: center; gap: 10px; }
.au-nx-ico { width: 36px; height: 27px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--au-gold); font-size: 22px; }
.au-nx-ico .flag-icon { width: 36px; height: 27px; border-radius: 4px; border: 1px solid #555; background-size: cover; }
.au-nx-name { font-family: SukhumvitBold, sans-serif; font-size: 20px; color: #fff; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.au-nx-sub { font-size: 17px; color: var(--au-gold); line-height: 1.25; margin-top: 2px; padding-left: 46px; }
.au-nx-time { margin-left: auto; text-align: right; flex: none; }
.au-nx-time small { display: block; font-size: 17px; color: var(--au-light); line-height: 1.1; }
.au-nx-time b { display: block; font-family: SukhumvitBold, sans-serif; font-size: 28px; line-height: 1.05; color: var(--au-gold); margin-top: 2px; }
.au-nx-go { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 6px; border-top: 1px solid #333; font-family: SukhumvitBold, sans-serif; font-size: 17px; color: var(--au-light); }
.au-nx:hover .au-nx-go { color: var(--au-warm); }
/* ===== results (white cards; labels on white = --t-primary-darker #976f02, 4.6:1) ===== */
.au-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.au-res { background: rgba(255, 255, 255, .92); border: #fff 2px solid; border-radius: 10px; padding: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); font-family: SukhumvitReg, sans-serif; color: #212529; min-width: 0; }
.au-res.au-vip { border-color: #f5bd70; }
.au-res h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: SukhumvitBold, sans-serif; font-size: 18px; line-height: 1.2; color: #212529; }
.au-res h3.au-danger { color: #976f02; }
.au-res h3 .au-badge { margin-left: auto; font-family: NotosansThai, sans-serif; font-weight: 400; font-size: 17px; line-height: 1; color: #fff; background: #343a40; border-radius: .25rem; padding: .3em .5em; white-space: nowrap; }
.au-res h3 .au-badge.au-vip { background-color: #976f02; }
.au-res h3 .flag-icon { width: 34px; height: 25px; border-radius: 4px; border: 1px solid #555; background-size: cover; flex: none; }
.au-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.au-cards.au-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.au-cards.au-c1 { grid-template-columns: minmax(0, 1fr); }
.au-cards + .au-cards { margin-top: 6px; }
.au-rcard { background: #fff; border: 1px solid rgba(0, 0, 0, .125); border-radius: var(--au-radius-sm); overflow: hidden; text-align: center; min-width: 0; }
.au-rcard.au-gold { border-color: #f5bd70; }
.au-rcard.au-dark-b { border-color: #343a40; }
.au-rcard .au-rhead { background: rgba(0, 0, 0, .03); border-bottom: 1px solid rgba(0, 0, 0, .125); color: #976f02; font-family: SukhumvitBold, sans-serif; font-size: 17px; padding: 4px; line-height: 1.3; }
.au-rcard .au-rbody { padding: 5px 4px 6px; }
.au-rnum { font-family: SukhumvitBold, sans-serif; font-size: 26px; color: #212529; line-height: 1.2; letter-spacing: .04em; white-space: nowrap; }
.au-rnum.au-bigN { font-size: 34px; letter-spacing: .08em; }
.au-rnum.au-wait { font-family: SukhumvitReg, sans-serif; font-size: 17px; color: #6c757d; letter-spacing: 0; line-height: 1.84; }
.au-res-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 17px; color: #6c757d; min-height: 40px; }
.au-res-foot a { color: #976f02; font-family: SukhumvitBold, sans-serif; display: inline-flex; align-items: center; gap: 5px; min-height: 48px; white-space: nowrap; flex: none; }
.au-stock { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.au-stk { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(0, 0, 0, .125); border-radius: var(--au-radius-sm); padding: 6px 10px; min-height: 52px; }
.au-stk .au-nm { font-family: SukhumvitBold, sans-serif; font-size: 17px; line-height: 1.2; color: #212529; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-stk .au-nm small { display: block; font-family: SukhumvitReg, sans-serif; font-size: 17px; color: #6c757d; line-height: 1.2; font-weight: 400; }
.au-stk .au-v { text-align: center; min-width: 44px; }
.au-stk .au-v small { display: block; font-size: 17px; color: #976f02; line-height: 1.1; font-family: SukhumvitBold, sans-serif; }
.au-stk .au-v b { display: block; font-family: SukhumvitBold, sans-serif; font-size: 22px; line-height: 1.15; letter-spacing: .04em; color: #212529; }
.au-stk .au-v.au-wait { grid-column: span 2; font-size: 17px; color: #6c757d; text-align: right; min-width: 0; }
/* ===== jackpot row ===== */
.au-jackrow { background: #222; border: 1px solid #333; border-radius: 10px; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-family: SukhumvitReg, sans-serif; color: var(--au-light); }
.au-boxjackpot { background: #343a40; border: var(--au-edge) 1px solid; box-shadow: var(--au-edge) 0 0 3px; border-radius: 12px; padding: 6px 12px; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; flex-wrap: wrap; }
.au-boxjackpot small { font-family: SukhumvitReg, sans-serif; font-size: 19px; color: var(--au-light); line-height: 1.2; }
.au-boxjackpot .gold-text { font-family: SukhumvitBold, sans-serif; font-size: 32px; line-height: 1.1; }
.au-jack-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.au-btn-ghost { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 12px; border: 1px solid var(--au-gold-deep); color: var(--au-gold); border-radius: 10px; font-family: SukhumvitBold, sans-serif; font-size: 17px; background: #1a1a1a; white-space: nowrap; }
.au-btn-ghost:hover { color: var(--au-warm); border-color: var(--au-warm); }
/* ===== two steps + done (DEV-064b) ===== */
.au-steps { background: #222; border: 1px solid #333; border-radius: 10px; padding: 12px; }
.au-steps ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.au-step { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.au-step .au-n { flex: none; width: 46px; height: 46px; border-radius: 50%; background-image: var(--au-gold-grad); border: 1px solid #a55d07; color: #111; font-family: SukhumvitBold, sans-serif; font-size: 21px; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.au-step .au-n.au-ok { background: #1a1a1a; border: 1px solid var(--au-gold-deep); color: var(--au-gold); }
.au-step b { display: block; font-family: SukhumvitBold, sans-serif; font-size: 18px; color: #fff; line-height: 1.25; padding-top: 2px; }
.au-step span { display: block; font-family: SukhumvitReg, sans-serif; font-size: 17px; color: var(--au-light); line-height: 1.3; margin-top: 2px; }
.au-steps .au-btn-signup { margin-top: 12px; }
/* ===== contact + footer ===== */
.au-contact { flex-direction: column; align-items: center; padding: 14px 14px 12px; gap: 6px; text-align: center; font-family: SukhumvitReg, sans-serif; }
.au-contact .au-ttl { display: flex; align-items: center; gap: 8px; font-family: SukhumvitBold, sans-serif; font-size: 19px; color: #fff; }
.au-contact .au-ttl .fa, .au-contact .au-ttl .fas { color: var(--au-gold); }
.au-contact .au-sub { font-size: 17px; color: var(--au-light); line-height: 1.35; }
.au-line-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 10px; border-radius: 12px; background: #222; border: 1px solid #444; color: #fff; font-family: SukhumvitBold, sans-serif; font-size: 18px; line-height: 1.2; padding: 0 10px; }
.au-line-btn:hover { border-color: var(--au-warm); color: var(--au-warm); }
.au-line-btn.au-lite { background: #fff; color: #111; border: 1.5px solid #ced4da; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.au-line-btn.au-lite:hover { color: #111; border-color: var(--au-gold-deep); }
.au-line-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 30px; border-radius: 8px; background: var(--au-line); color: #fff; font: 700 17px/1 Arial, Helvetica, sans-serif; letter-spacing: .02em; flex: none; }
.au-foot { text-align: center; padding: 14px 10px 8px; color: #9a9a9a; font-family: NotosansThai, sans-serif; }
.au-foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 4px; margin-bottom: 4px; }
.au-foot-links a { color: #d4af37; font-size: 17px; min-height: 48px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; }
.au-foot-links a:hover { color: #f5d76e; }
.au-foot-small { font-size: 17px; line-height: 1.6; }
.au-pills { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.au-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--au-edge-soft); border-radius: 999px; color: #F0C75E; font-size: 17px; font-family: SukhumvitReg, sans-serif; background: rgba(0, 0, 0, .35); }
.au-pill:hover { color: #fff; }
.au-pill.au-on { background: var(--au-gold); color: #111; border-color: var(--au-gold); font-family: SukhumvitBold, sans-serif; }
/* ===== mobile sticky bar for guests (member.css .botnavbar colours) — hidden while the hero CTA is on screen ===== */
.au-guestbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; height: calc(64px + env(safe-area-inset-bottom)); background: #151515; box-shadow: 0 -1px 0 #222; padding: 4px 10px calc(4px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; transition: transform .25s ease; }
.au-guestbar .au-btn-signup { min-height: 56px; font-size: 20px; }
.au-guestbar .au-btn-outline { min-height: 56px; }
.au-js .au-guestbar { transform: translateY(110%); }
.au-js .au-guestbar.au-show { transform: none; }
/* ===== dedicated login page (login_form_v2) ===== */
.au-lhero { padding: 12px 2px 0; text-align: center; font-family: SukhumvitReg, sans-serif; color: #fff; }
.au-lhero .au-tagline { margin: 0 0 10px; font-size: 18px; line-height: 1.4; color: var(--au-gold); font-family: SukhumvitBold, sans-serif; }
.au-lhero .au-tagline span { white-space: nowrap; }
.au-lhero .au-tagline i { font-style: normal; color: rgba(213, 173, 109, .55); padding: 0 3px; }
.au-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; margin: 8px 0 0; font-size: 17px; color: #f1f1f1; line-height: 1.35; }
.au-ticks span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.au-ticks .fa, .au-ticks .fas { color: var(--au-gold); }
.au-games-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; font-family: SukhumvitBold, sans-serif; font-size: 18px; color: #fff; line-height: 1.2; text-align: left; }
.au-games-head .fa, .au-games-head .fas { color: var(--au-gold); }
.au-games-head small { margin-left: auto; font-family: SukhumvitReg, sans-serif; font-size: 17px; color: var(--au-gold); }
.au-games { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.au-gcard { display: flex; flex-direction: column; min-height: 96px; border-radius: 12px; overflow: hidden; background: #222; border: 1px solid var(--au-edge); box-shadow: var(--au-glow); color: #fff; text-align: left; }
.au-gcard:hover { color: #fff; }
.au-gcard img { display: block; width: 100%; height: 100px; object-fit: cover; object-position: 50% 40%; }
.au-gcard .au-cap { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 5px 10px 6px; line-height: 1.2; }
.au-gcard .au-cap .au-w { font-family: SukhumvitReg, sans-serif; font-size: 17px; color: var(--au-gold); }
.au-gcard .au-cap b { font-family: SukhumvitBold, sans-serif; font-size: 18px; color: #fff; }
.au-lhero + .au-card-dark { margin-top: 12px; }
.au-card-dark.au-login2 { padding: 14px 12px 14px; }
.au-card-dark.au-login2 .au-title { font-size: 22px; align-items: baseline; }
.au-govday .au-card-dark.au-login2 + .au-games-head { margin-top: 14px; }
.au-trust.au-trust2 { grid-template-columns: repeat(2, 1fr); gap: 6px; background: transparent; border: 0; padding: 0; margin-top: 10px; }
.au-trust.au-trust2 div { background: #222; border: 1px solid var(--au-edge-soft); border-radius: 12px; padding: 9px 4px 8px; }
.au-trust.au-trust2 b { color: var(--au-gold); font-size: 20px; }
.au-foot-note { font-size: 17px; color: #9a9a9a; text-align: center; margin: 14px 0 0; line-height: 1.3; }
/* ===== sign-up pages (white card) ===== */
.au-card-white { background: #fff; border-radius: var(--au-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); padding: 16px 12px 14px; font-family: SukhumvitReg, sans-serif; color: #212529; margin: 0; }
.au-card-white + .au-card-white { margin-top: 10px; }
.au-card-white .au-lbl { color: #111; }
.au-card-white h1 { margin: 6px 0 4px; font-family: SukhumvitBold, sans-serif; font-size: 25px; line-height: 1.25; color: #111; font-weight: 700; }
.au-card-white .au-lead { margin: 0 0 12px; font-size: 17px; line-height: 1.45; color: #495057; }
.au-btn-xl { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; border-radius: 12px; font-family: SukhumvitBold, sans-serif; font-size: 21px; line-height: 1.2; color: #111 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); text-transform: none; padding: 0 12px; }
.au-btn-white { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; border-radius: 12px; background: #fff; border: 2px solid var(--au-gold-deep); color: #111; font-family: SukhumvitBold, sans-serif; font-size: 20px; line-height: 1.2; padding: 0 12px; }
.au-btn-white:hover { color: #111; background: #fff8e8; }
.au-btn-white.au-sm { min-height: 52px; font-size: 18px; border-width: 1.5px; }
.au-link-row { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; font-size: 17px; color: var(--au-gold-deep); font-family: SukhumvitBold, sans-serif; line-height: 1.2; }
.au-link-row.au-block { display: flex; width: 100%; }
.au-link-row.au-plain { font-family: SukhumvitReg, sans-serif; text-decoration: underline; text-underline-offset: 4px; color: #495057; }
.au-link-row.au-goldlink { color: #F0C75E; margin-top: 6px; }
.au-stack > * + * { margin-top: 10px; }
.au-ipill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--au-gold-deep); border-radius: 999px; color: #111; font-family: SukhumvitBold, sans-serif; font-size: 17px; line-height: 1.2; background: #fff; vertical-align: middle; }
.au-ipill .fa, .au-ipill .fas { color: var(--au-gold-deep); }
.au-ipill.au-goldp { color: #F0C75E; background: rgba(0, 0, 0, .35); border-color: rgba(213, 173, 109, .6); }
.au-ipill.au-goldp .fa, .au-ipill.au-goldp .fas { color: #F0C75E; }
.au-inline-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; font-size: 17px; color: #6c757d; margin-top: 8px; }
.au-help { font-size: 17px; color: #6c757d; margin: 6px 0 0; line-height: 1.4; }
.au-help a { text-decoration: underline; text-underline-offset: 3px; color: var(--au-gold-deep); }
.au-help.au-row { display: flex; align-items: flex-start; gap: 6px; }
.au-help.au-row.au-center { justify-content: center; }
.au-help.au-consent { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.au-help .au-refcode { font-family: SukhumvitBold, sans-serif; color: #111; letter-spacing: .08em; white-space: nowrap; }
.au-ref-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 17px; color: #6c757d; min-height: 24px; }
.au-ref-note .fa, .au-ref-note .fas { color: var(--au-ok); }
.au-govline { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff3d6; color: #7a5a0e; font-family: SukhumvitBold, sans-serif; font-size: 17px; line-height: 1.3; }
.au-govline .fa, .au-govline .fas { color: #b47e18; }
.au-steps-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 18px; color: #111; margin: 0 0 8px; font-family: SukhumvitBold, sans-serif; line-height: 1.3; white-space: nowrap; }
.au-steps-h .au-of { color: #6c757d; font-family: SukhumvitReg, sans-serif; font-size: 17px; }
.au-stepper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin: 0 0 14px; }
.au-stepper .au-st i { display: block; height: 10px; border-radius: 999px; background: #e9ecef; }
.au-stepper .au-st.au-done i, .au-stepper .au-st.au-on i { background: var(--au-gold-grad); }
.au-stepper .au-st span { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 5px; font-size: 17px; line-height: 1.2; color: #8a8a8a; font-family: SukhumvitReg, sans-serif; white-space: nowrap; }
.au-stepper .au-st.au-on span { color: #111; font-family: SukhumvitBold, sans-serif; }
.au-stepper .au-st.au-done span { color: var(--au-ok); }
.au-captcha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 12px; }
.au-captcha img { width: 140px; height: 50px; border: 1px solid #ced4da; border-radius: 8px; image-rendering: pixelated; background: #fff; }
.au-captcha .au-field { margin-bottom: 0; }
.au-captcha-re { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 10px; border: 0; background: transparent; color: var(--au-gold-deep); font-family: SukhumvitBold, sans-serif; font-size: 17px; }
/* DEV-066 bot gate: the honeypot lives off-screen (a human never sees or tabs into it), the Turnstile slot (managed widget, interaction-only:
   nothing shows unless Cloudflare wants one click), the blocked state (level 2: no submit — the LINE way out + try again) */
.au-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.au-hp label, .au-hp input { visibility: hidden; }   /* still in the DOM and still submitted — a script filling every field fills it; no human can */
.au-turnstile { margin-top: 10px; }
.au-turnstile:empty { display: none; }
.au-blocked-actions, .au-is-blocked .au-otp-actions, .au-is-blocked .au-help.au-start, .au-is-blocked .au-captcha, .au-is-blocked .au-captcha-re { display: none; }
.au-is-blocked .au-blocked-actions { display: block; }
/* OTP: 4 visual boxes + ONE real input over them (inputmode numeric, one-time-code) */
.au-otp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 8px; position: relative; }
.au-otp b { height: 68px; min-width: 56px; border: 2px solid #ced4da; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-family: SukhumvitBold, sans-serif; font-size: 34px; color: #111; font-weight: 700; }
.au-otp b.au-on { border-color: #c79810; box-shadow: 0 0 0 3px rgba(212, 160, 23, .25); }
.au-otp b.au-on:empty::after { content: ''; width: 2px; height: 32px; background: #c79810; }
.au-otp.au-bad b { border-color: #dc3545; background: #fff5f5; }
.au-otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 34px; border: 0; color: transparent; caret-color: transparent; }
.au-otp input:focus { outline: 0; }
.au-nojs .au-otp input { position: static; opacity: 1; height: 68px; grid-column: 1 / -1; font-size: 34px; letter-spacing: .4em; text-align: center; color: #111; border: 2px solid #ced4da; border-radius: 12px; font-family: SukhumvitBold, sans-serif; caret-color: auto; }
.au-nojs .au-otp b { display: none; }
.au-resend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 48px; font-size: 17px; color: #6c757d; gap: 4px 6px; margin-top: 4px; line-height: 1.3; }
.au-resend b { font-family: SukhumvitBold, sans-serif; color: #111; }
.au-resend-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--au-gold-deep); border-radius: 999px; background: #fff; color: #111; font-family: SukhumvitBold, sans-serif; font-size: 17px; }
.au-resend-btn[disabled] { opacity: .5; cursor: default; }
.au-okrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.au-okrow .au-msg { margin: 0; }
/* the username field of step 2 (owner 2026-10-12 22:10: suggested, editable, checked live) — green ring once /cu said the name is free */
.au-field.au-un input { font-size: 24px; letter-spacing: .02em; }
.au-field.au-good { border-color: var(--au-ok); box-shadow: 0 0 0 3px rgba(40, 167, 69, .16); }
.au-okrow .au-msg.au-dim { color: #6c757d; }
.au-okrow .au-msg .fa-circle-notch { animation: au-spin 1s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .au-okrow .au-msg .fa-circle-notch { animation: none; } }
.au-dup-actions, .au-is-dup .au-otp-actions, .au-is-dup .au-help.au-start { display: none; }
.au-is-dup .au-dup-actions { display: block; }
/* ===== success ===== */
.au-body.au-has-nav { padding-bottom: 84px; }
.au-card-white.au-center { text-align: center; }
.au-bigcheck { display: flex; justify-content: center; margin: 2px 0 6px; font-size: 64px; color: var(--au-ok); }
.au-next-tag { display: inline-block; margin: 10px 0 0; padding: 2px 12px; border-radius: 999px; background: #fff3d6; color: #7a5a0e; font-family: SukhumvitBold, sans-serif; font-size: 17px; }
.au-sdoors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.au-sdoor { display: flex; flex-direction: column; align-items: stretch; border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, .09); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); overflow: hidden; color: #111; font-family: SukhumvitBold, sans-serif; text-align: center; }
.au-sdoor:hover { color: #111; }
.au-sdoor img { display: block; width: 100%; height: 96px; object-fit: cover; object-position: 50% 40%; }
.au-sdoor .au-door-top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 6px 5px; min-height: 58px; }
.au-sdoor .au-door-title { font-size: 20px; line-height: 1.2; }
.au-sdoor .au-door-sub { font-family: SukhumvitReg, sans-serif; font-size: 17px; line-height: 1.2; color: #6c757d; }
.au-sdoor .au-door-go { flex: none; width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 17px; line-height: 1; }
.au-door-go.au-gold { background-image: var(--au-gold-grad); color: #111; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.au-door-go.au-darkgo { background: #222; color: var(--au-gold); }
/* GOV days (mockup success-gov.html): the government door full width, the games door a horizontal row (two thumbnails · text · CTA bar) */
.au-sdoors.au-gov { grid-template-columns: minmax(0, 1fr); }
.au-sdoor.au-wide img { height: 150px; object-position: 50% 45%; }
.au-sdoor.au-wide .au-door-title { font-size: 24px; }
.au-sdoor.au-wide .au-door-sub { font-size: 19px; }
.au-sdoor.au-wide .au-door-go { min-height: 56px; font-size: 20px; }
.au-sdoor.au-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: "art top" "go go"; text-align: left; }
.au-sdoor.au-row .au-door-art { grid-area: art; display: flex; height: 100%; min-height: 96px; }
.au-sdoor.au-row .au-door-art img { width: 50%; height: 100%; min-height: 96px; object-fit: cover; object-position: 50% 30%; display: block; }
.au-sdoor.au-row .au-door-top { grid-area: top; align-items: flex-start; padding: 8px 12px; }
.au-sdoor.au-row .au-door-go { grid-area: go; }
.au-credhead { display: flex; align-items: center; gap: 8px; font-family: SukhumvitBold, sans-serif; font-size: 19px; color: #111; margin: 0 0 8px; }
.au-credrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 4px 6px 4px 12px; border: 1px solid #e9ecef; border-radius: 10px; background: #f8f9fa; font-size: 17px; color: #495057; line-height: 1.25; }
.au-credrow + .au-credrow { margin-top: 6px; }
/* owner 2026-10-12 22:10: "ชื่อผู้ใช้ของคุณคือ ruay345678 — พิมพ์ในช่องชื่อผู้ใช้ตอนเข้าสู่ระบบ" — the name in bold, one sentence above the password row */
.au-cred-line { margin: 0 0 8px; padding: 8px 12px; border: 1px solid #f5bd70; border-radius: 10px; background: #fff8e8; font-size: 18px; line-height: 1.45; color: #333; }
.au-cred-line b { font-family: SukhumvitBold, sans-serif; font-size: 24px; color: #111; letter-spacing: .03em; word-break: break-all; }
.au-credrow b { font-family: SukhumvitBold, sans-serif; font-size: 24px; color: #111; letter-spacing: .03em; word-break: break-all; }
.au-credrow .au-cv { display: inline-flex; align-items: center; gap: 8px; }
.au-credrow .au-k small { display: block; font-size: 17px; color: #6c757d; }
/* ===== desktop / tablet ===== */
@media (min-width: 640px) {
  .au-next { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .au-stock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-res.au-span2 { grid-column: span 2; }
  .au-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-reg-wrap { max-width: 560px; margin: 0 auto; }
}
@media (min-width: 1024px) {
  .au-guestbar { display: none; }
  .au-hero { padding: 26px 0 4px; }
  .au-hero-grid { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 32px; row-gap: 18px; grid-template-areas: "left login" "banner trust" "games games"; align-items: start; }
  .au-h-title { font-size: 40px; line-height: 1.2; }
  .au-h-lead { font-size: 20px; margin: 8px 0 16px; }
  .au-doors { gap: 12px; margin-bottom: 16px; }
  .au-door img { height: 86px; }
  .au-door b { font-size: 21px; }
  .au-cta { grid-template-columns: 1.3fr 1fr; grid-template-areas: "p s" "c c"; max-width: 600px; align-items: center; gap: 10px 12px; }
  .au-cta .au-btn-signup { grid-area: p; min-height: 64px; font-size: 24px; }
  .au-cta .au-btn-outline { grid-area: s; min-height: 56px; }
  .au-cta .au-chk-line { grid-area: c; justify-content: flex-start; text-align: left; }
  .au-card-dark { padding: 16px 16px 8px; }
  .au-h-banner, .au-h-trust { align-self: stretch; }
  .au-slot { aspect-ratio: auto; height: 100%; min-height: 200px; }
  .au-trust { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 6px; padding: 8px; height: 100%; }
  .au-trust div { flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; padding: 0 12px; border-radius: 8px; background: #2a2a2a; }
  .au-trust .fa, .au-trust .fas, .au-trust .far { margin: 0; }
  .au-trust .au-tt { display: block; min-width: 0; }
  .au-trust b { font-size: 20px; }
  .au-provs { grid-template-columns: 1.18fr 1fr 1fr 1fr; }
  .au-prov, .au-prov.au-big { grid-column: auto; }
  .au-prov.au-o2 { order: 2; } .au-prov.au-o3 { order: 3; } .au-prov.au-o4 { order: 4; } .au-prov.au-o5 { order: 5; } .au-prov.au-o6 { order: 6; } .au-prov.au-o7 { order: 7; } .au-prov.au-o8 { order: 8; }
  .au-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .au-res.au-span2 { grid-column: span 2; }
  .au-jackrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 12px; }
  .au-boxjackpot { justify-content: flex-start; padding: 6px 18px; }
  .au-jack-links { grid-template-columns: auto auto; }
  .au-btn-ghost { padding: 0 22px; }
  .au-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .au-steps .au-btn-signup { max-width: 420px; margin: 14px auto 0; }
  .au-contact { padding: 16px; }
  .au-login-wrap { max-width: 520px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .au * { transition: none !important; animation: none !important; } }