:root{
  --bg:#141518;--bg-2:#1C1E22;--line:#2C2F35;--text:#E8E9EC;--text-2:#9A9DA4;
  --silver-hi:#F4F5F7;--silver:#C9CCD1;--silver-lo:#8A8E95;--silver-edge:#6E727A;
  --focus:#C9CCD1;--error:#E07A6F;--ok:#8FC9A3;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Space Grotesk","Inter",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:20px;--fs-xl:28px;--fs-2xl:40px;--ls-wide:.08em;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;
  --radius:12px;--radius-pill:999px;--ease-out:cubic-bezier(.16,1,.3,1);--flip-ms:1400ms;
  --coin:322px;--jump:120px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(600px circle at 50% 300px,#23262B 0%,var(--bg) 70%) no-repeat,var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-md);line-height:1.5;min-height:100vh}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
a{color:var(--text)}

.site-header{height:56px;display:flex;justify-content:space-between;align-items:center;padding:0 var(--s8);max-width:1100px;margin:auto}
.logo{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);text-decoration:none}
.logo span{color:var(--text-2)}
.tools{display:flex;align-items:center;gap:var(--s4);font-size:var(--fs-sm)}
.to-offer{display:none;color:var(--text-2);text-decoration:none}
.langs{display:flex;align-items:center;gap:2px;color:var(--line)}
.langs button{background:none;border:0;color:var(--text-2);cursor:pointer;min-width:32px;min-height:44px}
.langs button[aria-pressed="true"]{color:var(--text);font-weight:600}
.icon-btn{background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;font-size:18px}

main{max-width:1100px;margin:auto;padding:0 var(--s8)}
section{text-align:center}
.hero{padding:var(--s8) 0 var(--s12)}
.hero h1{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em}
.sub{color:var(--text-2);margin-top:var(--s2)}

/* moeda */
.stage{position:relative;height:calc(var(--coin) + var(--s16));margin-top:var(--s8);perspective:1200px;display:flex;justify-content:center}
.coin-wrap{width:var(--coin);height:var(--coin);animation:float 4s ease-in-out infinite;position:relative;z-index:1}
.coin{position:relative;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;transform-style:preserve-3d;transform:rotateX(8deg)}
.face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:grid;place-items:center;
  background:repeating-conic-gradient(rgba(255,255,255,.05) 0 1deg,rgba(0,0,0,.05) 1deg 2deg),radial-gradient(circle at 35% 30%,var(--silver-hi),var(--silver) 45%,var(--silver-lo) 100%);
  box-shadow:inset 0 0 0 calc(var(--coin)*.04) var(--silver),inset 0 0 0 calc(var(--coin)*.045) var(--silver-edge),inset 0 0 0 calc(var(--coin)*.06) var(--silver-lo),inset 0 2px 0 calc(var(--coin)*.06) rgba(255,255,255,.35)}
