/* staff.raceup.co.th — Staff & Volunteer registration */
:root{
  --red:#EE4439; --red-d:#C9352B; --ink:#111827; --muted:#6B7280; --line:#E5E7EB;
  --bg:#F7F7F8; --card:#fff; --green:#16A34A; --amber:#D97706; --rad:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Prompt',system-ui,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5}
a{color:var(--red); text-decoration:none}
img{max-width:100%}

/* header */
.hd{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line)}
.hd-in{max-width:1080px; margin:auto; padding:0 18px; height:60px; display:flex; align-items:center; gap:18px}
.hd-logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:var(--ink)}
.hd-logo .dot{width:26px; height:26px; border-radius:8px; background:var(--red); color:#fff; display:grid; place-items:center; font-size:15px}
.hd-nav{display:flex; gap:4px; margin-left:8px}
.hd-nav a{padding:8px 14px; border-radius:9px; color:var(--muted); font-size:14px; font-weight:500}
.hd-nav a.on{background:#FEF2F2; color:var(--red)}
.hd-nav a:hover{color:var(--ink)}
.hd-sp{flex:1}
.hd-user{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
.hd-user b{color:var(--ink); font-weight:600}
.av{width:30px; height:30px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-weight:600; font-size:13px}

/* layout */
.wrap{max-width:1080px; margin:auto; padding:24px 18px 60px}
.narrow{max-width:640px}
.row{display:flex; gap:16px; flex-wrap:wrap}
.grow{flex:1}
h1.page{font-size:24px; margin:6px 0 2px}
.sub{color:var(--muted); font-size:14px; margin-bottom:20px}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:20px}
.card+.card{margin-top:16px}
.card h3{margin:0 0 14px; font-size:16px}

/* buttons */
.btn{appearance:none; border:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600;
  background:var(--red); color:#fff; padding:11px 20px; border-radius:10px; display:inline-flex; align-items:center; gap:8px; transition:.15s}
.btn:hover{background:var(--red-d)}
.btn:disabled{opacity:.5; cursor:default}
.btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{background:#F9FAFB}
.btn.sm{padding:7px 13px; font-size:13px; border-radius:8px}
.btn.ok{background:var(--green)} .btn.ok:hover{filter:brightness(.93)}
.btn.no{background:#fff; color:#DC2626; border:1px solid #FCA5A5}

/* forms */
.fld{margin-bottom:14px}
.fld label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#374151}
.fld label .req{color:var(--red)}
.fld input,.fld select,.fld textarea{width:100%; font-family:inherit; font-size:14px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px #FEE2E2}
.fld textarea{resize:vertical; min-height:74px}
.fld .hint{font-size:12px; color:var(--muted); margin-top:5px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){ .two{grid-template-columns:1fr} }

/* position picker */
.pos{border:1px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; display:flex; gap:12px; align-items:flex-start; transition:.12s; background:#fff}
.pos:hover{border-color:#FCA5A5}
.pos.sel{border-color:var(--red); background:#FEF2F2}
.pos .rdo{width:18px; height:18px; border-radius:50%; border:2px solid #CBD5E1; margin-top:3px; flex:none}
.pos.sel .rdo{border-color:var(--red); background:radial-gradient(circle,var(--red) 0 5px,#fff 6px)}
.pos .t{font-weight:600; font-size:14.5px}
.pos .jd{font-size:13px; color:var(--muted); margin-top:3px}
.pos .meta{font-size:12px; color:var(--muted); margin-top:6px; display:flex; gap:12px}

/* badges / tags */
.tag{display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px}
.tag.staff{background:#EFF6FF; color:#1D4ED8}
.tag.volunteer{background:#F0FDF4; color:#15803D}
.st{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:4px 11px; border-radius:999px}
.st.pending{background:#FEF3C7; color:#92400E}
.st.approved{background:#DCFCE7; color:#166534}
.st.rejected{background:#FEE2E2; color:#991B1B}
.st.waitlist{background:#E0E7FF; color:#3730A3}

/* table */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{text-align:left; color:var(--muted); font-weight:600; font-size:12px; padding:8px 10px; border-bottom:1px solid var(--line)}
.tbl td{padding:10px; border-bottom:1px solid #F3F4F6; vertical-align:middle}
.tbl tr:hover td{background:#FAFAFA}

/* tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px}
.tabs button{appearance:none; background:none; border:none; cursor:pointer; font-family:inherit; font-size:14px;
  color:var(--muted); padding:10px 16px; border-bottom:2px solid transparent; position:relative; top:1px}
.tabs button.on{color:var(--ink); font-weight:600; border-bottom-color:var(--red)}

/* misc */
.empty{text-align:center; color:var(--muted); padding:50px 20px}
.empty .big{font-size:34px; margin-bottom:8px}
.muted{color:var(--muted)}
.pill{display:inline-block; background:#F3F4F6; border-radius:8px; padding:3px 10px; font-size:12px; color:#374151}

/* login / hero */
.hero{min-height:calc(100vh - 60px); display:grid; place-items:center; padding:30px 18px}
.hero-card{max-width:460px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:40px 34px; box-shadow:0 12px 40px rgba(0,0,0,.05)}
.hero-card .logo{width:60px; height:60px; border-radius:16px; background:var(--red); color:#fff; font-size:30px; display:grid; place-items:center; margin:0 auto 18px}
.hero-card h1{font-size:24px; margin:0 0 8px}
.hero-card p{color:var(--muted); font-size:14.5px; margin:0 0 24px}

/* toast */
#toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px}
.toast{background:#111827; color:#fff; padding:11px 18px; border-radius:10px; font-size:13.5px; box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.ok{background:var(--green)} .toast.err{background:#DC2626}

/* id card preview */
.idprev{border:1px dashed var(--line); border-radius:12px; padding:14px; text-align:center; background:#FAFAFA}
.idprev img{max-height:200px; border-radius:8px; border:1px solid var(--line)}
.rating{color:#F59E0B; font-size:16px; letter-spacing:2px}