:root{
  --g:#0f4c3a; --g2:#17664f; --gl:#e3efe9; --paper:#f5f3ec; --ink:#16231e; --mute:#5b6a63;
  --line:#cfd8d2; --warn:#8a2d12; --warnbg:#fbe9e2; --accent:#f6c453; --white:#fff;
  --r:18px; --tap:64px;
  --pad:max(20px, env(safe-area-inset-left));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
html{overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);overscroll-behavior:none;touch-action:manipulation;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  font-size:20px;line-height:1.6;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  position:fixed;inset:0;overflow:hidden;
}
input,textarea{-webkit-user-select:text;user-select:text}
.app{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top) + 28px) calc(var(--pad) + 8px) calc(env(safe-area-inset-bottom) + 28px);
  display:flex;flex-direction:column;
}
.screen{margin:auto;width:100%;max-width:880px;display:flex;flex-direction:column;gap:20px}
.screen.center{align-items:center;text-align:center}
h1{font-size:clamp(30px,5.2vw,48px);line-height:1.25;margin:0;color:var(--g);letter-spacing:.02em}
h2{font-size:clamp(24px,3.6vw,32px);margin:0;color:var(--g);line-height:1.3}
p{margin:0}
.lead{font-size:clamp(20px,2.6vw,26px)}
.small{font-size:16px;color:var(--mute)}
.mute{color:var(--mute)}
.err{background:var(--warnbg);color:var(--warn);border-radius:12px;padding:14px 18px;font-weight:700}
.notice{background:var(--gl);border-radius:var(--r);padding:20px 22px}
.notice.big{background:var(--accent);color:#2b2100}
.notice h2{color:inherit;margin-bottom:8px}
.notice ol{margin:8px 0 0;padding-left:1.4em}
.notice li{margin:6px 0}

button{
  font:inherit;color:inherit;border:0;cursor:pointer;min-height:var(--tap);
  border-radius:var(--r);padding:12px 24px;background:var(--white);border:2px solid var(--line);
  font-weight:700;touch-action:manipulation;
}
button:active{transform:scale(.985)}
button:focus-visible,input:focus-visible{outline:4px solid var(--accent);outline-offset:2px}
button.primary{background:var(--g);color:#fff;border-color:var(--g);font-size:24px;min-height:76px}
button.primary:disabled{background:#9db3a9;border-color:#9db3a9}
button.ghost{background:transparent;border-color:var(--line);color:var(--mute)}
button.link{background:none;border:0;color:var(--g);text-decoration:underline;min-height:56px;font-weight:600}
button.sel{background:var(--g);color:#fff;border-color:var(--g)}

.menu{display:grid;gap:16px;grid-template-columns:1fr}
.menu button{
  min-height:112px;font-size:clamp(22px,3vw,30px);text-align:left;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:2px;padding:18px 28px;
  background:var(--white);border:2px solid var(--g);color:var(--g);
}
.menu button small{font-size:16px;font-weight:400;color:var(--mute)}
.menu button.main{background:var(--g);color:#fff}
.menu button.main small{color:#cfe5dc}
@media (min-width:900px) and (orientation:landscape){
  .menu{grid-template-columns:1fr 1fr 1fr}
  .menu button{min-height:200px}
}

.top-row{display:flex;align-items:center;gap:12px;justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips button{min-height:var(--tap);font-size:20px;padding:10px 22px}
.hosts{max-height:46vh;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:700;font-size:20px}
.field label .opt{font-weight:400;color:var(--mute);font-size:16px;margin-left:8px}
input[type=text],input[type=search],input[type=tel],input[type=password]{
  font:inherit;font-size:26px;min-height:var(--tap);padding:10px 16px;border-radius:14px;
  border:2px solid var(--line);background:#fff;color:var(--ink);width:100%;
}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row > input{flex:1 1 240px}
.actions{display:flex;gap:16px;flex-wrap:wrap}
.actions .primary{flex:1 1 280px}

.number{
  font-size:clamp(72px,16vw,140px);font-weight:800;letter-spacing:.12em;color:var(--g);
  font-variant-numeric:tabular-nums;line-height:1.1;padding-left:.12em;
}
.numcard{background:#fff;border:2px solid var(--g);border-radius:24px;padding:16px 36px}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;width:min(420px,80%)}
.bar i{display:block;height:100%;width:100%;background:var(--g);transform-origin:left;animation:shrink 10s linear forwards}
@keyframes shrink{to{transform:scaleX(0)}}

/* digit pad */
.display{
  font-size:44px;font-weight:800;letter-spacing:.35em;text-align:center;min-height:76px;background:#fff;
  border:2px solid var(--line);border-radius:14px;padding:8px 8px 8px calc(8px + .35em);font-variant-numeric:tabular-nums;
}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:440px;width:100%;margin:0 auto}
.pad button{min-height:78px;font-size:34px;padding:8px}
.pad .fn{font-size:20px;background:var(--gl)}
.screen.center .pad,.screen.center .display{max-width:440px;width:100%}

/* scanner */
.cam{position:relative;width:min(100%,560px);aspect-ratio:1/1;background:#0b1511;border-radius:var(--r);overflow:hidden;margin:0 auto}
.cam video{width:100%;height:100%;object-fit:cover}
.cam::after{content:"";position:absolute;inset:14%;border:4px solid rgba(255,255,255,.85);border-radius:20px;pointer-events:none}

.qrbox{background:#fff;padding:20px;border-radius:var(--r);border:2px solid var(--line);display:inline-block;line-height:0}
.qrbox svg,.qrbox img{width:min(62vw,60vh,420px);height:auto;display:block}

.corner{position:fixed;top:0;right:0;width:96px;height:96px;z-index:20;touch-action:none}
.pending{
  position:fixed;left:calc(12px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));z-index:15;
  background:var(--accent);color:#2b2100;border-radius:999px;padding:4px 14px;font-size:15px;font-weight:700;
}
.demo-banner{
  position:fixed;top:0;left:0;right:0;z-index:30;background:var(--accent);color:#2b2100;text-align:center;
  font-weight:700;padding:calc(env(safe-area-inset-top) + 4px) 8px 4px;font-size:15px;
}
body[data-demo] .app{padding-top:calc(env(safe-area-inset-top) + 56px)}
.badge{display:inline-block;background:var(--gl);color:var(--g);border-radius:999px;padding:2px 12px;font-size:15px;font-weight:700}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.kv b{color:var(--mute);font-weight:600}

@media (max-width:520px){
  body{font-size:18px}
  .app{padding-left:16px;padding-right:16px}
  .number{letter-spacing:.06em}
  .numcard{padding:12px 20px}
  .display{font-size:34px}
}
@media (prefers-reduced-motion:reduce){.bar i{animation-duration:.01s}}