:root { --blue:#0b64d8; --blue2:#1e88ff; --ink:#162033; --muted:#69758a; --line:#d8e2ef; --bg:#f5f8fc; --green:#13a66b; --red:#e5484d; --gold:#d89b00; }
* { box-sizing:border-box; }
html, body { margin:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans JP','Hiragino Sans',Meiryo,sans-serif; background:linear-gradient(180deg,#eef5ff,#fff); color:var(--ink); }
button, input, select { font:inherit; }
#app { min-height:100vh; display:flex; justify-content:center; align-items:flex-start; padding:18px; }
.phone { width:min(430px,100%); min-height:860px; background:#fff; border:1px solid #dbe6f2; border-radius:28px; box-shadow:0 18px 50px rgba(23,58,120,.14); overflow:hidden; position:relative; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #edf2f7; background:#fff; position:sticky; top:0; z-index:5; }
.brand img { height:38px; width:auto; }
#langSelect { border:1px solid var(--line); background:#fff; border-radius:10px; padding:7px 8px; }
#screen { padding:18px 18px 86px; min-height:700px; }
.bottom-nav { position:absolute; bottom:0; left:0; right:0; height:66px; display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border-top:1px solid #e8eef6; }
.bottom-nav button { border:0; background:#fff; font-size:12px; color:#667085; }
.bottom-nav button.active { color:var(--blue); font-weight:700; }
h1 { font-size:24px; margin:10px 0 8px; }
h2 { font-size:19px; margin:18px 0 10px; }
p { line-height:1.65; }
.small { font-size:12px; color:var(--muted); }
.muted { color:var(--muted); }
.card { border:1px solid var(--line); border-radius:18px; padding:16px; background:#fff; margin:12px 0; box-shadow:0 6px 20px rgba(15,70,140,.04); }
.hero { background:linear-gradient(135deg,#eaf4ff,#fff); border:1px solid #bcd7ff; border-radius:20px; padding:18px; text-align:center; }
.machine-img { display:block; width:100%; max-height:245px; object-fit:contain; border-radius:16px; background:#f7f9fb; }
.drum-img { width:180px; display:block; margin:10px auto; }
.primary, .secondary, .ghost, .danger { width:100%; min-height:48px; border-radius:12px; padding:11px 14px; margin:8px 0; cursor:pointer; font-weight:700; }
.primary { color:#fff; background:linear-gradient(180deg,var(--blue2),var(--blue)); border:0; box-shadow:0 8px 18px rgba(11,100,216,.22); }
.secondary { color:var(--blue); background:#fff; border:1px solid #9cc2ff; }
.ghost { color:var(--ink); background:#f7f9fc; border:1px solid var(--line); }
.danger { color:#fff; background:var(--red); border:0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #edf2f7; }
.row:last-child { border-bottom:0; }
.kv { display:grid; grid-template-columns:1fr auto; gap:8px; margin:6px 0; }
.status { display:inline-flex; align-items:center; gap:6px; border-radius:100px; padding:4px 10px; background:#edf7f2; color:var(--green); font-weight:700; font-size:12px; }
.status.warn { background:#fff7e1; color:#b07800; }
.status.err { background:#ffeded; color:var(--red); }
.checklist .row span:last-child { font-weight:700; }
.ok { color:var(--green); } .ng { color:var(--red); } .pending { color:var(--blue); }
.option { border:1px solid var(--line); border-radius:14px; padding:14px; margin:10px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; cursor:pointer; }
.option:hover { border-color:#8bbcff; }
.option.selected { border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,100,216,.1); }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:4px 9px; background:#eef5ff; color:#0b64d8; font-weight:700; font-size:12px; }
.badge.gold { background:#fff8df; color:#9a6900; }
.badge.diamond { background:#eaf7ff; color:#096eb5; }
.price { font-size:28px; font-weight:800; color:#111827; }
.progress-ring { width:190px; height:190px; border-radius:50%; margin:20px auto; background:conic-gradient(var(--green) 68%, #e6edf5 0); display:grid; place-items:center; }
.progress-ring div { width:148px; height:148px; border-radius:50%; background:#fff; display:grid; place-items:center; text-align:center; }
.time { font-size:34px; font-weight:800; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tier { min-height:174px; text-align:center; }
.tier .gem { font-size:46px; }
.coupon { border-left:6px solid var(--blue); }
.coupon.green { border-left-color:var(--green); }
.coupon.gold { border-left-color:var(--gold); }
.input { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px; margin:7px 0; }
.video-wrap { position:relative; overflow:hidden; border-radius:18px; background:#0b1220; min-height:280px; display:grid; place-items:center; color:#fff; }
video { width:100%; height:auto; }
.scan-frame { position:absolute; width:70%; aspect-ratio:1/1; border:3px solid #fff; border-radius:18px; box-shadow:0 0 0 999px rgba(0,0,0,.45); }
.provider { min-height:100vh; display:grid; place-items:center; background:#f4f8ff; }
.provider-card { width:min(390px,90vw); padding:28px; background:#fff; border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.16); text-align:center; }
.admin-layout { display:grid; gap:10px; }
.admin-table { width:100%; border-collapse:collapse; font-size:12px; }
.admin-table td, .admin-table th { border-bottom:1px solid #e6edf5; padding:8px; text-align:left; }
.notice { background:#f1f7ff; border:1px solid #cfe4ff; padding:12px; border-radius:12px; font-size:13px; }
@media (min-width:900px){ #app { align-items:center; } .phone { width:430px; } }
.member-hero { border-radius:24px; padding:18px; margin-bottom:14px; color:#fff; background:linear-gradient(150deg,#0a5fd0,#003a8c 58%,#06214d); box-shadow:0 16px 38px rgba(11,100,216,.24); }
.member-hero.guest { background:linear-gradient(150deg,#67748a,#253041); }
.member-title { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.member-title h1 { margin:0; color:#fff; }
.member-hero .small { color:rgba(255,255,255,.78); }
.member-hero .badge { background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.28); }
.member-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.qr-card { width:218px; height:218px; padding:12px; border-radius:20px; background:#fff; display:grid; grid-template-columns:repeat(27,1fr); grid-template-rows:repeat(27,1fr); gap:1px; margin:16px auto 8px; box-shadow:0 12px 25px rgba(0,0,0,.22); }
.qr-card i { border-radius:1px; background:#fff; }
.qr-card i.on { background:#101828; }
.acquisition h2 { margin-top:0; }
.upgrade-list { display:grid; gap:10px; margin:12px 0; }
.upgrade-step { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:center; border:1px solid #e2ebf6; border-radius:14px; padding:10px; background:#fbfdff; }
.upgrade-step > span { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#eaf3ff; color:var(--blue); font-weight:900; }
.upgrade-step.done > span { background:#e9f8ef; color:var(--green); }
.upgrade-step p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.success-card { text-align:center; background:linear-gradient(180deg,#fff,#f2fbf6); }
.toggle-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; }

.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.auth-btn{border:1px solid #d9e7f5;background:#fff;border-radius:16px;padding:12px;text-align:left;color:#123;box-shadow:0 8px 18px rgba(30,70,120,.08)}.auth-btn b{display:block;font-size:14px}.auth-btn span{display:block;font-size:11px;color:#607080;margin-top:3px}.auth-btn.google{border-color:#dfe5f3}.auth-btn.apple{border-color:#333}.auth-btn.line{border-color:#06c755}.auth-btn.phone{border-color:#1c8adb}.auth-btn.email{border-color:#7b61ff}.auth-btn:active{transform:translateY(1px)}
.logbox{white-space:pre-wrap;background:#08111f;color:#d6e8ff;border-radius:14px;padding:12px;font-size:10px;line-height:1.45;max-height:220px;overflow:auto}