@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Serif+Thai:wght@500;600;700&display=swap');

:root {
  --night: #0a151d;
  --night-deep: #071017;
  --ink: #192a31;
  --ivory: #f2eee6;
  --paper: #fffdf8;
  --sand: #e7e0d4;
  --gold: #d5b57c;
  --gold-deep: #957349;
  --wine: #883638;
  --muted: #52656c;
  --line: #d8d0c3;
  --serif: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
  --thai-serif: 'Noto Serif Thai', Georgia, serif;
  --sans: 'Noto Sans Thai', Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 15px/1.7 var(--sans); overflow-x: hidden; scrollbar-color: var(--gold-deep) var(--ivory); }
button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .56; cursor: not-allowed; }
button span[aria-hidden="true"] { display: none; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--night); background: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.role-bar { position: relative; z-index: 35; background: #081116; color: #e7e0d4; border-bottom: 1px solid #d5b57c33; padding: 8px clamp(16px,4vw,60px); font-size: 11px; }
.role-bar-inner { max-width: 1530px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.role-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.role-badge { display: inline-flex; align-items: center; padding: 3px 10px; background: #d5b57c22; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold); font-weight: 700; font-size: 11px; letter-spacing: .02em; }
.role-desc { color: #a4b3b5; font-size: 11px; }
.role-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.role-label { color: #8fa0a3; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.role-pills { display: flex; align-items: center; gap: 4px; background: #ffffff0d; padding: 3px; border-radius: 6px; border: 1px solid #ffffff14; flex-wrap: wrap; }
.role-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 0; border-radius: 4px; background: transparent; color: #b7c3c2; font-size: 11px; font-weight: 600; transition: all .2s ease; }
.role-pill:hover { color: #fff; background: #ffffff1a; }
.role-pill.active { color: var(--night); background: var(--gold); font-weight: 700; box-shadow: 0 1px 4px #0005; }
.reset-data-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border: 1px dashed #d5b57c80; border-radius: 4px; background: transparent; color: var(--gold); font-size: 11px; font-weight: 600; transition: all .2s ease; cursor: pointer; }
.reset-data-btn:hover { background: #d5b57c26; border-color: var(--gold); color: #fff; }
.nav-role-tag { display: inline-block; padding: 2px 5px; margin-left: 4px; border-radius: 3px; font-size: 9px; font-weight: 700; background: #88363844; color: #f5b0b2; border: 1px solid #88363866; }
body.role-runner .nav-role-tag { background: #52656c33; color: #a5b5b8; border-color: #52656c55; }
.site-header { height: 80px; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 0 clamp(22px,5vw,80px); color: #f6f1e9; background: var(--night); border-bottom: 1px solid #ffffff1a; }
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand-logo { display: block; width: 35px; height: 50px; object-fit: contain; flex: none; }
.brand-type { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: .92; white-space: nowrap; }
.brand-type strong { font-weight: 600; color: var(--gold); }
.brand-type small { display: block; margin-top: 7px; font: 500 9px/1 var(--sans); letter-spacing: .18em; color: #bcb6a8; }
.main-nav { display: flex; align-items: center; gap: clamp(15px,2.5vw,37px); height: 100%; }
.main-nav button { height: 100%; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #b9c1c1; font-size: 12px; font-weight: 600; white-space: nowrap; }
.main-nav button:hover, .main-nav .nav-active { color: #fffdf8; border-bottom-color: var(--gold); }
.header-cta { min-height: 42px; padding: 8px 18px; flex: none; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-size: 12px; font-weight: 700; }
.header-cta:hover { background: var(--gold); color: var(--night); }
.page, .page.active { display: block; min-height: 0; scroll-margin-top: 80px; }

.hero { position: relative; min-height: min(770px, calc(100svh - 80px)); overflow: hidden; color: var(--paper); background: var(--night-deep); }
.hero-photo { position: absolute; inset: 0; background-image: linear-gradient(90deg, #071017ed 0%, #071017b8 31%, #0710174d 68%, #07101733 100%), linear-gradient(0deg, #071017df 0%, transparent 38%, #07101737 100%), url('campus-night.jpg'); background-size: cover; background-position: center 45%; transform: scale(1.025); animation: photo-settle 1.6s cubic-bezier(.16,1,.3,1) both; }
@keyframes photo-settle { from { transform: scale(1.075); filter: brightness(.78); } to { transform: scale(1.025); filter: brightness(1); } }
.hero-inner { position: relative; z-index: 1; max-width: 1530px; min-height: inherit; margin: auto; padding: 31px clamp(25px,6vw,94px) 31px; display: flex; flex-direction: column; }
.hero-meta { display: flex; justify-content: space-between; gap: 20px; color: #e9dfcacc; font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.hero-copy { margin: auto 0; padding: 55px 0 60px; max-width: 790px; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -.035em; line-height: .8; text-wrap: balance; }
.hero-mfu { display: block; margin-bottom: 14px; font: 700 clamp(22px,2.3vw,32px)/1 var(--sans); letter-spacing: .36em; color: var(--gold); }
.hero-night { display: block; font-size: clamp(84px,10vw,154px); }
.hero-year { display: block; margin: 17px 0 0 5px; font: 500 clamp(23px,3vw,37px)/1 var(--serif); letter-spacing: .22em; color: var(--gold); }
.hero-thai { margin: 26px 0 10px; font: 600 clamp(18px,2.2vw,28px)/1.45 var(--thai-serif); }
.hero-description { max-width: 530px; margin: 0; color: #e5e5df; font-size: 14px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 25px; border: 1px solid transparent; border-radius: 2px; font-size: 12px; font-weight: 700; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.button-primary, .button-red { color: var(--night); background: var(--gold); }
.button-primary:hover, .button-red:hover { background: #e7c990; }
.button-secondary, .button-outline { color: var(--paper); border-color: #f2eee680; background: transparent; }
.button-secondary:hover, .button-outline:hover { border-color: var(--paper); background: #ffffff1a; }
.button-cream { color: var(--night); background: var(--ivory); }
.button-cream:hover { background: #fff; }
.hero-footer { display: flex; justify-content: space-between; align-items: end; gap: 20px; border-top: 1px solid #ffffff65; padding-top: 21px; }
.hero-date { display: flex; align-items: center; gap: 15px; color: var(--gold); }
.hero-date strong { font: 600 63px/.75 var(--serif); }
.hero-date span { font: 600 15px/1.2 var(--serif); letter-spacing: .09em; }
.hero-date small { display: block; margin-top: 5px; color: #eeeae0; font: 500 10px/1.5 var(--sans); letter-spacing: 0; }
.hero-footer p { margin: 0; color: #e9e7df; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-align: right; }

.home-content { max-width: 1530px; margin: auto; padding: 100px clamp(25px,6vw,94px) 105px; }
.intro-row { display: grid; grid-template-columns: 1fr minmax(300px,.75fr); align-items: end; gap: clamp(35px,6vw,100px); }
.intro-row h2 { margin: 0; font: 600 clamp(58px,7vw,104px)/.9 var(--serif); letter-spacing: -.03em; }
.intro-row p { max-width: 51ch; margin: 0 0 8px; color: #41545b; font-size: 16px; line-height: 1.95; }
.race-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 70px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.race-list article { min-height: 275px; display: flex; flex-direction: column; align-items: start; padding: 28px clamp(20px,3vw,42px) 25px; border-right: 1px solid var(--line); }
.race-list article:first-child { padding-left: 0; }
.race-list article:last-child { border-right: 0; padding-right: 0; }
.race-no { color: var(--gold-deep); font: 600 12px/1 var(--sans); letter-spacing: .15em; }
.race-list h3 { margin: 21px 0 9px; font: 600 clamp(31px,3vw,45px)/1.1 var(--serif); letter-spacing: -.025em; }
.race-list p { max-width: 32ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.race-list strong { margin-top: auto; align-self: end; font: 600 clamp(62px,6vw,84px)/.85 var(--serif); color: var(--wine); }
.race-list small { font: 600 12px/1 var(--sans); letter-spacing: .1em; }
.flow-strip { display: grid; grid-template-columns: 270px 1fr; gap: 38px; align-items: center; margin-top: 80px; padding: 32px 0; border-top: 1px solid var(--line); }
.flow-strip h2 { margin: 0; font: 600 38px/1.1 var(--thai-serif); }
.flow-steps { display: flex; gap: 14px; justify-content: space-between; counter-reset: step; }
.flow-steps span { min-width: 0; flex: 1; padding-top: 8px; border-top: 1px solid var(--gold-deep); color: var(--ink); font-size: 11px; font-weight: 600; }
.flow-steps span::before { counter-increment: step; content: '0' counter(step); display: block; margin-bottom: 7px; color: var(--gold-deep); font: 600 12px/1 var(--sans); }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; max-width: 1530px; margin: auto; padding: 75px clamp(25px,6vw,94px) 0; }
.page-heading h1 { margin: 0; font: 600 clamp(50px,6vw,85px)/1.1 var(--thai-serif); letter-spacing: -.025em; }
.page-heading h1 span { color: var(--wine); }
.page-heading > p { max-width: 37ch; margin: 0 0 7px; color: var(--muted); text-align: right; font-size: 12px; line-height: 1.8; }
#page-register { background: #eae4d9; }
.register-layout { max-width: 1530px; display: grid; grid-template-columns: minmax(230px,.7fr) minmax(0,1.55fr); gap: clamp(35px,5vw,85px); margin: auto; padding: 64px clamp(25px,6vw,94px) 95px; }
.form-intro { align-self: start; position: sticky; top: 115px; }
.form-intro h2 { margin: 0 0 20px; font: 600 35px/1.25 var(--thai-serif); }
.form-intro > p { max-width: 37ch; margin: 0; color: #475d64; font-size: 14px; line-height: 1.9; }
.notice-dark { display: grid; gap: 8px; margin-top: 36px; padding: 20px 0; border-top: 1px solid #a99b87; }
.notice-dark strong { font-size: 12px; color: var(--wine); }
.notice-dark span { max-width: 36ch; color: var(--muted); font-size: 11px; line-height: 1.75; }
.register-form { padding: clamp(24px,4vw,50px); background: var(--paper); border: 1px solid #d8d0c2; box-shadow: 0 20px 50px #392e1c0b; }
.register-form fieldset { border: 0; border-bottom: 1px solid var(--line); margin: 0 0 35px; padding: 0 0 35px; }
.register-form fieldset:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 15px; }
.register-form legend { margin-bottom: 19px; color: var(--ink); font: 600 21px/1.35 var(--thai-serif); }
.choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.choice { position: relative; min-height: 102px; display: flex; flex-direction: column; justify-content: end; gap: 3px; padding: 14px 13px; border: 1px solid #cec8bc; background: #faf8f2; cursor: pointer; }
.choice:hover, .choice:has(input:checked) { border-color: var(--gold-deep); background: #f3eadc; }
.choice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--gold-deep); }
.choice input { position: absolute; top: 13px; right: 12px; accent-color: var(--wine); }
.choice-icon { display: none; }
.choice strong { font-size: 13px; }
.choice small { color: var(--muted); font: 500 10px/1.3 var(--sans); }
.field-hint { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 18px; }
.field-grid label, .register-form label { display: block; color: #30454b; font-size: 12px; font-weight: 600; }
.optional { color: #687a7d; font-weight: 400; }
.field-grid input, .field-grid select, .scan-row input, #bag-location, .search-label input { display: block; width: 100%; min-width: 0; height: 47px; margin-top: 7px; padding: 0 12px; border: 1px solid #bdbbb2; border-radius: 2px; outline: 0; color: var(--ink); background: #fff; font-size: 15px; }
.field-grid input:focus, .field-grid select:focus, .scan-row input:focus, #bag-location:focus, .search-label input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px #d5b57c45; }
.field-grid input::placeholder, .scan-row input::placeholder, .search-label input::placeholder { color: #6c797a; }
.form-footer { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding-top: 25px; border-top: 1px solid var(--line); }
.form-footer p { max-width: 37ch; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.error { color: #9e3035; font-size: 12px; font-weight: 700; }
.result-panel { max-width: 760px; margin: 0 auto 80px; padding: 33px; scroll-margin-top: 115px; color: var(--paper); background: var(--night); }
.result-panel h2 { margin: 0; font: 600 40px/1.2 var(--thai-serif); }
.result-panel p { font-size: 13px; line-height: 1.8; }
.result-code { color: var(--gold); font: 600 31px/1.2 var(--serif); letter-spacing: .05em; overflow-wrap: anywhere; }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.result-panel:focus { outline: 3px solid var(--gold); outline-offset: 3px; }

#page-dashboard { background: var(--ivory); }
.dashboard-content { max-width: 1530px; margin: auto; padding: 45px clamp(25px,6vw,94px) 105px; }
.metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.metrics > div { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px 22px; border-right: 1px solid var(--line); }
.metrics > div:first-child { padding-left: 0; }
.metrics > div:last-child { border: 0; }
.metrics span { color: var(--muted); font-size: 11px; font-weight: 600; }
.metrics strong { color: var(--ink); font: 600 51px/1 var(--serif); font-variant-numeric: tabular-nums; }
.metrics > div:nth-child(2) strong { color: var(--wine); }
.dashboard-bar { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin: 65px 0 18px; }
.dashboard-bar h2 { margin: 0 0 4px; font: 600 31px/1.2 var(--thai-serif); }
.dashboard-bar p { margin: 0; color: var(--muted); font-size: 11px; }
.search-label input { min-width: 260px; margin: 0; background: var(--paper); }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--ink); }
table { width: 100%; min-width: 840px; border-collapse: collapse; }
th { padding: 15px 12px; color: #445a60; background: #e9e2d6; text-align: left; font-size: 11px; font-weight: 700; }
td { padding: 16px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
td strong { display: block; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
td small { display: block; color: var(--muted); font-size: 10px; }
.pill { display: inline-block; padding: 5px 9px; color: #315641; background: #e0ebdf; font-size: 10px; font-weight: 700; white-space: nowrap; }
.pill.pending { color: #805b27; background: #f5e6c7; }
.table-button { min-height: 38px; margin: 2px; padding: 7px 10px; border: 1px solid #a7aaa3; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; white-space: nowrap; }
.table-button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.empty-row { padding: 40px; color: var(--muted); text-align: center; }
.dashboard-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; }
.dashboard-bottom p { color: var(--muted); font-size: 11px; }
.text-button { min-height: 40px; border: 0; padding: 8px 0; color: var(--wine); background: transparent; font-size: 12px; font-weight: 700; }
.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }

#page-operations { color: var(--paper); background: var(--night); }
#page-operations .page-heading { color: var(--paper); }
#page-operations .page-heading h1 span { color: var(--gold); }
#page-operations .page-heading > p { color: #c1c6c4; }
.ops-layout { max-width: 1530px; display: grid; grid-template-columns: 265px minmax(0,1fr); gap: 48px; margin: auto; padding: 57px clamp(25px,6vw,94px) 115px; }
.ops-menu h2 { margin: 0 0 16px; font: 600 20px/1.35 var(--thai-serif); }
.ops-mode { width: 100%; min-height: 75px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 0 8px; align-content: center; padding: 12px 9px; border: 0; border-top: 1px solid #ffffff36; color: #cad1d0; background: transparent; text-align: left; }
.ops-mode:last-child { border-bottom: 1px solid #ffffff36; }
.ops-mode span { grid-row: 1/3; color: var(--gold); font: 600 14px/1.5 var(--serif); }
.ops-mode strong { color: #f9f5eb; font-size: 12px; }
.ops-mode small { color: #a6b2b4; font-size: 10px; }
.ops-mode:hover, .ops-mode.selected { background: #ffffff11; }
.ops-mode.selected { box-shadow: inset 2px 0 var(--gold); }
.ops-workspace { min-height: 445px; padding: clamp(25px,4vw,45px); color: var(--ink); background: var(--paper); }
.workspace-top { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.workspace-count { color: var(--gold-deep); font: 600 13px/1 var(--serif); letter-spacing: .08em; }
.workspace-top h2 { margin: 12px 0 5px; font: 600 35px/1.25 var(--thai-serif); }
.workspace-top p { margin: 0; color: var(--muted); font-size: 12px; }
.scanner-symbol { width: 55px; height: 55px; position: relative; flex: none; border: 1px solid var(--gold-deep); }
.scanner-symbol::before, .scanner-symbol::after { content: ''; width: 15px; height: 15px; position: absolute; border: 1px solid var(--gold-deep); }
.scanner-symbol::before { top: 8px; left: 8px; }
.scanner-symbol::after { right: 8px; bottom: 8px; }
.scanner-symbol span { width: 30px; height: 1px; position: absolute; top: 26px; left: 12px; background: var(--wine); }
.ops-workspace form { margin-top: 25px; }
.ops-workspace label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.scan-row { display: flex; gap: 9px; }
.scan-row input { flex: 1; min-width: 0; height: 49px; margin: 0; font: 600 18px/1 var(--serif); letter-spacing: .04em; }
.scan-row button { white-space: nowrap; }
.scan-preview { min-height: 74px; margin: 20px 0; padding: 18px; border: 1px solid var(--line); color: var(--muted); background: #f7f4ed; font-size: 12px; line-height: 1.7; }
.scan-preview strong { color: var(--ink); }
.ops-workspace .button-red { color: var(--paper); background: var(--wine); }
.ops-workspace .button-red:hover { background: #6d282c; }
.ops-workspace .error { color: #9e3035; }
#location-field { margin-top: 17px; }
#bag-location { max-width: 150px; margin-top: 7px; }
#camera-panel { margin-top: 15px; }
#camera-view { width: min(100%,420px); height: 230px; display: block; background: #000; object-fit: cover; }
.action-result { margin-top: 25px; padding: 20px; border: 1px solid #a0b8a5; color: #244534; background: #ebf1e8; overflow-wrap: anywhere; }
.action-result strong { font-size: 17px; }
.action-result p { font-size: 12px; line-height: 1.8; }
.action-result .qr-image { margin-top: 12px; }
.qr-image { display: block; width: 160px; height: 160px; padding: 8px; background: #fff; }

dialog { width: min(92vw,390px); max-height: calc(100dvh - 80px); overflow: auto; padding: 34px; border: 1px solid var(--line); color: var(--ink); background: var(--paper); box-shadow: 0 30px 80px #0005; text-align: center; }
dialog::backdrop { background: #071017bf; }
dialog h2 { margin: 0 0 18px; font: 600 31px/1.3 var(--thai-serif); }
dialog .qr-image { width: 210px; height: 210px; margin: auto; }
dialog #qr-content > strong { display: block; margin-top: 13px; font: 600 27px/1.2 var(--serif); letter-spacing: .05em; }
dialog #qr-content p { font-size: 12px; }
dialog #qr-content small { color: var(--muted); }
.dialog-close { width: 44px; height: 44px; position: absolute; top: 3px; right: 3px; border: 0; color: var(--ink); background: transparent; font-size: 28px; }

footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px clamp(25px,6vw,94px); color: #c6d0ce; background: var(--night-deep); border-top: 1px solid #ffffff33; }
.footer-identity { display: flex; align-items: center; gap: 11px; }
.footer-logo { display: block; width: 31px; height: 44px; object-fit: contain; }
.footer-brand { color: var(--paper); font: 600 19px/.95 var(--serif); }
.footer-brand strong { color: var(--gold); font-weight: 600; }
.footer-brand span { color: var(--gold); margin-left: 4px; }
footer p { margin: 0; font-size: 10px; letter-spacing: .04em; }

/* Role Guard Banners */
.role-guard-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; margin-bottom: 25px; background: #f5eedf; border: 1px solid #d5b57c99; border-left: 4px solid var(--gold-deep); color: var(--ink); flex-wrap: wrap; }
#page-operations .role-guard-banner { background: #13212a; border-color: #d5b57c66; border-left-color: var(--gold); color: #f2eee6; }
.role-guard-icon { font-size: 22px; flex: none; }
.role-guard-content { flex: 1; min-width: 200px; }
.role-guard-content strong { display: block; font-size: 13px; margin-bottom: 2px; }
.role-guard-content p { margin: 0; font-size: 11px; opacity: .88; }
.guard-switch-group { display: flex; gap: 8px; flex-wrap: wrap; }
.guard-switch-btn { padding: 6px 12px; border: 1px solid var(--wine); background: var(--wine); color: #fff; border-radius: 2px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.guard-switch-btn:hover { background: #6a2527; border-color: #6a2527; }

/* Page Ticket Layout */
#page-ticket { background: var(--ivory); }
.ticket-layout { max-width: 1530px; margin: auto; padding: 50px clamp(25px,6vw,94px) 100px; display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.4fr); gap: clamp(30px,5vw,70px); }
.ticket-sidebar { display: flex; flex-direction: column; gap: 20px; }
.ticket-search-box { padding: 24px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 30px #392e1c08; }
.ticket-search-box h2 { margin: 0 0 6px; font: 600 24px/1.2 var(--thai-serif); }
.ticket-search-box p { margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.ticket-search-input-wrap input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #bdbbb2; font-size: 14px; border-radius: 2px; }
.ticket-quick-picks { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.quick-pick-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.quick-pick-buttons { display: flex; flex-direction: column; gap: 6px; }
.quick-pick-btn { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #cec8bc; background: #faf8f2; text-align: left; border-radius: 2px; transition: all .2s; cursor: pointer; }
.quick-pick-btn:hover { background: #f3eadc; border-color: var(--gold-deep); }
.quick-pick-btn.active { background: #f3eadc; border-color: var(--gold-deep); box-shadow: inset 2px 0 0 var(--gold-deep); }
.pick-status { font-size: 12px; }
.quick-pick-btn strong { font-size: 13px; color: var(--ink); }
.quick-pick-btn small { font-size: 10px; color: var(--muted); }
.ticket-role-tip { padding: 18px; background: #e9e2d6; border-left: 3px solid var(--gold-deep); font-size: 12px; }
.ticket-role-tip strong { display: block; font-size: 12px; margin-bottom: 4px; color: var(--wine); }
.ticket-role-tip p { margin: 0 0 12px; color: #445960; line-height: 1.7; }
.ticket-tip-actions .button { width: 100%; border-color: var(--gold-deep); color: var(--ink); }

/* Ticket Card Frame */
.ticket-frame { background: var(--night); color: var(--paper); border: 1px solid #ffffff22; box-shadow: 0 25px 60px #0a151d33; overflow: hidden; position: relative; }
.ticket-frame.confirmed { border-top: 5px solid var(--gold); }
.ticket-frame.pending { border-top: 5px solid #d58932; }
.ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 28px; background: #060e14; border-bottom: 1px solid #ffffff14; }
.ticket-brand { display: flex; align-items: center; gap: 10px; }
.ticket-brand strong { display: block; font: 600 16px/.95 var(--serif); color: var(--paper); letter-spacing: .02em; }
.ticket-brand span { display: block; font: 500 9px/1 var(--sans); color: var(--gold); letter-spacing: .12em; margin-top: 3px; }
.ticket-status-pill { padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.ticket-status-pill.confirmed { background: #234833; color: #8ee2b0; border: 1px solid #3c7a57; }
.ticket-status-pill.pending { background: #4a3416; color: #f2cb8b; border: 1px solid #825c27; }
.ticket-body { display: grid; grid-template-columns: 1fr 240px; gap: 30px; padding: 30px 28px; }
.ticket-code-label { font-size: 10px; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.ticket-bib { font: 700 36px/1 var(--serif); letter-spacing: .08em; color: #fff; margin: 6px 0 10px; }
.ticket-name { margin: 0 0 20px; font: 600 28px/1.2 var(--thai-serif); color: #f2eee6; }
.ticket-meta-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 20px; padding: 16px 0; border-top: 1px solid #ffffff1a; border-bottom: 1px solid #ffffff1a; }
.ticket-meta-grid small { display: block; font-size: 10px; color: #8fa0a3; }
.ticket-meta-grid strong { display: block; font-size: 13px; color: #f2eee6; margin-top: 2px; }
.tag-status.active { color: #8ee2b0; font-weight: 600; font-size: 11px; }
.tag-status.returned { color: #9eb5ba; font-size: 11px; }
.tag-status.empty { color: #76878a; font-size: 11px; }
.ticket-milestones { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 20px; }
.milestone-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px; background: #ffffff08; border: 1px solid #ffffff12; border-radius: 2px; }
.milestone-item.done { border-color: #2e6246; background: #16362644; }
.ms-dot { width: 8px; height: 8px; border-radius: 50%; background: #617377; margin-top: 4px; flex: none; }
.milestone-item.done .ms-dot { background: #5ed694; box-shadow: 0 0 6px #5ed694; }
.milestone-item b { display: block; font-size: 11px; color: #fff; }
.milestone-item small { display: block; font-size: 9px; color: #9bb0b4; margin-top: 2px; }
.ticket-qr-column { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: #060e14; border: 1px solid #ffffff14; text-align: center; }
.ticket-qr-wrap { display: flex; flex-direction: column; align-items: center; }
.ticket-qr-img { width: 170px; height: 170px; padding: 6px; background: #fff; display: block; }
.qr-note { margin-top: 10px; font-size: 10px; color: #95a6a9; max-width: 180px; }
.ticket-qr-pending { padding: 10px; }
.pending-icon { font-size: 32px; margin-bottom: 8px; }
.ticket-qr-pending strong { display: block; color: var(--gold); font-size: 13px; margin-bottom: 6px; }
.ticket-qr-pending p { font-size: 11px; color: #9fb0b2; margin: 0 0 14px; }
.ticket-qr-pending .button { width: 100%; font-size: 11px; }
.ticket-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 28px; background: #081219; border-top: 1px solid #ffffff14; flex-wrap: wrap; }
.ticket-safe-note { font-size: 11px; color: #7f9093; }
.time-done { color: #2e6246; font-weight: 700; font-size: 11px; }
.button-approve { color: var(--wine); border-color: var(--wine); }
.button-approve:hover { background: var(--wine); color: #fff; }

/* Financial Overview Grid */
.finance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.finance-card { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 4px 16px #392e1c0a; }
.finance-card.highlighted { border-top: 3px solid var(--wine); background: #fdfaf6; }
.fc-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.fc-value { display: block; font: 600 32px/1 var(--serif); color: var(--ink); margin-bottom: 6px; }
.finance-card.highlighted .fc-value { color: var(--wine); }
.fc-value small { font-size: 14px; color: var(--muted); }
.fc-sub { display: block; font-size: 11px; color: var(--muted); }

/* Quota bars */
.quota-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.quota-row { display: flex; flex-direction: column; gap: 3px; }
.quota-info { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.quota-info b { color: var(--ink); }
.quota-info small { color: var(--muted); font-size: 10px; }
.quota-bar-track { width: 100%; height: 6px; background: #e6dfd3; border-radius: 999px; overflow: hidden; }
.quota-bar-fill { height: 100%; background: var(--gold-deep); transition: width .3s ease; }
.quota-bar-fill.danger { background: var(--wine); }
.quota-bar-fill.complete { background: #3c7a57; }

/* Dashboard Bar Actions */
.dash-bar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#export-csv-btn { height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 12px; font-weight: 700; border-radius: 2px; border: 1px solid var(--gold-deep); color: var(--night); }

/* Blend Data UI */
.mfu-id-container { margin-top: 15px; padding: 14px; background: #f7f4ed; border: 1px solid var(--line); border-left: 3px solid var(--gold-deep); }
.mfu-id-container label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 12px; }
.blend-input-row { display: flex; gap: 8px; }
.blend-input-row input { flex: 1; height: 44px; margin: 0; }
.blend-input-row button { white-space: nowrap; }
.blend-result { margin-top: 10px; }
.blend-success { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: #eef6f0; border: 1px solid #9bc8a5; color: #1e452a; font-size: 11px; }
.blend-icon { font-weight: 700; font-size: 16px; color: #2e6e3e; }
.blend-success strong { display: block; font-size: 12px; margin-bottom: 2px; color: #1e452a; }
.blend-success p { margin: 0; color: #2e6e3e; }
.blend-error { padding: 8px 12px; background: #faeded; border: 1px solid #deb6b6; color: #8a2424; font-size: 11px; }

.race-fee-badge { margin-top: 12px; padding: 10px 14px; background: #fdfaf3; border: 1px dashed var(--gold-deep); color: var(--ink); font-size: 12px; }
.race-fee-badge strong { color: var(--wine); font-size: 14px; }

.mfu-id-badge { display: block; color: var(--gold-deep); font-weight: 600; font-size: 10px; }
.pill.cancelled { background: #eedcdc; color: #882b2b; }
.cancelled-tag { font-size: 11px; color: #9c4040; font-weight: 600; }
.button-cancel { color: #882b2b; border-color: #cb9d9d; }
.button-cancel:hover { background: #882b2b; color: #fff; }
.table-action-group { display: flex; gap: 4px; flex-wrap: wrap; }

/* Live Activity Log */
.activity-section { margin-top: 45px; padding: 24px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 4px 16px #392e1c08; }
.activity-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; }
.activity-header h3 { margin: 0; font: 600 20px/1.2 var(--thai-serif); color: var(--ink); }
.activity-live-badge { font-size: 11px; font-weight: 700; color: #2e7d32; }
.activity-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.activity-row { display: grid; grid-template-columns: 85px 120px 1fr; align-items: center; gap: 12px; padding: 8px 10px; background: #faf8f3; border: 1px solid #eae4d8; font-size: 11px; }
.act-time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.act-badge { display: inline-block; padding: 2px 7px; border-radius: 3px; font-weight: 700; font-size: 10px; text-align: center; white-space: nowrap; }
.act-badge.act-approve { background: #e0ebdf; color: #2e6246; }
.act-badge.act-pack { background: #ede2cf; color: #805b27; }
.act-badge.act-checkin { background: #dfebed; color: #25616b; }
.act-badge.act-drop { background: #e7e0eb; color: #58336d; }
.act-badge.act-return { background: #dfebe2; color: #276d3e; }
.act-badge.act-cancel { background: #f0dbdb; color: #882222; }
.act-badge.act-register { background: #f3ecd8; color: #7c5c1d; }
.act-detail { color: var(--ink); overflow-wrap: anywhere; }

/* Offline Protocol */
.offline-protocol-btn { width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px dashed #d5b57c; background: #ffffff0a; color: var(--gold); font-size: 11px; font-weight: 600; text-align: left; border-radius: 2px; cursor: pointer; }
.offline-protocol-btn:hover { background: #d5b57c1a; }
.offline-protocol-content { text-align: left; font-size: 13px; line-height: 1.8; color: var(--ink); }
.offline-steps { padding-left: 20px; margin: 16px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.offline-steps strong { display: block; font-size: 13px; color: var(--wine); }
.offline-steps span { font-size: 12px; color: #3b4d54; }

/* Medical Dialog */
.med-details-box { text-align: left; font-size: 13px; line-height: 1.8; color: var(--ink); }
.med-alert-box { margin: 16px 0; padding: 14px 16px; background: #fbf0f0; border: 1px solid #e2b4b4; border-left: 4px solid var(--wine); }
.med-alert-box strong { color: var(--wine); display: block; margin-bottom: 4px; font-size: 12px; }
.med-alert-box p { margin: 0; font-size: 13px; color: #501e20; }
.med-pdpa-notice { display: block; font-size: 10px; color: #7e8c90; margin-top: 12px; }

/* Virtual Run Panel in Ticket */
.ticket-virtual-panel { margin-top: 20px; padding: 16px; background: #08151f; border: 1px solid #d5b57c55; border-radius: 2px; }
.virtual-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.virtual-header strong { font-size: 12px; color: var(--gold); }
.virtual-km-text { font-size: 11px; color: #e7e0d4; }
.virtual-km-text b { color: #8ee2b0; font-size: 14px; }
.virtual-form { margin-top: 14px; }
.virtual-form label { display: block; font-size: 11px; color: #b0c0c2; margin-bottom: 5px; }
.virtual-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.virtual-form-row input[type="number"] { width: 110px; height: 42px; margin: 0; }
.virtual-form-row input[type="text"] { flex: 1; min-width: 160px; height: 42px; margin: 0; }
.virtual-form-row button { height: 42px; white-space: nowrap; }

/* Gear & Medal Showcase */
.gear-container { max-width: 1530px; margin: auto; padding: 40px clamp(25px,6vw,94px) 100px; }
.gear-tabs { display: flex; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 35px; flex-wrap: wrap; }
.gear-tab { padding: 10px 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 600; transition: all .2s ease; }
.gear-tab:hover { border-color: var(--gold-deep); color: var(--night); }
.gear-tab.active { background: var(--gold); border-color: var(--gold); color: var(--night); font-weight: 700; box-shadow: 0 2px 8px #d5b57c44; }
.gear-panel { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.gear-card-hero { display: grid; grid-template-columns: minmax(360px, 580px) 1fr; background: var(--night); border-radius: 12px; border: 1px solid #ffffff1a; overflow: hidden; color: var(--paper); box-shadow: 0 20px 40px #0004; }
.gear-image-wrap { position: relative; background: radial-gradient(circle at center, #112535 0%, #060e15 100%); display: flex; align-items: center; justify-content: center; padding: 30px; min-height: 480px; }
.gear-main-img { max-width: 100%; max-height: 480px; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 35px #0009; transition: transform .3s ease; }
.gear-main-img:hover { transform: scale(1.03); }
.gear-float-badge { position: absolute; top: 18px; left: 18px; background: #000000c0; backdrop-filter: blur(8px); border: 1px solid var(--gold); color: var(--gold); padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.gear-hero-desc { padding: clamp(25px, 4.5vw, 55px); display: flex; flex-direction: column; justify-content: center; }
.gear-title-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; margin-bottom: 12px; }
.gear-title-row h2 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.2vw, 42px); color: var(--gold); line-height: 1.1; }
.gear-edition-tag { padding: 4px 12px; background: #88363844; border: 1px solid #883638; border-radius: 4px; font-size: 11px; font-weight: 700; color: #f5b0b2; }
.gear-lead-text { color: #e5e5df; font-size: 14.5px; line-height: 1.85; margin: 0 0 24px; }
.gear-specs-list { display: grid; gap: 12px; margin-bottom: 24px; }
.gear-spec-item { background: #ffffff0a; border: 1px solid #ffffff12; border-radius: 6px; padding: 12px 16px; }
.gear-spec-item strong { display: block; font-size: 13.5px; color: var(--gold); margin-bottom: 3px; }
.gear-spec-item span { font-size: 12.5px; color: #c5d0d2; line-height: 1.6; display: block; }
.proxy-alert-box { background: #88363822; border: 1px solid #88363888; border-left: 4px solid var(--wine); border-radius: 6px; padding: 14px 18px; display: flex; gap: 12px; margin-bottom: 25px; align-items: flex-start; }
.proxy-alert-box .alert-icon { font-size: 22px; flex: none; line-height: 1; }
.proxy-alert-box strong { color: #f5b0b2; font-size: 13px; display: block; margin-bottom: 3px; }
.proxy-alert-box p { margin: 0; font-size: 12px; color: #e5e5df; line-height: 1.6; }
.gear-action-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 5px; }

.category-gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.cat-gear-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; }
.cat-tag { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; width: fit-content; margin-bottom: 12px; }
.cat-tag.tag-6k { background: #88363822; color: var(--wine); border: 1px solid #88363855; }
.cat-tag.tag-10k { background: #071b2f22; color: #194a7a; border: 1px solid #071b2f55; }
.cat-tag.tag-virtual { background: #00e5ff22; color: #008ba3; border: 1px solid #00e5ff55; }
.cat-gear-card h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 24px; }
.cat-gear-card p { margin: 0 0 16px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.color-palette-dots { display: flex; gap: 8px; margin-top: auto; }
.color-palette-dots span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px #0003; }

.sizing-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: clamp(24px, 4vw, 40px); }
.sizing-header h2 { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); }
.sizing-header p { margin: 0 0 25px; color: var(--muted); font-size: 14px; }
.sizing-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13.5px; }
.sizing-table th { background: var(--night); color: var(--paper); padding: 12px 16px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.sizing-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sizing-table tr:hover td { background: #f9f6ef; }
.stock-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.stock-pill.ready { background: #e6f4ea; color: #137333; border: 1px solid #ceead6; }
.sizing-footer-note { margin-top: 25px; background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px; padding: 18px 24px; font-size: 13px; color: #5d4037; }
.sizing-footer-note ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; }

.ticket-proxy-pill { background: #88363815; border: 1px solid #88363866; border-left: 4px solid var(--wine); border-radius: 4px; padding: 12px 16px; display: flex; gap: 12px; align-items: flex-start; margin: 15px 0; }
.ticket-proxy-pill .tpp-icon { font-size: 20px; flex: none; line-height: 1.2; }
.ticket-proxy-pill strong { color: var(--wine); font-size: 13px; display: block; margin-bottom: 2px; }
.ticket-proxy-pill p { margin: 0; font-size: 12px; color: #41545b; line-height: 1.5; }

/* Shirt Selector Widget (matching Thai Marathon style) */
.shirt-widget {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 32px);
  margin: 25px 0 35px;
  box-shadow: 0 8px 24px #0000000a;
}
.shirt-widget-header {
  margin-bottom: 20px;
}
.shirt-widget-title {
  margin: 0;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.shirt-widget-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: start;
}
.shirt-preview-card {
  background: #ffffff;
  border: 1px solid #e7dfd3;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px #00000008;
  display: flex;
  flex-direction: column;
}
.spc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.spc-badge {
  background: #fadb14;
  color: #111;
  font-weight: 900;
  font-size: 18px;
  padding: 4px 16px;
  border-radius: 3px;
  letter-spacing: .05em;
  display: inline-block;
  box-shadow: 0 2px 4px #0002;
}
.spc-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.spc-logo img {
  display: block;
}
.spc-brand-txt {
  font-size: 11px;
  font-weight: 700;
  color: var(--wine);
  letter-spacing: .06em;
}
.spc-image-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  min-height: 240px;
  background: #faf8f5;
  border-radius: 8px;
}
.spc-shirt-img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  transition: transform .25s ease;
}
.spc-bottom-tables {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #d8d0c3;
}
.spc-sub-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #6c7e84;
  margin-bottom: 6px;
}
.spc-sizes-row {
  display: flex;
  background: #fbf7ee;
  border: 1px solid #ebdcc5;
  border-radius: 4px;
  overflow: hidden;
}
.spc-sizes-row span {
  flex: 1;
  text-align: center;
  padding: 4px 1px;
  font-size: 9px;
  color: #555;
  border-right: 1px solid #ebdcc5;
  display: flex;
  flex-direction: column;
}
.spc-sizes-row span:last-child {
  border-right: 0;
}
.spc-sizes-row span b {
  color: var(--wine);
  font-size: 10px;
}
.spc-fee-box {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 4px;
  padding: 6px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.spc-fee-box strong {
  color: #d97706;
  font-size: 15px;
}
.spc-fee-box small {
  font-size: 11px;
  color: #78350f;
}

.shirt-category-pills {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shirt-cat-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 2px solid #e2dacd;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  transition: all .2s ease;
  cursor: pointer;
}
.shirt-cat-btn:hover {
  border-color: #f59e0b;
  background: #fffdfa;
}
.shirt-cat-btn.active {
  border-color: #f59e0b;
  background: #fffdf5;
  box-shadow: 0 4px 14px #f59e0b22;
}
.radio-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #b7c3c5;
  background: #fff;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shirt-cat-btn.active .radio-dot {
  border-color: #f59e0b;
}
.shirt-cat-btn.active .radio-dot::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f59e0b;
}
.cat-btn-content strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.cat-btn-content small {
  font-size: 12px;
  color: var(--muted);
}

.shirt-sizes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.size-btn {
  padding: 13px 10px;
  background: #ffffff;
  border: 1px solid #d2cbbe;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  transition: all .2s ease;
  cursor: pointer;
}
.size-btn:hover {
  border-color: #f59e0b;
  background: #fffdf9;
}
.size-btn.active {
  border-color: #f59e0b;
  background: #fffdf0;
  color: #b45309;
  font-weight: 700;
  outline: 2px solid #f59e0b;
  outline-offset: -1px;
  box-shadow: 0 3px 10px #f59e0b20;
}

.shirt-widget-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e7dfd3;
}
.btn-back {
  padding: 12px 32px;
  background: #f6eee3;
  color: #7c6853;
  border: 1px solid #e2d2c1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s ease;
  cursor: pointer;
}
.btn-back:hover {
  background: #ede1d3;
  color: #4a3b2c;
}
.btn-next {
  padding: 12px 38px;
  background: #f59e0b;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 14px #f59e0b44;
  transition: background .2s ease, transform .1s ease;
  cursor: pointer;
}
.btn-next:hover {
  background: #d97706;
}
.btn-next:active {
  transform: scale(0.98);
}

@media (max-width: 1060px) {
  .site-header { gap: 15px; padding-inline: 24px; }
  .main-nav { gap: 16px; }
  .header-cta { padding-inline: 12px; }
  .register-layout { grid-template-columns: minmax(190px,.65fr) minmax(0,1.5fr); gap: 30px; }
  .ops-layout { grid-template-columns: 230px minmax(0,1fr); gap: 25px; }
  .gear-card-hero { grid-template-columns: 1fr; }
  .gear-image-wrap { min-height: 380px; }
  .category-gear-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .site-header { height: 72px; }
  .brand-logo { width: 31px; height: 44px; }
  .brand-type { font-size: 19px; }
  .header-cta { display: none; }
  .hero { min-height: 680px; }
  .hero-photo { background-position: 55% center; }
  .intro-row, .register-layout, .ops-layout, .finance-grid { grid-template-columns: 1fr; }
  .shirt-widget-body { grid-template-columns: 1fr; }
  .shirt-sizes-grid { grid-template-columns: repeat(2, 1fr); }
  .spc-bottom-tables { grid-template-columns: 1fr; }
  .form-intro { position: static; }
  .form-intro > p { max-width: 65ch; }
  .flow-strip { grid-template-columns: 1fr; gap: 20px; }
  .ops-layout { gap: 20px; }
  .ops-menu { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
  .ops-menu h2 { grid-column: 1/-1; }
  .ops-mode, .ops-mode:last-child { min-height: 85px; border: 1px solid #ffffff3d; }
  .ops-mode.selected { box-shadow: inset 0 2px var(--gold); }
  .metrics { grid-template-columns: repeat(3,1fr); }
  .metrics > div:nth-child(3) { border-right: 0; }
  .metrics > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .activity-row { grid-template-columns: 70px 100px 1fr; }
}
@media (max-width: 670px) {
  html { scroll-padding-top: 66px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); font-size: 16px; }
  .site-header { height: 65px; padding-inline: 17px; }
  .brand-logo { width: 29px; height: 41px; }
  .brand-type { font-size: 19px; }
  .brand-type small { font-size: 8px; }
  .main-nav { position: fixed; z-index: 40; inset: auto 0 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 0; height: auto; padding: 0 max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left)); background: var(--night-deep); border-top: 1px solid #ffffff2b; box-shadow: 0 -12px 30px #0003; }
  .main-nav button { height: 62px; min-height: 62px; padding: 6px 2px; border: 0; border-top: 2px solid transparent; color: #c3cecd; font-size: 10px; line-height: 1.25; white-space: normal; }
  .main-nav .nav-active { border-top-color: var(--gold); background: #ffffff11; }
  .role-bar { padding: 8px 12px; }
  .role-summary { width: 100%; }
  .role-controls { width: 100%; }
  .role-pills { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 4px; }
  .role-pill { white-space: nowrap; flex: none; font-size: 10px; padding: 5px 8px; }
  .reset-data-btn { width: 100%; justify-content: center; margin-top: 4px; }
  .ticket-layout { grid-template-columns: 1fr; padding: 30px 15px 70px; }
  .ticket-body { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px; }
  .ticket-milestones { grid-template-columns: 1fr; }
  .ticket-footer { flex-direction: column; align-items: stretch; }
  .ticket-footer .button { width: 100%; }
  .page, .page.active { scroll-margin-top: 65px; }
  .hero { min-height: 650px; }
  .hero-photo { background-image: linear-gradient(0deg,#071017f0 0%,#07101788 52%,#07101765 100%),url('campus-night.jpg'); background-position: 57% center; }
  .hero-inner { padding: 23px 23px 25px; }
  .hero-meta { font-size: 8px; letter-spacing: .09em; }
  .hero-meta span:last-child { display: none; }
  .hero-copy { padding: 65px 0 45px; }
  .hero-mfu { font-size: 19px; letter-spacing: .26em; }
  .hero-night { font-size: clamp(80px,21vw,120px); line-height: .78; }
  .hero-year { font-size: 24px; }
  .hero-thai { font-size: 18px; margin-top: 24px; }
  .hero-description { font-size: 12px; max-width: 35ch; }
  .hero-actions { display: grid; gap: 8px; margin-top: 25px; }
  .hero-actions .button { width: 100%; min-height: 48px; }
  .hero-footer { align-items: start; flex-direction: column; gap: 15px; }
  .hero-date strong { font-size: 52px; }
  .hero-footer p { text-align: left; font-size: 9px; line-height: 1.7; }
  .home-content { padding: 73px 22px 75px; }
  .intro-row { gap: 20px; }
  .intro-row h2 { font-size: 64px; }
  .intro-row p { font-size: 14px; }
  .race-list { display: block; margin-top: 42px; }
  .race-list article, .race-list article:first-child, .race-list article:last-child { min-height: 150px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 0 10px; padding: 19px 0; border: 0; border-bottom: 1px solid var(--line); }
  .race-list article:last-child { border-bottom: 0; }
  .race-no { grid-column: 1/-1; }
  .race-list h3 { font-size: 34px; margin: 11px 0 5px; }
  .race-list p { font-size: 11px; }
  .race-list strong { grid-column: 2; grid-row: 2; font-size: 55px; align-self: center; }
  .flow-strip { margin-top: 40px; }
  .flow-strip h2 { font-size: 30px; }
  .flow-steps { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
  .page-heading { display: block; padding: 60px 22px 0; }
  .page-heading h1 { font-size: clamp(42px,11vw,64px); }
  .page-heading > p { margin-top: 19px; text-align: left; font-size: 11px; }
  .register-layout { gap: 30px; padding: 33px 15px 65px; }
  .form-intro h2 { font-size: 27px; }
  .form-intro > p { font-size: 12px; }
  .notice-dark { margin-top: 18px; padding: 12px 0; }
  .register-form { padding: 25px 17px; }
  .register-form legend { font-size: 18px; }
  .register-form fieldset { margin-bottom: 27px; padding-bottom: 27px; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice { min-height: 60px; flex-direction: row; align-items: center; justify-content: space-between; }
  .choice small { margin-right: 25px; }
  .choice input { top: 21px; }
  .field-grid { grid-template-columns: 1fr; gap: 16px; }
  .field-grid input, .field-grid select { height: 49px; font-size: 16px; }
  .form-footer { display: block; }
  .form-footer .button { width: 100%; margin-top: 14px; }
  .result-panel { margin: 0 15px 60px; padding: 25px; }
  .result-panel .button { width: 100%; }
  .dashboard-content { padding: 28px 15px 75px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metrics > div { min-height: 95px; padding: 13px; border-top: 1px solid var(--line); }
  .metrics > div:first-child, .metrics > div:nth-child(2) { border-top: 0; }
  .metrics > div:nth-child(2n) { border-right: 0; }
  .metrics > div:first-child { padding-left: 13px; }
  .metrics strong { font-size: 43px; }
  .dashboard-bar { display: block; margin-top: 42px; }
  .dashboard-bar h2 { font-size: 27px; }
  .search-label input { width: 100%; margin-top: 17px; }
  .table-scroll { overflow: visible; border: 0; }
  table, tbody, tr, td { width: 100%; min-width: 0; display: block; }
  thead { display: none; }
  tbody { display: grid; gap: 11px; }
  tr { padding: 14px; background: var(--paper); border: 1px solid var(--line); }
  td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border: 0; text-align: right; }
  td::before { color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
  td:nth-child(1) { display: block; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); text-align: left; }
  td:nth-child(1) strong { font-size: 14px; }
  td:nth-child(2)::before { content: 'กลุ่ม'; }
  td:nth-child(3)::before { content: 'รายการ'; }
  td:nth-child(4)::before { content: 'สถานะ'; }
  td:nth-child(5)::before { content: 'รับเสื้อ / BIB'; }
  td:nth-child(6)::before { content: 'เช็กอิน'; }
  td:nth-child(7) { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 11px; margin-top: 8px; border-top: 1px solid var(--line); }
  .table-button { flex: 1; min-height: 44px; margin: 0; }
  .empty-row { display: block; text-align: center; }
  .dashboard-bottom { display: block; }
  .ops-layout { padding: 36px 15px 77px; }
  .ops-menu { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ops-mode { min-height: 80px; }
  .ops-workspace { padding: 25px 17px; }
  .workspace-top h2 { font-size: 29px; }
  .scanner-symbol { display: none; }
  .scan-row { display: block; }
  .scan-row input { height: 49px; }
  .scan-row button, .ops-workspace .button-red { width: 100%; min-height: 48px; margin-top: 8px; }
  footer { display: block; padding: 25px 22px 30px; }
  footer p { margin-top: 8px; }
  dialog { padding: 26px 20px; }
}
@media (max-width: 370px) {
  .hero-night { font-size: 75px; }
  .hero { min-height: 660px; }
  .race-list h3 { font-size: 30px; }
  .ops-mode { grid-template-columns: 20px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo { animation: none; }
  .button { transition: none; }
}