:root { --ouro: #e9f97f; --estrela: #ffcc00; --bg: #0f1020; --card: #1b1d36; --txt: #f3f3f7; --sub: #a3a6c2; --ok: #3ddc84; --erro: #ff5c7a; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 'Inter Tight', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--txt); }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: .2em 0; } h2 { font-size: 1.1rem; margin: 1.4em 0 .5em; color: var(--ouro); }
a { color: var(--ouro); }
.card { background: var(--card); border-radius: 14px; padding: 14px; margin: 10px 0; }
label { display: block; font-size: .85rem; color: var(--sub); margin: 8px 0 2px; }
input, select { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #33365a; background: #0b0c1a; color: var(--txt); font: inherit; }
button, .btn { display: inline-block; padding: 11px 16px; border: 0; border-radius: 10px; background: var(--ouro); color: #1a1400; font: 600 1rem system-ui; cursor: pointer; text-decoration: none; }
button.sec { background: #2c2f52; color: var(--txt); } button.perigo { background: var(--erro); color: #fff; }
button:disabled { opacity: .5; }
.linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.sub { color: var(--sub); font-size: .85rem; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .75rem; background: #2c2f52; }
.tag.ok { background: var(--ok); color: #002; } .tag.off { background: var(--erro); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; } td, th { padding: 6px; border-bottom: 1px solid #2c2f52; text-align: left; }
.aviso { background: #3a2f00; border-left: 4px solid var(--ouro); padding: 10px; border-radius: 8px; font-size: .9rem; }
nav { display: flex; gap: 14px; font-size: .9rem; margin-bottom: 8px; }
/* foto do local + marcador da estrela */
.foto-wrap { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; }
.foto-wrap img { display: block; max-width: 100%; border-radius: 10px; }
.foto-wrap .pino { position: absolute; transform: translate(-50%, -50%); font-size: 34px; pointer-events: none; filter: drop-shadow(0 0 8px var(--estrela)); }
/* carta da oferta (flip 3D) */
.carta { width: 240px; height: 340px; perspective: 900px; margin: 0 auto; }
.carta-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: virar 1.2s ease-out forwards; }
.carta-in > div { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.carta .verso { background: radial-gradient(circle, #ffe680, #b8860b); font-size: 90px; }
.carta .frente { transform: rotateY(180deg); background: linear-gradient(160deg, #2a1f6b, #7b2ff7); border: 3px solid var(--ouro); box-shadow: 0 0 40px #ffcc0088; }
.carta.rara .frente { background: linear-gradient(160deg, #0b2a6b, #1f8bff); box-shadow: 0 0 50px #4fb0ffaa; }
.carta.lendaria .frente { background: linear-gradient(160deg, #3a0b6b, #c02fff); box-shadow: 0 0 70px #d27bffcc; }
.progresso { height: 10px; border-radius: 9px; background: #2c2f52; overflow: hidden; margin-top: 8px; } .progresso i { display: block; height: 100%; background: var(--ouro); }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--txt); font-size: .85rem; } .check input { width: auto; margin-top: 3px; }
.carta .pct { font-size: 64px; font-weight: 800; color: var(--ouro); line-height: 1; }
@keyframes virar { 0% { transform: scale(.2) rotateY(0); } 50% { transform: scale(1.05) rotateY(540deg); } 100% { transform: scale(1) rotateY(900deg); } }
[hidden] { display: none !important; }

/* aviso de exclusão de conta */
dialog { border: 0; border-radius: 18px; padding: 20px; max-width: 380px; width: calc(100% - 32px); background: var(--card); color: var(--txt); }
dialog::backdrop { background: #000a; }