:root{
  --bg:#F6F6F8; --card:#FFFFFF; --ink:#111111; --muted:#555555; --soft:#666666; --line:#ECECEF;
  --gold1:#FBE3A0; --gold2:#EBB443; --gold-ink:#7A5A12; --gold-soft:#FFF6DD;
  --green:#1F7A3A; --green-bg:#E5F5EA; --red:#B42318; --red-bg:#FDECEA;
  --grad:linear-gradient(90deg,var(--gold1),var(--gold2));
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#E9E9EE;color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit;font-size:16px}
a{color:var(--gold-ink)}
#app{max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;overflow-x:clip;background:var(--bg);position:relative;padding-bottom:96px}
.page{padding:0 16px}
.white{background:#fff}
.top{display:flex;align-items:center;gap:6px;padding:20px 8px 8px}
.top h1{flex:1;text-align:center;font-size:18px;margin:0;padding-right:44px}
.top h1.left{text-align:left;font-size:24px;font-weight:800;padding:0 0 0 8px}
.icon-btn{width:44px;height:44px;border-radius:999px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.brand{font-size:22px;font-weight:800;letter-spacing:-.3px}
.brand span{color:#B8860B}
.dark .brand span{color:var(--gold2)}
.btn{height:52px;border:none;border-radius:999px;background:var(--grad);color:var(--ink);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.55;cursor:default}
.btn.outline{background:#fff;border:1.5px solid var(--gold2)}
.btn.ghost{background:none;color:var(--gold-ink);height:44px}
.btn.danger{background:#fff;border:1.5px solid #D9D9DE;color:var(--red)}
.btn.sm{height:44px;font-size:14px;width:auto;padding:0 18px}
.card{background:var(--card);border-radius:20px;padding:16px}
.card.bordered{border:1px solid var(--line)}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.muted{color:var(--muted)} .soft{color:var(--soft)}
.small{font-size:13px} .xs{font-size:12px}
.big{font-size:32px;font-weight:800;letter-spacing:-.5px}
h2{font-size:18px;margin:0}
label{font-size:13px;font-weight:600;color:#333}
.field{display:flex;flex-direction:column;gap:6px}
.input{height:50px;border:1px solid #E2E2E6;border-radius:14px;padding:0 16px;background:#FAFAFB;width:100%;color:var(--ink)}
.input:focus,.btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.seg{background:#F2F2F4;border-radius:999px;padding:4px;display:flex}
.seg button{flex:1;height:44px;border:none;border-radius:999px;background:transparent;color:#444;font-weight:600;font-size:15px;cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
.pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.pill{flex-shrink:0;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--gold2);background:#fff;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tag{font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;display:inline-block}
.tag.gold{color:var(--gold-ink);background:var(--gold-soft)}
.tag.green{color:var(--green);background:var(--green-bg)}
.tag.gray{color:#555;background:#F4F4F6}
.tag.red{color:var(--red);background:var(--red-bg)}
.note{font-size:13px;line-height:1.45;border-radius:12px;padding:10px 12px}
.note.warn{background:var(--gold-soft);color:#6B4B00}
.note.err{background:var(--red-bg);color:var(--red);font-weight:600}
.note.ok{background:var(--green-bg);color:var(--green);font-weight:600}
.coin{width:38px;height:38px;border-radius:999px;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;overflow:hidden}
.coin img{width:100%;height:100%;object-fit:cover}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:var(--bg);border-radius:14px;padding:12px}
.stat .k{font-size:11px;color:var(--soft)} .stat .v{font-size:15px;font-weight:800;margin-top:4px}
.bar{height:8px;background:#F0F0F2;border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .3s}
.list{background:#fff;border-radius:18px;overflow:hidden}
.list a,.list button.item{min-height:56px;padding:0 16px;display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;border:none;border-bottom:1px solid #F0F0F2;background:#fff;width:100%;font-size:15px;text-align:left;cursor:pointer}
.list a:last-child{border-bottom:none}
.list .chev{margin-left:auto;color:#999}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;word-break:break-all}
/* Navigation */
nav.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:72px;background:#fff;border-top:1px solid #EEE;display:grid;grid-template-columns:repeat(4,1fr);z-index:20;padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--soft);text-decoration:none;border-top:3px solid transparent}
nav.tabs a.on{color:var(--ink);font-weight:700;border-top-color:var(--gold2)}
.fab{position:fixed;bottom:88px;right:max(16px,calc(50% - 224px));width:56px;height:56px;border-radius:999px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.22);z-index:30;display:block}
.fab img{width:100%;height:100%;display:block}
/* Accueil */
.hero{background:#111;color:#fff;padding:24px 20px 76px}
.float-card{margin:-60px 16px 0;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:20px 16px 0}
.quick a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-size:12px;font-weight:500}
.quick span{width:48px;height:48px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center}
/* Machine ASIC + mineur */
.asic{width:92px;height:92px;flex-shrink:0;border-radius:16px;background:linear-gradient(160deg,#F7F7F9,#E9E9EE);display:flex;align-items:center;justify-content:center;position:relative}
.asic b{position:absolute;bottom:6px;right:6px;font-size:11px;background:#111;color:#fff;border-radius:6px;padding:2px 6px}
.scene{border-radius:22px;background:linear-gradient(180deg,#FFF7E0,#fff);border:1px solid #F3E3B5;padding:12px 12px 4px;position:relative}
.live{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--green);background:var(--green-bg);border-radius:999px;padding:5px 10px}
.live i{width:8px;height:8px;border-radius:999px;background:#1F9D4A;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.pick{transform-box:view-box;transform-origin:72px 96px;animation:swing .9s ease-in-out infinite}
@keyframes swing{0%{transform:rotate(-55deg)}55%{transform:rotate(12deg)}62%{transform:rotate(8deg)}100%{transform:rotate(-55deg)}}
.c1,.c2,.c3{opacity:0;animation:pop 1.8s ease-out infinite}
.c2{animation-name:pop2;animation-delay:.6s}.c3{animation-name:pop3;animation-delay:1.2s}
@keyframes pop{0%,30%{opacity:0;transform:translate(0,0) scale(.4)}40%{opacity:1}100%{opacity:0;transform:translate(-26px,-62px) scale(1)}}
@keyframes pop2{0%,30%{opacity:0;transform:translate(0,0) scale(.4)}40%{opacity:1}100%{opacity:0;transform:translate(4px,-74px) scale(1)}}
@keyframes pop3{0%,30%{opacity:0;transform:translate(0,0) scale(.4)}40%{opacity:1}100%{opacity:0;transform:translate(30px,-58px) scale(1)}}
.chip{transform-box:view-box;transform-origin:140px 130px;animation:chip .9s ease-out infinite}
@keyframes chip{0%,55%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.paused .pick,.paused .c1,.paused .c2,.paused .c3,.paused .chip{animation-play-state:paused}
.counter{background:#111;color:#fff;border-radius:20px;padding:16px}
.counter .bar{background:#2A2A2A}
.tnum{font-variant-numeric:tabular-nums}
/* Feuille de dépôt */
.sheet-bg{position:fixed;inset:0;background:rgba(10,10,10,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:100%;max-width:480px;max-height:92vh;max-height:calc(100dvh - 12px);overflow:auto;overscroll-behavior:contain;border-radius:28px 28px 0 0;padding:10px 20px 28px;animation:up .35s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.grab{width:40px;height:5px;border-radius:999px;background:#E2E2E6;margin:0 auto 14px}
.qr{width:min(220px,34vh);width:min(220px,34dvh);margin:16px auto 0;padding:10px;border-radius:20px;border:1px solid var(--line);background:#fff}
.qr img{width:100%;display:block}
.toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);background:#111;color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:600;z-index:60;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.otp{display:flex;gap:8px}
.otp input{flex:1;min-width:0;height:56px;text-align:center;font-size:22px;font-weight:700;border:1px solid #E2E2E6;border-radius:14px;background:#FAFAFB}
.amount{display:flex;align-items:center;border:1.5px solid var(--gold2);border-radius:16px;height:60px;padding:0 16px;background:#FFFDF6}
.amount input{flex:1;min-width:0;border:none;background:transparent;font-size:26px;font-weight:800;outline:none}
input[type=range]{width:100%;accent-color:#D9A32E;height:28px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
/* En-tête de la fenêtre de dépôt : reste visible quand on fait défiler */
.sheet-head{position:sticky;top:-10px;z-index:2;background:#fff;margin:-10px -20px 0;padding:10px 20px 12px;border-bottom:1px solid #F0F0F2}