:root{--red-bright:#f03540;--cream:#fff1d9;--yellow:#ffc247}
.brand{font-size:27px}
.hero{margin-bottom:12px;background:radial-gradient(circle at 78% 27%,#8e202d 0,#3e1219 18%,transparent 42%),linear-gradient(135deg,#261011,#0d0d0d 64%);border-color:#63262b;box-shadow:8px 8px 0 #381217}
.hero:before{content:'THAICON';position:absolute;right:-40px;bottom:77px;color:#fff1d908;font:700 83px var(--font-display);letter-spacing:5px;transform:rotate(-14deg);white-space:nowrap}
.hero h1{font-size:46px;line-height:.92;text-shadow:3px 3px 0 #5e1820}
/* ลำดับชั้นของ hero:  0 = ลายกราฟิก, 2 = ข้อความ, 3 = สติกเกอร์
   เดิม .hero-art กับ .hero h1 เป็น z-index:1 เท่ากัน วงกลมจึงทับหัวข้อ */
.hero-art{z-index:0;right:35px;top:64px;font-size:32px}
.hero-art .sun{width:157px;height:157px;background:repeating-linear-gradient(0deg,#bd2633 0 7px,#e14443 8px 12px);opacity:.85}
.hero-copy{position:relative;z-index:2;flex:1;min-width:0}
.hero-sticker{position:absolute;right:22px;bottom:22px;background:var(--yellow);color:#140f09;font:700 12px var(--font-display);line-height:.88;letter-spacing:1px;padding:12px 9px;transform:rotate(-10deg);z-index:3;box-shadow:4px 4px 0 #111}
/* จอมือถือไม่มีที่ว่างพอให้วงกลม 157px หลบหัวข้อ จึงลดความทึบให้เป็นพื้นหลัง
   (ข้อความ cream/yellow บนลายนี้ต้องผ่าน 4.5:1 ตามเกณฑ์ contrast) */
@media(max-width:699px){.hero-art{top:92px;right:10px;opacity:.35}}
.marquee{width:calc(100% + 40px);margin:0 -20px 41px;overflow:hidden;background:var(--yellow);color:#17100a;transform:rotate(-2deg);box-shadow:0 4px 0 #5c181f}
.marquee div{width:max-content;padding:8px 0;font:600 12px var(--font-display);letter-spacing:1px;animation:scrollText 18s linear infinite}
@keyframes scrollText{to{transform:translateX(-50%)}}
.section-heading h2{font-size:30px;line-height:1.05}
.lineup-strip{padding:4px 3px 12px}
/* .lineup-strip ล้นออกไปสุดขอบจอจริงเฉพาะจอมือถือ (ดู .lineup-strip-wrap ใน styles.css) padding-right ต้องเผื่อ
   ระยะหายใจของการ์ดใบสุดท้ายให้พอเท่ากับที่ล้นออกไป (20px) เฉพาะตรงนี้ที่จอเล็ก จอใหญ่ไม่มีการล้นเลยใช้ 3px เดิมพอ
   ต้องอยู่ "หลัง" กฎ padding shorthand ด้านบนเสมอ ไม่งั้น specificity เท่ากัน กฎที่มาทีหลังในไฟล์จะชนะแทน ต่อให้
   เข้าเงื่อนไข media query จริงก็ตาม (เจอบั๊กนี้มาแล้วรอบหนึ่งตอนวางไว้ก่อนบรรทัดนี้) */
@media(max-width:699px){.lineup-strip{padding-right:20px}}
.artist-card{border:1px solid #ffffff22;box-shadow:5px 5px 0 #241014;transform:skew(-2deg)}
/* การ์ดศิลปินเป็นลิงก์ไปหน้า Line-up ต้องล้างสไตล์ลิงก์และมี feedback ตอนกด */
.artist-card{text-decoration:none;color:inherit;cursor:pointer;transition:transform .18s,box-shadow .18s}
.artist-card:hover{transform:skew(-2deg) translateY(-4px);box-shadow:7px 9px 0 #241014}
.artist-card:active{transform:skew(-2deg) scale(.97);box-shadow:3px 3px 0 #241014}
.artist-card:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.artist-card{transition:none}.artist-card:hover{transform:skew(-2deg)}}
/* แถวศิลปินที่ถูกเลือกมาจากการ์ดหน้าแรก */
.full-lineup .highlight{background:linear-gradient(90deg,#3d1b21,transparent);box-shadow:inset 3px 0 var(--yellow);padding-left:14px}
.full-lineup .highlight b{color:var(--yellow)}
.artist-red .artist-photo{background:linear-gradient(155deg,#d83340,#54111d)}
.artist-yellow .artist-photo{background:linear-gradient(155deg,#edab2e,#654417)}
.artist-blue .artist-photo{background:linear-gradient(155deg,#43868a,#182f37)}
/* .quick-card ตอนนี้กำหนดสีพื้นหลัง/hover/active ครบใน styles.css แล้ว (การ์ดแต่ละใบมี gradient ของตัวเอง) ไม่ต้องมีสีกลางๆ ตรงนี้ซ้ำอีก */
.primary-button{border-radius:2px;box-shadow:4px 4px 0 #5e1520;transition:transform .18s,box-shadow .18s}
.primary-button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #5e1520}
.ticket-option.selected{box-shadow:inset 4px 0 var(--red-bright),4px 4px 0 #331319}
.login-screen{text-align:center;padding:45px 8px}
/* โลโก้จริงพื้นหลังดำ (logothaicon.jpg) ครอปเฉพาะกราฟิกตัวโน้ต/ปลา ไม่เอาคำว่า "THAICON" ด้านล่างเข้ามาด้วย
   เพราะวงกลมเล็กแค่ 76px ใส่ทั้งภาพจะเล็กจนอ่านไม่ออกทั้งคู่ — ข้อความ "WELCOME TO THAICON" ข้างล่างมีชื่อแบรนด์อยู่แล้ว
   พื้นหลังวงกลมเปลี่ยนจากแดงเป็นดำให้กลืนกับพื้นหลังของรูปเอง (รูปพื้นดำ) ไม่มีขอบเหลี่ยมโผล่ในวงกลม */
.login-orb{width:76px;height:76px;border-radius:50%;margin:0 auto 25px;background:#000 url('logothaicon.jpg') no-repeat 50% 28%/180% 180%;color:var(--cream);box-shadow:8px 8px 0 #4b151d;transform:rotate(-8deg)}
/* หน้าบังคับเพิ่มเพื่อน LINE OA ยืมโครง .login-screen ทั้งหมด แค่เปลี่ยนสี orb เป็นเขียว LINE แทนแดงของ THAICON ให้รู้ทันทีว่าเรื่อง LINE */
.login-orb-line{background:#06c755;box-shadow:8px 8px 0 #064d28;display:flex;align-items:center;justify-content:center}.login-screen h2{font-size:34px;line-height:1.05;margin-bottom:14px}.login-screen h2 em{font-style:normal;color:var(--yellow)}.login-screen>p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.8;max-width:300px;margin:0 auto 25px}.line-login{width:100%;max-width:360px;border:0;background:#06c755;color:#fff;padding:15px 18px;border-radius:3px;font:600 14px var(--font-body);display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:4px 4px 0 #064d28}.line-login span{background:#fff;color:#06a548;border-radius:3px;padding:2px 5px;font:700 11px var(--font-body)}.line-login b{font-size:20px}.login-screen small{display:block;color:#716b66;font-size:10px;line-height:1.6;margin:20px auto 0;max-width:270px}.login-badge{font-size:10px;color:#52d78b}.profile-note{background:#16251d;border:1px solid #276140;color:#a8d6b8;font-size:11px;line-height:1.6;padding:11px 13px;margin-bottom:15px}
.checkout-card{display:grid;gap:15px;background:#141414;border:1px solid #302e2e;padding:18px;margin-bottom:15px}.checkout-card label{font-size:12px;color:#c7bbb0}.checkout-card label small{color:#777}.checkout-card input{display:block;width:100%;margin-top:7px;background:#0b0b0b;color:var(--cream);border:1px solid #3a3030;padding:13px;border-radius:2px;font:13px var(--font-body);outline:none}.checkout-card input:focus{border-color:var(--red-bright)}.checkout-review{border-left:3px solid var(--yellow);padding:3px 15px;margin:22px 0}.checkout-review div{display:flex;justify-content:space-between;padding:8px 0;font-size:12px}.checkout-review span{color:var(--muted)}.checkout-review strong{color:var(--yellow);font:600 22px var(--font-display)}.payment-method{background:#211718;border:1px solid #5c292b;padding:15px;margin-bottom:18px}.payment-method span,.payment-method b,.payment-method small{display:block}.payment-method span{font-size:11px;color:var(--muted)}.payment-method b{font:500 16px var(--font-display);margin:4px 0}.payment-method small{font-size:10px;color:#c4aaa0}.success-state{text-align:center;padding:34px 0}.success-mark{width:64px;height:64px;border-radius:50%;margin:5px auto 20px;background:#2c8d61;color:white;font:600 39px var(--font-display);line-height:64px}.success-state h2{font-size:30px;margin-bottom:10px}.success-state>p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.8}.ticket-preview{position:relative;text-align:left;background:linear-gradient(135deg,#7f1825,#201014);border:1px solid #a13b42;margin:25px 0;padding:20px;min-height:170px;box-shadow:6px 6px 0 #3a1218}.ticket-preview span,.ticket-preview small,.ticket-preview strong{display:block}.ticket-preview span{font-size:10px;letter-spacing:1px}.ticket-preview b{display:block;font:600 35px var(--font-display);color:var(--yellow);margin:18px 0 4px}.ticket-preview small{font-size:10px;color:#e2c5b4}.ticket-preview strong{font:500 12px var(--font-display);margin-top:24px}.fake-qr{position:absolute;right:20px;top:46px;width:61px;height:61px;background:#fff;color:#111;font-size:57px;line-height:57px;text-align:center}

/* ---------- หน้าเข้าสู่ระบบ = หน้าแรกของคนที่ยังไม่ได้ล็อกอิน ---------- */
/* ซ่อน bottom nav เฉพาะหน้านี้ ให้อ่านเป็นหน้าเปิดของแอป ไม่ใช่แท็บหนึ่ง
   ทางออกสำหรับคนที่ยังไม่อยากล็อกอินคือปุ่ม "ดูข้อมูลงานก่อน" ที่เห็นชัดแทน */
body.at-login .bottom-nav{display:none}
/* .line-login มี max-width:360px แต่ไม่มี auto margin จึงชิดซ้ายทุกจอที่กว้างกว่า ~376px
   (พี่น้องในหน้าเดียวกันอย่าง p และ small จัดกลางด้วย margin auto อยู่แล้ว) */
.line-login{margin-inline:auto}
.login-divider{display:flex;align-items:center;gap:12px;max-width:360px;margin:20px auto 14px;color:#8a807a;font-size:11px;letter-spacing:1px}
.login-divider:before,.login-divider:after{content:'';flex:1;height:1px;background:#332b2b}
/* ปุ่มรอง: เงียบกว่าปุ่ม LINE ชัดเจน เพื่อให้มีของดังชิ้นเดียวในหน้า */
.ghost-button{display:block;width:100%;max-width:360px;min-height:48px;margin-inline:auto;background:transparent;color:var(--cream);border:1px solid #463a38;border-radius:3px;padding:13px 18px;font:600 13px var(--font-body);cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.ghost-button b{color:var(--yellow);font-weight:700}
.ghost-button:hover{border-color:var(--red-bright);background:#1b1414}
.ghost-button:active{transform:translateY(1px)}
.ghost-button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ghost-button{transition:none}.ghost-button:active{transform:none}}
/* ต้องเจาะจงกว่า .purchase-history>div ที่บังคับทุก div ลูกเป็นแถว label/value */
.purchase-history>.account-actions{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid #292525;padding:14px 0 0}
/* ตอนล็อกอินอยู่มี 2 ปุ่ม ให้ตกบรรทัดเองเมื่อจอแคบ ดีกว่าบีบจนป้ายขึ้นสองบรรทัดในปุ่มเดียว */
.purchase-history>.account-actions .ghost-button{flex:1 1 130px;max-width:none;margin:0;min-height:44px;font-size:12px;padding:11px 12px}
.ghost-button.danger{border-color:#6b2f2f;color:#f2b3b3}
.ghost-button.danger:hover{border-color:var(--red-bright);background:#241414;color:var(--cream)}

/* แอตทริบิวต์ hidden เป็นแค่ display:none จาก UA stylesheet ประกาศ display เองที่ไหนก็ทับได้ทันที
   .checkout-card กับ .profile-form เป็น display:grid จึงยังโผล่อยู่ทั้งที่ตั้ง hidden ไปแล้ว
   ประกาศซ้ำให้ชนะทุกกรณี ไม่งั้นต้องไล่เขียน [hidden] กำกับทุกคลาสที่มี display */
[hidden]{display:none!important}

/* ---------- ข้อมูลผู้ซื้อที่เคยกรอกไว้ ---------- */
/* ซื้อรอบถัดไปเห็นการ์ดสรุปแทนฟอร์มเปล่า กรอกใหม่เฉพาะตอนที่ตั้งใจจะแก้จริง ๆ */
.saved-buyer{background:#141414;border:1px solid #302e2e;border-left:3px solid var(--yellow);padding:16px 18px;margin-bottom:15px}
.saved-buyer .eyebrow{margin-bottom:8px}
.saved-buyer b{display:block;font:500 19px var(--font-display);color:var(--cream);line-height:1.25}
.saved-buyer small{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.saved-buyer .ghost-button{max-width:none;margin:14px 0 0;min-height:44px;font-size:12px}

/* ---------- ฟอร์มแก้ไขข้อมูลในการ์ดบัญชี ---------- */
/* ต้องล้าง justify-content:space-between ที่ติดมาจาก .purchase-history>div ด้วย
   ไม่ใช่แค่ทับ display — กับ grid มันทำให้ track แบบ auto ไม่ยืดเต็มคอลัมน์ ช่องกรอกเลยแคบกว่าการ์ด */
.purchase-history>.profile-form{display:grid;justify-content:normal;gap:13px;border-top:1px solid #292525;padding:15px 0 0}
.profile-form label{display:block;font-size:12px;color:#c7bbb0}
.profile-form label small{color:#777}
.profile-form input{display:block;width:100%;box-sizing:border-box;margin-top:7px;min-height:44px;background:#0b0b0b;color:var(--cream);border:1px solid #3a3030;padding:12px;border-radius:2px;font:13px var(--font-body);outline:none}
.profile-form input:focus{border-color:var(--red-bright)}
.profile-form-actions{display:flex;gap:10px}
.profile-form-actions .ghost-button{flex:1;max-width:none;margin:0;min-height:44px;font-size:12px}
.profile-form-actions .primary-button{flex:1;min-height:44px;font-size:13px}

/* ---------- ช่องเลือกวันเกิด (เหมือนที่ทำไว้ในหน้าจัดการ Event ฝั่งแอดมิน) ---------- */
/* ไอคอนปฏิทินเดิมของเบราว์เซอร์อยู่มุมขวาเล็กมาก แทบมองไม่เห็นบนพื้นเกือบดำ (#0b0b0b)
   ซ่อนแล้ววาดไอคอนของเราเองแทน พร้อมให้กดที่ไหนในกล่องก็เปิดปฏิทินได้ (ผูกจริงใน app.js ด้วย showPicker()) */
.date-field{position:relative}
.date-field input[type="date"]{padding-right:40px;cursor:pointer;color-scheme:dark}
.date-field input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
.date-field-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--yellow);pointer-events:none;transition:color .15s}
.date-field:hover .date-field-icon,.date-field:focus-within .date-field-icon{color:var(--red-bright)}

/* Event ใหม่ที่ยังไม่กรอก lineup — ข้อความบอกสถานะแทนที่จะปล่อยว่างเปล่าเฉย ๆ ดูเหมือนพัง */
.full-lineup .empty-note{color:var(--muted);font-size:12px;justify-content:center}