/* Japan HopFest Passport — SJ60 red/white look (tokens from skills/japan-hopfest-design/tokens/sj60.css). */
@font-face{font-family:"BVP";font-weight:600;font-display:swap;src:url("fonts/BeVietnamPro-SemiBold.ttf")}
@font-face{font-family:"BVP";font-weight:700;font-display:swap;src:url("fonts/BeVietnamPro-Bold.ttf")}
@font-face{font-family:"BVP";font-weight:800;font-display:swap;src:url("fonts/BeVietnamPro-ExtraBold.ttf")}
:root{--red:#ED1C24;--red-press:#D3161D;--red-wash:#FDEAEB;--white:#fff;--slate:#414E50;--slate-70:#6B7678;--slate-40:#97A0A1;
      --hair:#D9DADB;--paper:#FAFAF8;--ok:#1E8A4C}
*{box-sizing:border-box;margin:0}
html{background:var(--white)}
body{font-family:"BVP",system-ui,-apple-system,sans-serif;font-weight:600;background:var(--white);color:var(--slate);
     min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}
.band{height:12px;flex:0 0 12px;background:repeating-linear-gradient(90deg,var(--red) 0 24px,var(--white) 24px 48px)}
header.top{background:var(--red);color:var(--white);text-align:center;padding:22px 16px 26px}
header.top img{height:64px;width:auto;display:block;margin:0 auto}
header.top h1{font-weight:800;font-size:30px;letter-spacing:.02em;line-height:1.1;margin-top:12px;color:var(--white)}
header.top p{font-size:14px;margin-top:6px;opacity:.95}
main{flex:1 0 auto;width:100%;max-width:520px;margin:0 auto;padding:24px 16px 40px;display:flex;flex-direction:column;gap:22px}
h2{font-weight:800;font-size:20px;line-height:1.2;color:var(--red)}
h3{font-weight:800;font-size:16px;color:var(--slate)}
p.muted,.muted{color:var(--slate-70);font-size:13px}
a{color:var(--red)}
.card{background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:18px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:12px 22px;border:0;border-radius:999px;
     background:var(--red);color:var(--white);font:inherit;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;transition:transform .08s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:var(--white);color:var(--red);border:2px solid var(--red)}
.btn.small{min-height:40px;font-size:14px;padding:8px 16px;width:auto}
label.field{display:block;font-size:13px;font-weight:700;margin-bottom:12px}
label.field input,label.field select{display:block;width:100%;margin-top:6px;padding:13px 14px;border:1.5px solid var(--hair);border-radius:12px;
     font:inherit;font-size:16px;font-weight:600;color:var(--slate);background:var(--white)}
label.field input:focus,label.field select:focus{outline:none;border-color:var(--red)}
label.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin-bottom:10px}
label.check input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--red)}
.err{color:var(--red-press);font-size:13px;font-weight:700;min-height:1em}
.steps{display:grid;gap:14px;counter-reset:s;padding:0}
.steps li{list-style:none;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--red);color:var(--white);
     display:flex;align-items:center;justify-content:center;font-weight:800}
.steps b{display:block;color:var(--slate);font-weight:800}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tier{border:2px solid var(--red);border-radius:16px;padding:14px;text-align:center}
.tier .n{font-weight:800;font-size:34px;line-height:1;color:var(--red)}
.tier .l{font-size:13px;margin-top:6px}
.tier.done{background:var(--red);color:var(--white)}
.tier.done .n{color:var(--white)}
.outlets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stamp{position:relative;aspect-ratio:1;border:2px dashed var(--hair);border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.stamp .logo{width:72%;height:72%;background:var(--slate-40);opacity:.55;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.stamp .initials{font-weight:800;font-size:22px;color:var(--slate-40);opacity:.6}
.stamp.on{border:2px solid var(--red);background:var(--white)}
.stamp.on .logo{background:var(--red);opacity:1}
.stamp.on .initials{color:var(--red);opacity:1}
.stamp.on::after{content:"";position:absolute;inset:6px;border:2px solid var(--red);border-radius:12px;opacity:.35;transform:rotate(-4deg)}
.stamp.fresh{animation:thunk .45s cubic-bezier(.2,.6,.2,1)}
@keyframes thunk{0%{transform:scale(1.35) rotate(-8deg);opacity:0}60%{transform:scale(.94) rotate(1deg);opacity:1}100%{transform:none}}
.stamp-name{font-size:11px;text-align:center;margin-top:5px;line-height:1.2;color:var(--slate-70)}
.progress{height:12px;border-radius:999px;background:var(--red-wash);overflow:hidden}
.progress span{display:block;height:100%;background:var(--red);border-radius:999px;transition:width .4s}
.code{font-weight:800;font-size:30px;letter-spacing:.12em;color:var(--red);text-align:center;font-variant-numeric:tabular-nums}
.sticky{position:sticky;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--white) 30%);
     width:100%;max-width:520px;margin:0 auto}
.sheet-bg{position:fixed;inset:0;background:rgba(25,25,25,.55);display:none;align-items:flex-end;justify-content:center;z-index:10}
.sheet-bg.open{display:flex}
.sheet{background:var(--white);width:100%;max-width:520px;border-radius:22px 22px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));
     max-height:92dvh;overflow:auto}
.sheet h2{text-align:center}
.handover{background:var(--red);color:var(--white);border-radius:14px;padding:12px;text-align:center;font-weight:800;margin:14px 0}
.dots{display:flex;gap:14px;justify-content:center;margin:16px 0 8px}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--red)}
.dots i.f{background:var(--red)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.pad button{min-height:62px;border-radius:14px;border:1.5px solid var(--hair);background:var(--paper);font:inherit;font-weight:800;font-size:24px;color:var(--slate);cursor:pointer}
.pad button:active{background:var(--red-wash)}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
footer.sj{background:var(--white);border-top:1px solid var(--hair);color:var(--slate);padding:20px 16px;display:flex;align-items:center;justify-content:center;gap:16px}
footer.sj img{height:46px;width:auto;display:block;flex:0 0 auto}
footer.sj p{font-size:12px;line-height:1.4;max-width:260px}
.terms{font-size:13px;color:var(--slate-70)}
.terms h3{margin:14px 0 4px;font-size:14px}
.terms li{margin:3px 0 3px 18px}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th,table.data td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--hair)}
table.data th{color:var(--slate-70);font-weight:700}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
.big{font-weight:800;font-size:28px;color:var(--red);line-height:1.1}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpis .card{padding:14px}
.ok{color:var(--ok)}
[hidden]{display:none!important}