@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;600;700;800&display=swap');
@font-face { font-family: 'LINE Seed Sans TH'; src: url('/fonts/LINESeedSansTH_W_Rg.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'LINE Seed Sans TH'; src: url('/fonts/LINESeedSansTH_W_Bd.woff2') format('woff2'); font-display: swap; font-weight: 700 900; }
:root { font-family: 'LINE Seed Sans TH', system-ui, sans-serif; color: #f8f5ff; background: #100b1f; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse 900px 700px at 85% 0%, #31205b 0%, #100b1f 75%) fixed; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .48; cursor: not-allowed; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #83dfeb; outline-offset: 3px; }
[hidden] { display: none !important; }
.site-header { border-bottom: 1px solid #ffffff1f; background: #170f2ab8; }
.site-header-inner { max-width: 1120px; margin: auto; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; color: white; text-decoration: none; }
.brand img { width: 74px; height: 58px; object-fit: contain; }
.brand span { display: grid; gap: 2px; }
.brand small, .eyebrow { color: #9cecf7; font-size: 12px; letter-spacing: .08em; font-weight: 800; }
.brand strong { font-size: 18px; line-height: 1.2; }
.back-link { color: #bceef5; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.back-link:hover { text-decoration: underline; }
.page-main { max-width: 1120px; margin: auto; padding: 30px 20px 0; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 0 0 24px; }
.page-heading h1 { margin: 6px 0 8px; font-size: clamp(26px, 4vw, 38px); line-height: 1.2; }
.page-heading p { margin: 0; color: #c7badc; line-height: 1.5; }
.size-badge { flex: none; display: grid; text-align: center; border: 1px solid #7254a1; border-radius: 16px; padding: 9px 20px; background: #2b1c47; }
.size-badge strong { font-size: 23px; line-height: 1.1; }
.size-badge span { color: #c7badc; font-size: 12px; }
.panel { border: 1px solid #6947a0; border-radius: 20px; background: #211534; box-shadow: 0 20px 45px #07031366; padding: 22px; margin-bottom: 18px; }
.access-panel { max-width: 560px; margin: 36px auto; text-align: center; }
.access-panel h1 { font-size: 24px; margin: 8px 0; }
.access-panel p { color: #c7badc; margin-bottom: 22px; }
.panel-heading, .panel-heading > div { display: flex; align-items: center; gap: 12px; }
.panel-heading { justify-content: space-between; margin-bottom: 20px; }
.panel-heading h2 { font-size: 21px; margin: 0; }
.step { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #4d3680; color: #d7f8ff; font-weight: 800; }
.staff-name { color: #c7badc; font-size: 13px; }
.controls { display: flex; align-items: end; gap: 12px; }
.search-field { display: grid; gap: 7px; flex: 1; min-width: 0; color: #e9ddfa; font-size: 14px; font-weight: 700; }
.search-field input { width: 100%; height: 50px; border: 1px solid #8063aa; border-radius: 12px; background: #110b21; color: white; padding: 0 15px; }
.search-field input::placeholder { color: #a99cbb; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 12px; padding: 9px 17px; border: 1px solid transparent; color: white; text-decoration: none; font-weight: 800; white-space: nowrap; }
.button-primary { background: linear-gradient(110deg,#5d4df3,#b146d3); }
.button-secondary { background: #3e2670; border-color: #8562c4; }
.selection-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 18px 0 12px; }
.selection-actions p { margin: 0; color: #c7badc; font-size: 14px; }
.selection-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
.text-button { border: 0; background: transparent; color: #9cecf7; font-weight: 700; padding: 5px; }
.text-button:hover { text-decoration: underline; }
.person-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 700; }
.person-legend span { border-radius: 999px; padding: 5px 10px; }
.legend-participant { color: #22d3ee; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.36); }
.legend-coach { color: #fdba74; background: rgba(251,146,60,.12); border: 1px solid rgba(251,146,60,.4); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 8px; max-height: 264px; overflow: auto; padding: 2px; }
.people label { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid #63488e; border-radius: 11px; background: #2c1c46; padding: 10px 12px; font-size: 13px; cursor: pointer; }
.people label.person-participant { border-color: rgba(139,92,246,.34); background: radial-gradient(circle at top right, rgba(34,211,238,.1), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(15,5,30,.72); }
.people label.person-coach { border-color: rgba(251,146,60,.32); background: radial-gradient(circle at top right, rgba(251,146,60,.11), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(15,5,30,.72); }
.people label.person-participant:has(input:checked) { border-color: rgba(34,211,238,.65); background: radial-gradient(circle at top right, rgba(34,211,238,.18), transparent 45%), rgba(26,18,47,.95); }
.people label.person-coach:has(input:checked) { border-color: rgba(251,146,60,.65); background: radial-gradient(circle at top right, rgba(251,146,60,.18), transparent 45%), rgba(26,18,47,.95); }
.people input { width: 17px; height: 17px; accent-color: #6eddeb; flex: none; }
.people .person-participant input { accent-color: #22d3ee; }
.people .person-coach input { accent-color: #fdba74; }
.people label span { overflow-wrap: anywhere; }
.people small { display: block; color: #c7badc; margin-top: 2px; }
.people .person-participant small { color: #22d3ee; }
.people .person-coach small { color: #fdba74; }
.preview-heading { margin-bottom: 8px; }
.print-note { color: #c7badc; line-height: 1.55; margin: 0; font-size: 14px; }
.preview-empty { margin-top: 17px; border: 1px dashed #8063aa; border-radius: 13px; padding: 24px; text-align: center; color: #b9abd0; background: #170e29; }
.sheets { display: flex; flex-wrap: wrap; align-items: start; justify-content: center; gap: 18px; max-width: 1120px; margin: 0 auto; padding: 4px 20px 42px; }
.sheets .sticker { box-shadow: 0 18px 48px #05020a99; border-radius: 5px; }
@media (max-width: 700px) { .page-heading { align-items: start; } .size-badge { display: none; } .controls, .selection-actions, .preview-heading { flex-direction: column; align-items: stretch; } .selection-actions > div { justify-content: flex-start; } .panel-heading h2 { font-size: 18px; } .site-header-inner { align-items: start; } .back-link { font-size: 12px; } }
@media (max-width: 480px) { .brand img { width: 54px; height: 46px; } .brand strong { font-size: 14px; } .brand small { font-size: 10px; } .site-header-inner { flex-wrap: wrap; } .page-main { padding: 20px 12px 0; } .panel { padding: 16px; } }
.sticker { width: 60mm; height: 80mm; padding: 2.5mm 2.5mm 1.5mm; background: white; color: black; font-family: Prompt, sans-serif; overflow: hidden; flex: none; page-break-after: always; break-after: page; }
.identity { height: 19mm; display: grid; grid-template-columns: 18.5mm minmax(0, 1fr); gap: 2mm; }
.identity > div:last-child { min-width: 0; height: 19mm; display: grid; grid-template-rows: 6.2mm minmax(5.3mm, auto) minmax(0, 1fr); }
.sticker-participant .identity > div:last-child { grid-template-rows: 7.4mm minmax(5.3mm, auto) minmax(0, 1fr); }
.qr { width: 18.5mm; height: 18.5mm; padding: .7mm; border: .25mm solid #111; border-radius: 1.1mm; overflow: hidden; background: white; }
.qr canvas, .qr img { width: 100% !important; height: 100% !important; image-rendering: pixelated; }
.name { font-family: Impact, 'Arial Narrow', Prompt, sans-serif; font-size: 12pt; line-height: 1.03; max-height: 6.2mm; margin-top: .8mm; overflow: hidden; white-space: nowrap; }
.name.thai { font-family: Prompt, sans-serif; font-weight: 800; font-size: 9.5pt; }
.sticker-participant .name { font-size: 9pt; line-height: 1.05; max-height: 7.4mm; margin-top: .3mm; white-space: normal; overflow-wrap: anywhere; }
.sticker-participant .name.thai { font-size: 8.5pt; }
.school { font-size: 7pt; font-weight: 700; line-height: 1.1; max-height: 6.2mm; margin-top: .5mm; overflow: hidden; }
.identity-bottom { position: relative; display: flex; justify-content: space-between; gap: 1mm; align-items: end; padding-top: 2mm; padding-bottom: .5mm; font-weight: 800; font-size: 9pt; line-height: 1; }
.identity-bottom::before { content: ''; position: absolute; top: .7mm; left: 0; right: 0; height: .35mm; background: #111; }
.identity-bottom strong { font-size: inherit; white-space: nowrap; }
.sticker-coach .identity-bottom { justify-content: flex-start; }
.sticker-participant .identity-bottom { font-size: 7pt; gap: .5mm; padding-top: 1.4mm; }
.events { position: relative; margin-top: 1mm; }
.events::before { content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: 16.2mm; width: .3mm; background: #111; }
.event-row { position: relative; z-index: 1; display: grid; grid-template-columns: 15mm minmax(0, 1fr); column-gap: 2.5mm; height: 5.3mm; margin-bottom: .2mm; }
.event-label { height: 5mm; background: #111; color: white; display: flex; align-items: center; padding-left: .8mm; border-radius: .5mm; font-size: 6pt; font-weight: 800; white-space: nowrap; overflow: hidden; }
.event-cells { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5mm; align-items: start; }
.event-cell { min-width: 0; height: 5mm; border: .24mm solid #111; border-radius: .5mm; display: flex; align-items: center; justify-content: center; padding: 0 .15mm; overflow: hidden; white-space: nowrap; font-size: 6pt; letter-spacing: 0; font-weight: 700; }
.event-cell span { display: inline-block; white-space: nowrap; }
.event-cell-compact { font-size: 5.5pt; letter-spacing: -.1mm; }
.event-cell.active { background: #111; color: white; }
.missing { padding: 5mm; border: 1px dashed red; }
@page { size: 60mm 80mm; margin: 0; }
@media print {
  :root, body { background: white; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .site-header, .page-main { display: none; }
  .sheets { display: block; max-width: none; margin: 0; padding: 0; }
  .sheets .sticker { margin: 0; box-shadow: none; border-radius: 0; }
  .sticker:last-child { page-break-after: auto; break-after: auto; }
}