.face::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .2s ease}
.coin:hover .face::after{transform:translateX(120%);transition-duration:.6s}
.tails{transform:rotateX(180deg)}
.mark{font-family:var(--font-display);font-weight:600;font-size:calc(var(--coin)*.22);color:var(--silver-lo);text-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(0,0,0,.25);line-height:1}
.arc{position:absolute;left:0;right:0;font-size:var(--fs-xs);letter-spacing:.3em;color:var(--silver-edge);text-shadow:0 1px 0 rgba(255,255,255,.5);font-weight:600}
.arc.top{top:16%}.arc.bottom{bottom:16%}
.crown{position:absolute;top:24%;width:22%;height:8%;border:1px solid var(--silver-edge);border-top:0;border-radius:0 0 40% 40%;opacity:.7}
.coin::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:repeating-linear-gradient(90deg,var(--silver-edge) 0 2px,var(--silver) 2px 4px);transform:translateZ(-1px)}
.shadow{position:absolute;bottom:var(--s4);left:50%;width:calc(var(--coin)*.8);height:24px;margin-left:calc(var(--coin)*-.4);border-radius:50%;background:rgba(0,0,0,.5);filter:blur(12px);animation:shadowFloat 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes shadowFloat{0%,100%{transform:scale(1)}50%{transform:scale(.96)}}
.flying{animation:none}
.flying+.shadow{animation:none}

.result{font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl);min-height:1.3em;margin-top:var(--s2)}
.result.show{animation:rise .24s var(--ease-out)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.actions{display:flex;justify-content:center;align-items:center;gap:var(--s3);margin-top:var(--s4);flex-wrap:wrap}
.btn-secondary{background:none;border:1px solid var(--line);border-radius:var(--radius-pill);min-height:44px;padding:0 var(--s6);cursor:pointer;transition:border-color .2s}
.btn-secondary:hover{border-color:var(--silver-lo)}
.btn-secondary:disabled{opacity:.5;cursor:default}
.kbd-hint{color:var(--text-2);font-size:var(--fs-sm)}
.score{color:var(--text-2);font-size:var(--fs-sm);margin-top:var(--s4)}
.link{background:none;border:0;color:var(--text-2);text-decoration:underline;cursor:pointer;min-height:44px}

/* cotação */
.quotes{max-width:720px;margin:auto;padding:var(--s12) 0;border-top:1px solid var(--line)}
.q-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}
h2{font-size:var(--fs-lg);font-weight:600}
.q-meta{font-size:var(--fs-xs);color:var(--text-2)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);text-align:left;display:flex;flex-direction:column;gap:var(--s1);min-height:150px}
.card.skel{background:linear-gradient(var(--line),var(--line)) 24px 24px/40% 12px no-repeat,linear-gradient(var(--line),var(--line)) 24px 52px/70% 28px no-repeat,linear-gradient(var(--line),var(--line)) 24px 96px/55% 14px no-repeat,var(--bg-2);animation:pulse 1.2s ease-in-out infinite}
.card.empty{grid-column:1/-1;min-height:auto;color:var(--text-2);text-align:center}
@keyframes pulse{50%{opacity:.55}}
.cur{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);color:var(--text-2)}
.num{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
.price{font-size:var(--fs-xl);line-height:1.2}
.unit{font-size:var(--fs-sm);color:var(--text-2)}
.gram{font-size:var(--fs-md)}
.fine{font-size:var(--fs-xs);color:var(--text-2);margin-top:var(--s3)}
.fine a{color:var(--text-2)}

/* venda */
.sale{padding:var(--s12) 0 var(--s16)}
.sale-card{max-width:560px;margin:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s8)}
.sale-text{color:var(--text-2);margin:var(--s2) 0 var(--s6)}
form{display:grid;gap:var(--s4);text-align:left}
label{display:grid;gap:var(--s1);font-size:var(--fs-sm);color:var(--text-2)}
input,textarea{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);padding:0 var(--s3);font:inherit;min-height:44px}
textarea{padding:var(--s3);resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:0;border-color:transparent}
.invalid{border-color:var(--error)}
.f-err{color:var(--error);font-size:var(--fs-sm);min-height:1.2em}
.btn-primary{background:var(--silver);color:var(--bg);border:0;border-radius:var(--radius-pill);min-height:44px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-primary:hover{background:var(--silver-hi)}
.btn-primary:disabled{opacity:.6;cursor:default}
.f-ok{color:var(--ok);font-size:var(--fs-md)}

.site-footer{text-align:center;color:var(--text-2);font-size:var(--fs-xs);padding:var(--s8);border-top:1px solid var(--line)}
.credits{margin-top:var(--s1)}.credits a{color:var(--text-2)}

@media (max-width:1023px){:root{--coin:240px}}
@media (max-width:599px){
  :root{--coin:220px;--jump:80px}
  .stage{height:calc(var(--coin) + var(--s8));margin-top:var(--s6)}
  .shadow{bottom:0}
  .result{margin-top:0}
  .site-header,main{padding:0 var(--s6)}
  .hero h1{font-size:var(--fs-lg)}
  .cards{grid-template-columns:1fr}
  .to-offer{display:inline}
  .tools{gap:var(--s2)}
  .kbd-hint{display:none}
  .sale-card{padding:var(--s6)}
}
@media (prefers-reduced-motion:reduce){.coin-wrap,.shadow{animation:none}html{scroll-behavior:auto}}

/* moeda realista (imagens do Designer, v2) */
.face{background:none;box-shadow:none}
.face img{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.coin::before{display:none}

.score[hidden]{display:block;visibility:hidden}
.result{min-height:1.5em;line-height:1.5}

/* ===== Tema claro (fundo branco), Prata Designer ===== */
[data-theme="light"]{
  --bg:#FFFFFF;--bg-2:#F6F7F8;--line:#E3E5E8;--text:#16181C;--text-2:#5F636B;
  --focus:#16181C;--error:#C0392B;--ok:#1E8A4C;
}
[data-theme="light"] body{background:radial-gradient(600px circle at 50% 300px,#F1F2F4 0%,#FFFFFF 70%) no-repeat,#FFFFFF}
[data-theme="light"] .coin-wrap{filter:drop-shadow(0 14px 22px rgba(20,22,26,.16)) drop-shadow(0 3px 6px rgba(20,22,26,.10))}
[data-theme="light"] .shadow{background:rgba(20,22,26,.22);filter:blur(14px)}
[data-theme="light"] .btn-primary{background:var(--text);color:#FFFFFF}
[data-theme="light"] .btn-primary:hover{background:#2C2F35}
[data-theme="light"] .btn-secondary:hover{border-color:var(--text-2)}
[data-theme="light"] input,[data-theme="light"] textarea{background:#FFFFFF}
[data-theme="light"] .card,[data-theme="light"] .sale-card{box-shadow:0 1px 2px rgba(20,22,26,.04)}
.theme-ico{width:18px;height:18px;display:block;margin:auto}
html{color-scheme:dark}[data-theme="light"]{color-scheme:light}
@media (max-width:599px){
  .to-offer,.logo{white-space:nowrap}
  .logo{font-size:var(--fs-md)}
  .tools{gap:var(--s1)}
  .icon-btn{min-width:38px}
  .langs button{min-width:28px}
}