*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#d4822a;
  --brand-dark:#6b3520;
  --brand-light:#fff3e6;
  --bg:#fdf9f5;
  --card:#fff;
  --text:#2c2418;
  --sub:#8a7060;
  --line:#06C755;
  --ok:#27ae60;
  --danger:#e74c3c;
  --gold:#f5c87e;
  --jpyc:#0066cc;
  --paypay:#ff0033;
  --visa:#1a1f71;
  --radius:14px;
  --shadow:0 2px 16px rgba(0,0,0,.08);
}
html,body{height:100%}
body{font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 18px;background:var(--brand);color:#fff;border-radius:10px;font-weight:700;font-size:15px;transition:transform .1s,filter .15s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.btn.dark{background:var(--brand-dark)}
.btn.ok{background:var(--ok)}
.btn.danger{background:var(--danger)}
.btn.lg{padding:16px 22px;font-size:16px;width:100%}
.btn.sm{padding:8px 12px;font-size:13px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.badge{display:inline-block;background:var(--brand-light);color:var(--brand);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.badge.danger{background:#fdecea;color:var(--danger)}
.badge.ok{background:#e8f5ee;color:var(--ok)}
.toast{position:fixed;left:50%;top:24px;transform:translateX(-50%);background:#2c2418;color:#fff;padding:12px 20px;border-radius:24px;font-size:14px;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,.25);animation:toastIn .3s ease,toastOut .3s ease 2.4s forwards}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,-12px)}}
.spinner{width:36px;height:36px;border:3px solid var(--brand-light);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.slide-in{animation:slideIn .4s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.pulse{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden}
.confetti i{position:absolute;width:8px;height:14px;top:-20px;animation:fall 2.5s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s ease}
.modal{background:#fff;border-radius:18px;max-width:480px;width:100%;max-height:90vh;overflow:auto;padding:24px}
.modal h2{font-size:18px;margin-bottom:14px}
.muted{color:var(--sub);font-size:13px}
.flex{display:flex;gap:10px}
.flex.col{flex-direction:column}
.flex.center{align-items:center;justify-content:center}
.flex.between{justify-content:space-between}
.flex.wrap{flex-wrap:wrap}
.grow{flex:1}
.hide{display:none!important}
.text-c{text-align:center}
.text-r{text-align:right}
.mt{margin-top:12px}
.mt2{margin-top:20px}
.pad{padding:16px}
.pad2{padding:20px}
.demo-watermark{position:fixed;bottom:6px;right:8px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:3px 8px;border-radius:4px;z-index:50;letter-spacing:.5px}