/* UI: branco gelo + toque dourado */ :root{ --bg0:#f6f7fb; --bg1:#eef1f7; --card:rgba(255,255,255,.86); --stroke:rgba(10,12,16,.10); --text:rgba(10,12,16,.92); --muted:rgba(10,12,16,.62); --accent:#f59e0b; --accent2:#fcd34d; --accent-deep:#d97706; --gold-soft:rgba(245,158,11,.18); --gold-mid:rgba(245,158,11,.28); --good:#46F0A4; --bad:#FF5C7A; --shadow:0 18px 50px rgba(15,23,42,.12); --radius:22px; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; } *{box-sizing:border-box} html,body{height:100%} html{ background: radial-gradient(1200px 900px at 15% -10%, rgba(245,158,11,.14), transparent 58%), radial-gradient(1100px 800px at 110% 10%, rgba(251,191,36,.10), transparent 52%), radial-gradient(900px 700px at 50% 100%, rgba(217,119,6,.06), transparent 50%), linear-gradient(180deg, var(--bg0), var(--bg1)); } body{ margin:0; font-family:var(--sans); color:var(--text); background: transparent; } /* Hero backgrounds full-screen (sem "bordas") */ body.recarga-hero, body.retirada-hero, body.checkin-hero, body.planos-hero, body.afiliados-hero, body.perfil-hero{ position:relative; } body.recarga-hero::before, body.retirada-hero::before, body.checkin-hero::before, body.planos-hero::before, body.afiliados-hero::before, body.perfil-hero::before{ content:""; position:fixed; inset:0; /* fica acima do background do (sem “bordas”) */ z-index:0; pointer-events:none; background-repeat:no-repeat,no-repeat,no-repeat; background-position:top center,top center,top center; background-size:100% 360px,100% 360px,cover; } body.home-hero{ /* GIF visível no topo (até o saldo) */ background-image: radial-gradient(900px 420px at 20% 0%, rgba(245,158,11,.14), transparent 58%), linear-gradient(180deg, rgba(246,247,251,.75), rgba(246,247,251,0)), url("1.png"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: top center, top center, top center; /* menos altura (menos vertical) */ background-size: 100% 360px, 100% 360px, 100% 360px; } body.recarga-hero{ /* Imagem topo específica da recarga */ background:none; } body.recarga-hero::before{ background-image: radial-gradient(900px 420px at 20% 0%, rgba(245,158,11,.12), transparent 58%), linear-gradient(180deg, rgba(246,247,251,.80), rgba(246,247,251,0)), url("https://melhoreseusresultados.com.br/wp-content/uploads/2023/04/lobo-de-wall-street-thumb.jpg"); } body.retirada-hero{ background:none; } body.retirada-hero::before{ background-image: radial-gradient(900px 420px at 20% 0%, rgba(245,158,11,.12), transparent 58%), linear-gradient(180deg, rgba(246,247,251,.80), rgba(246,247,251,0)), url("https://i.pinimg.com/originals/0d/f6/52/0df652594f156489bf90d190e4931a20.jpg"); } body.checkin-hero{ /* igual ao padrão da retirada (full), sem bordas */ background:none; } body.checkin-hero::before{ background-repeat:no-repeat,no-repeat,no-repeat; background-position:top center,top center,top center; background-size:100% 360px,100% 360px,cover; background-image: radial-gradient(900px 420px at 20% 0%, rgba(245,158,11,.12), transparent 58%), linear-gradient(180deg, rgba(246,247,251,.82), rgba(246,247,251,0)), url("https://i.pinimg.com/736x/9e/e4/39/9ee439e8817d756381a46e79da5e77a3.jpg"); } body.planos-hero{ background:none; } body.planos-hero::before{ background-image: radial-gradient(900px 420px at 20% 0%, rgba(245,158,11,.12), transparent 58%), linear-gradient(180deg, rgba(246,247,251,.80), rgba(246,247,251,0)), url("https://i.pinimg.com/originals/0d/f6/52/0df652594f156489bf90d190e4931a20.jpg"); } body.afiliados-hero{ background:none; } /* Afiliados: outer full-bleed horizontal; coluna centralizada (evita sensação de “puxado pro lado”) */ .wrap.wrap-tight.afiliados-wrap{ margin-top:-108px; max-width:none; width:100%; margin-left:0; margin-right:0; padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px)); } .afiliados-stack{ width:100%; max-width:980px; margin-left:auto; margin-right:auto; box-sizing:border-box; } .afiliados-page-title{ margin-top:4px; } .afiliados-wrap .afiliados-stack .grid, .afiliados-grid{ margin-top:10px; width:100%; justify-items:stretch; } body.afiliados-hero::before{ background-image: radial-gradient(900px 420px at 20% 0%, rgba(245,158,11,.12), transparent 58%), linear-gradient(180deg, rgba(246,247,251,.80), rgba(246,247,251,0)), url("https://i.pinimg.com/736x/15/3e/e6/153ee646d1750f64a1cf2a36e9e775f8.jpg"); } body.perfil-hero{ background:none; } body.perfil-hero::before{ background-image: radial-gradient(900px 420px at 20% 0%, rgba(245,158,11,.12), transparent 58%), linear-gradient(180deg, rgba(246,247,251,.84), rgba(246,247,251,.55) 55%, rgba(246,247,251,.88)), url("https://preview.redd.it/wolf-of-wallstreet-wallpaper-v0-v3yn9ri9m4mb1.jpg?width=1080&crop=smart&auto=webp&s=bb4cf553fd9a4c036aa3f9f5dc7d046baf538583"); } a{color:inherit;text-decoration:none} .wrap{max-width:980px;margin:0 auto;padding:2px 18px 190px;overflow-x:hidden} .wrap,.topbar,.nav,.bottom-nav{position:relative; z-index:1} .wrap-tight{padding-top:0} .wrap.full.wrap-tight{margin-top:-72px} .hero-zone{ /* full-bleed: 100% largura da viewport */ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0 0 18px; border-radius:0; background: transparent; border:0; overflow:visible; } .wrap.full{max-width:1100px} .top-bleed{margin:0 -18px; position:relative; z-index:1} .hero-stack{position:relative} .candle-float{ margin-top:10px; margin-bottom:10px; display:flex; justify-content:center; pointer-events:none; position:relative; z-index:2; } .candles{ width:100%; max-width:none; height:130px; display:flex; align-items:flex-end; justify-content:space-between; gap:0; padding:14px 0; border-radius:0; border:0; background: transparent; backdrop-filter: none; box-shadow: none; position:relative; } .candles:after{ content:""; position:absolute; inset:0; border-radius:28px; background: radial-gradient(700px 220px at 50% 40%, rgba(245,158,11,.14), transparent 60%); pointer-events:none; } .c{ width:18px; height:100%; position:relative; opacity:.92; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); animation: floatY 2.6s ease-in-out infinite; } .c .w{ position:absolute; left:50%; transform:translateX(-50%); width:3px; top:10px; bottom:10px; border-radius:2px; background: rgba(255,255,255,.40); } .c .b{ position:absolute; left:50%; transform:translateX(-50%); width:16px; bottom:22px; height:48px; border-radius:6px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.10); } .c.up .b{background: linear-gradient(180deg, rgba(70,240,164,.95), rgba(70,240,164,.22));} .c.down .b{background: linear-gradient(180deg, rgba(255,92,122,.95), rgba(255,92,122,.22));} @keyframes floatY{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-10px)} } /* individual candle motion/shape */ .c1{animation-delay:-.1s}.c2{animation-delay:-.6s}.c3{animation-delay:-1.2s} .c4{animation-delay:-.3s}.c5{animation-delay:-.9s}.c6{animation-delay:-1.5s} .c7{animation-delay:-.45s}.c8{animation-delay:-1.05s}.c9{animation-delay:-1.8s} .c1 .b{height:56px}.c2 .b{height:44px}.c3 .b{height:62px} .c4 .b{height:40px}.c5 .b{height:68px}.c6 .b{height:52px} .c7 .b{height:46px}.c8 .b{height:66px}.c9 .b{height:50px} .c1 .w{top:6px;bottom:16px}.c2 .w{top:18px;bottom:10px}.c3 .w{top:10px;bottom:6px} .c4 .w{top:22px;bottom:12px}.c5 .w{top:6px;bottom:8px}.c6 .w{top:16px;bottom:14px} .c7 .w{top:12px;bottom:18px}.c8 .w{top:8px;bottom:10px}.c9 .w{top:14px;bottom:12px} .c .b{ animation: bodyPulse 1.9s ease-in-out infinite; } @keyframes bodyPulse{ 0%,100%{filter:saturate(1) brightness(1)} 50%{filter:saturate(1.15) brightness(1.08)} } .hero-overlay{ margin-top:-64px; padding:0; position:relative; z-index:6; } .hero-card{ /* full-bleed: 100% largura da viewport (sem “bordas” laterais) */ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0; padding:16px 18px; border-top:1px solid rgba(10,12,16,.08); border-bottom:1px solid rgba(10,12,16,.08); border-left:0; border-right:0; background: radial-gradient(900px 380px at 20% 0%, rgba(245,158,11,.16), transparent 60%), radial-gradient(700px 420px at 100% 30%, rgba(252,211,77,.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow:0 16px 44px rgba(15,23,42,.12); max-width:none; color:var(--text); } .hero-card .balance{ justify-content:center; align-items:center; text-align:center; } .hero-card .balance > div:first-child{ flex:0 0 auto; } .hero-card .balance .unit{ margin-bottom:8px; } .hero-card .balance .big{ text-align:center; } .hero-card .balance .unit{ color:rgba(10,12,16,.68); font-weight:700; } .hero-card .balance .big{ font-weight:600; /* mais fina */ letter-spacing:.2px; /* verde meio vermelho (degradê) */ color:#46F0A4; /* fallback */ background:linear-gradient(90deg, #46F0A4 0%, #7ee7b8 38%, #ffb3c0 70%, #FF5C7A 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-card .chip{ background:rgba(255,255,255,.96); border-color:rgba(251,191,36,.32); color:rgba(10,12,16,.90); box-shadow:0 10px 26px rgba(15,23,42,.10); } /* Cards (home — últimas transações, extrato): mesmo tom do hero-card */ .card.hero-panel{ border:1px solid rgba(10,12,16,.10); background: radial-gradient(900px 360px at 20% 0%, rgba(245,158,11,.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow:0 16px 44px rgba(15,23,42,.12); color:var(--text); } .card.hero-panel .hd h2{color:var(--text)} .card.hero-panel .hd p{color:var(--muted)} .card.hero-panel .section-title h2{color:var(--text)} .card.hero-panel .btn{ background:rgba(255,255,255,.88); border:1px solid rgba(10,12,16,.10); color:var(--text); box-shadow:0 10px 26px rgba(15,23,42,.10); } .card.hero-panel .btn:hover{filter:brightness(1.02)} .card.hero-panel .item{ border:1px solid rgba(10,12,16,.10); background:rgba(255,255,255,.78); box-shadow:none; } .card.hero-panel .coin{ border-color:rgba(10,12,16,.10); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.55)); color:rgba(10,12,16,.76); } .card.hero-panel .name{color:var(--text)} .card.hero-panel .sub{color:var(--muted)} .card.hero-panel .chip{ background:rgba(255,255,255,.92); border-color:rgba(10,12,16,.12); color:rgba(10,12,16,.90); box-shadow:0 10px 26px rgba(15,23,42,.10); } /* Home — “Últimas transações” / link Extrato: mesma largura horizontal do hero-card (saldo) */ .card.hero-panel.hero-panel-fullbleed{ width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0; border-left:0; border-right:0; border-top:1px solid rgba(10,12,16,.08); border-bottom:1px solid rgba(10,12,16,.08); } .card.hero-panel.hero-panel-fullbleed .hd{ padding-left:18px; padding-right:18px; } .card.hero-panel.hero-panel-fullbleed .bd{ padding-left:18px; padding-right:18px; } .quick-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:6px; } @media(max-width:880px){.quick-actions{grid-template-columns:repeat(2,1fr)}} /* Atalhos: padrão para fundos claros (ex.: admin em .card) */ .qa{ padding:12px; border-radius:18px; border:1px solid rgba(10,12,16,.10); background:rgba(255,255,255,.78); display:flex; gap:10px; align-items:center; justify-content:flex-start; } .qa .ic{ width:42px;height:42px;border-radius:16px; border:1px solid rgba(10,12,16,.10); background: linear-gradient(135deg, rgba(245,158,11,.38), rgba(217,119,6,.22)); display:grid;place-items:center; font-family:var(--mono); color:rgba(10,12,16,.85); font-size:14px; } .qa .t{font-size:12px;color:var(--muted)} .qa .b{font-size:13px;font-weight:800;letter-spacing:.2px;color:var(--text)} .hero-card .qa{ border:0.5px solid rgba(251,191,36,.38); background:rgba(255,255,255,.78); box-shadow:0 10px 26px rgba(15,23,42,.10); } .hero-card .qa .ic{ border:0.5px solid rgba(251,191,36,.40); background:linear-gradient(135deg, rgba(245,158,11,.36), rgba(217,119,6,.20)); color:rgba(10,12,16,.86); box-shadow:none; } .hero-card .qa .t{color:rgba(10,12,16,.62);font-weight:700} .hero-card .qa .b{color:rgba(10,12,16,.92);font-weight:850} .quick-actions a.ok{ border:0.5px solid rgba(251,191,36,.55) !important; background:linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.08)) !important; box-shadow:0 10px 26px rgba(15,23,42,.10) !important; } .section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:14px 0 10px} .section-title h2{margin:0;font-size:14px;letter-spacing:.2px} .section-title .muted{font-size:12px;color:var(--muted)} .topbar{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 18px;border:1px solid var(--stroke); background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74)); border-radius:var(--radius); box-shadow:var(--shadow); margin-top:14px; position:sticky; top:14px; backdrop-filter: blur(14px); z-index:20; } .brand{display:flex;align-items:center;gap:12px} .logo{ width:42px;height:42px;border-radius:14px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 50%), linear-gradient(135deg, #fcd34d 0%, #f59e0b 45%, #d97706 100%); box-shadow: 0 12px 30px rgba(245,158,11,.28); border:1px solid rgba(255,255,255,.16); } .brand h1{font-size:14px;margin:0;letter-spacing:.3px} .brand .sub{font-size:12px;color:var(--muted);margin-top:2px} .pill{ display:inline-flex;align-items:center;gap:8px; padding:10px 12px;border-radius:999px;border:1px solid var(--stroke); background:rgba(255,255,255,.05); font-size:12px;color:var(--muted); } .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.78); color:var(--text); box-shadow: 0 10px 26px rgba(15,23,42,.10); cursor:pointer; } .btn-icon{width:40px;height:40px;padding:0;border-radius:14px} .btn-icon svg{width:18px;height:18px;opacity:.95} .btn.primary{ background:linear-gradient(180deg, #fcd34d 0%, #f59e0b 48%, #d97706 100%); border-color:rgba(251,191,36,.45); color:#0c0a09; font-weight:750; box-shadow:0 10px 28px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.28); } .btn.primary:hover{filter:brightness(1.04)} .btn.primary:disabled{ opacity:.58; cursor:not-allowed; filter:none; box-shadow:none; } .btn:active{transform:translateY(1px)} .card{border:1px solid var(--stroke);background:rgba(255,255,255,.86);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .card .hd{padding:16px 16px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .card .hd h2{margin:0;font-size:14px;letter-spacing:.2px} .card .hd p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.35} .card .bd{padding:16px} .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:18px} @media(max-width:880px){.grid{grid-template-columns:1fr}} .wallet{ padding:18px;border-radius:26px; background: radial-gradient(900px 500px at 30% 0%, rgba(245,158,11,.18), transparent 58%), radial-gradient(700px 500px at 100% 40%, rgba(251,191,36,.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72)); border:1px solid rgba(10,12,16,.10); } .balance{display:flex;align-items:flex-end;justify-content:space-between;gap:14px} .balance .big{font-size:34px;letter-spacing:.4px;font-weight:780} .balance .unit{font-size:12px;margin-bottom:6px;color:var(--muted)} .hero-card .balance .unit{color:rgba(10,12,16,.68)} .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.70);border:1px solid rgba(10,12,16,.12);color:rgba(10,12,16,.82);font-size:12px;font-family:var(--mono);max-width:100%;overflow:hidden;text-overflow:ellipsis} .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .mini{flex:1;min-width:180px;padding:12px;border-radius:18px;border:1px solid rgba(10,12,16,.10);background:rgba(255,255,255,.78)} .mini .k{font-size:12px;color:var(--muted)} .mini .v{margin-top:6px;font-size:14px;font-weight:700} .list{display:flex;flex-direction:column;gap:10px} .item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:18px;border:1px solid rgba(10,12,16,.10);background:rgba(255,255,255,.78)} .item .left{min-width:0} .item .right{min-width:0} .item .sub{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis} .left{display:flex;align-items:center;gap:10px} .coin{width:42px;height:42px;border-radius:14px;border:1px solid rgba(10,12,16,.10);background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.55));display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:rgba(10,12,16,.76)} .name{font-size:13px;font-weight:750} .sub{font-size:12px;color:var(--muted);margin-top:3px} .right{text-align:right} .good{color:var(--good)} .bad{color:var(--bad)} .flash-stack{ position:fixed; top:14px; left:14px; right:14px; z-index:90; display:flex; justify-content:center; pointer-events:none; } .flash{ margin:0; padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.92); max-width:min(980px, calc(100vw - 28px)); width:fit-content; pointer-events:auto; } .flash.success{border-color:rgba(70,240,164,.25);background:rgba(70,240,164,.08)} .flash.error{border-color:rgba(255,92,122,.25);background:rgba(255,92,122,.08)} .bottom-nav{ position:fixed; left:0;right:0;bottom:0; padding:14px 14px; background:linear-gradient(180deg, rgba(246,247,251,0), rgba(246,247,251,.86) 28%, rgba(246,247,251,.96)); backdrop-filter: blur(16px) saturate(1.06); -webkit-backdrop-filter: blur(16px) saturate(1.06); z-index:30; } .bottom-nav .bar{ max-width:980px; margin:0 auto; border:1px solid rgba(251,191,36,.26); background: radial-gradient(900px 260px at 50% 0%, rgba(245,158,11,.16), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74)); border-radius:26px; padding:10px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; box-shadow:0 22px 70px rgba(15,23,42,.18); position:relative; overflow:hidden; } .bottom-nav .bar:before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 70%); opacity:.55; } .bottom-nav a{ padding:10px 10px; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:rgba(10,12,16,.60); font-size:11px; font-weight:800; position:relative; z-index:1; transition: transform .16s ease, filter .16s ease, background .18s ease, color .18s ease; } .bottom-nav a span{line-height:1} .bottom-nav svg{ width:22px;height:22px; opacity:.92; transition: transform .18s ease, opacity .18s ease, filter .18s ease; } .bottom-nav a:active{transform:translateY(1px)} .bottom-nav a.active{ color:rgba(10,12,16,.92); background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.07)); border:1px solid rgba(251,191,36,.34); box-shadow:0 12px 30px rgba(245,158,11,.16), inset 0 1px 0 rgba(255,255,255,.22); } .bottom-nav a.active svg{ opacity:1; transform:translateY(-1px) scale(1.03); filter: drop-shadow(0 10px 18px rgba(245,158,11,.18)); } select{width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(10,12,16,.12);background:rgba(255,255,255,.86);color:rgba(10,12,16,.92);outline:none} select:focus{border-color:rgba(245,158,11,.4);box-shadow:0 0 0 2px rgba(245,158,11,.1)} input{width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(10,12,16,.12);background:rgba(255,255,255,.86);color:rgba(10,12,16,.92);outline:none} input:focus{border-color:rgba(245,158,11,.4);box-shadow:0 0 0 2px rgba(245,158,11,.1)} label{font-size:12px;color:rgba(10,12,16,.62)} .form{display:flex;flex-direction:column;gap:10px} .hint{font-size:12px;color:rgba(10,12,16,.62);line-height:1.35} /* Planos (estilo bolsa / horizontal) */ .market-strip{ display:flex; gap:12px; flex-direction:column; overflow:visible; padding:4px 0 10px; } .market-card{ flex:0 0 auto; width:100%; border-radius:22px; border:1px solid rgba(255,255,255,.12); background: var(--market-bg, none), radial-gradient(700px 260px at 30% 0%, rgba(245,158,11,.22), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22)); background-repeat:no-repeat,no-repeat,no-repeat; background-position:center,center,center; background-size:cover,auto,auto; overflow:hidden; position:relative; } .market-card:after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.40) 55%, rgba(0,0,0,.70)), linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 70%); opacity:1; } .market-hd,.market-bd,.market-ft{position:relative;z-index:1} .market-card .ticker .nm, .market-card .quote .price{ color:rgba(255,255,255,1); text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.55); } .market-card .ticker .sym{ color:rgba(255,255,255,.92); text-shadow: 0 1px 0 rgba(0,0,0,.45); } .market-card .meta-pill, .market-card .chip, .market-card .chg{ color:rgba(255,255,255,.98); text-shadow: 0 1px 0 rgba(0,0,0,.45); } .market-card .meta-pill{ border-color: rgba(251,191,36,.22); background: rgba(245,158,11,.10); } .market-card .meta-pill.lucro-pill{ border:none; background:rgba(70,240,164,.14); color:rgba(210,255,237,.98); text-shadow: 0 1px 0 rgba(0,0,0,.55); } /* Perfil */ .saldo-mini{ font-family:var(--mono); font-weight:900; color:var(--good); letter-spacing:.2px; white-space:nowrap; } .perfil-shell{ border:none; background:rgba(255,255,255,.86); border-radius:14px; box-shadow: var(--shadow); } .perfil-shell .bd{padding:14px} .perfil-list{display:flex;flex-direction:column;gap:10px} .perfil-tile{ display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:14px; border:none; border-radius:12px; /* mais quadrado */ background:rgba(255,255,255,.92); } .perfil-tile:active{transform:translateY(1px)} .perfil-ic{ width:44px;height:44px;border-radius:12px; background:rgba(245,158,11,.14); display:grid;place-items:center; font-size:18px; } .perfil-txt .name{font-size:14px;font-weight:850} .perfil-txt .sub{font-size:12px;color:rgba(10,12,16,.62);margin-top:3px} .market-hd{ padding:14px 14px 10px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .ticker{ display:flex; flex-direction:column; gap:6px; min-width:0; } .ticker .sym{ font-size:12px; color:rgba(255,255,255,.60); letter-spacing:.18em; font-family:var(--mono); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ticker .nm{ font-size:14px; font-weight:850; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .market-bd{padding:0 14px 14px} .quote{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:8px; } .quote .price{ font-size:26px; font-weight:900; letter-spacing:.3px; white-space:nowrap; } .quote .chg{ font-family:var(--mono); font-size:12px; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.24); white-space:nowrap; } .chg.up{border-color:rgba(70,240,164,.22);background:rgba(70,240,164,.08);color:rgba(210,255,237,.92)} .chg.down{border-color:rgba(255,92,122,.22);background:rgba(255,92,122,.08);color:rgba(255,214,222,.92)} .meta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; } .meta-pill{ padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); font-size:12px; color:rgba(255,255,255,.72); white-space:nowrap; } .market-ft{ padding:12px 14px 14px; display:flex; justify-content:flex-end; } /* Recarga (PIX / Crypto) */ .page-title{margin:18px 0 10px} .page-title h2{margin:0;font-size:18px;letter-spacing:.2px} .page-title p{margin:6px 0 0;color:rgba(10,12,16,.62);font-size:12px;line-height:1.35} .page-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .seg{ display:flex; gap:6px; padding:6px; border-radius:999px; border:1px solid rgba(10,12,16,.12); background:rgba(255,255,255,.86); width:100%; } .seg button{ appearance:none;border:0;cursor:pointer; padding:10px 12px;border-radius:999px; background:transparent;color:rgba(10,12,16,.70); font-weight:700;font-size:12px; flex:1; } .seg button.active{ background:linear-gradient(180deg, rgba(245,158,11,.24), rgba(245,158,11,.12)); border:1px solid rgba(251,191,36,.35); color:rgba(10,12,16,.92); } .inline-box{ border-radius:22px; border:1px solid rgba(10,12,16,.12); background:rgba(255,255,255,.86); padding:14px; } .mono{font-family:var(--mono)} .codebox{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(10,12,16,.12); background:rgba(255,255,255,.92); color:rgba(10,12,16,.92); font-family:var(--mono); font-size:12px; outline:none; resize:none; } .pay-grid{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start} @media(max-width:880px){.pay-grid{grid-template-columns:1fr}} .qr-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px} .qr-canvas{background:#fff;border-radius:18px;padding:12px} .qr-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:100%} /* Loading overlay */ .loading-overlay{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); backdrop-filter: blur(10px); } .loading-overlay.on{display:flex} .loading-card{ width:min(440px, calc(100% - 36px)); border-radius:26px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); box-shadow:var(--shadow); padding:18px; } .loading-row{display:flex;gap:14px;align-items:center} .spinner{ width:42px;height:42px;border-radius:999px; border:3px solid rgba(255,255,255,.14); border-top-color:rgba(245,158,11,.95); animation: spin 1s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .loading-title{margin:0;font-size:14px;font-weight:800} .loading-sub{margin:6px 0 0;color:rgba(255,255,255,.60);font-size:12px;line-height:1.35} /* Check-in — página única, legível */ .checkin-page-title{margin-top:10px} .checkin-page-title p{max-width:520px} .checkin-card{ margin-top:18px; overflow:hidden; } .checkin-reward{ padding:22px 20px 20px; text-align:center; border-bottom:1px solid var(--stroke); background: radial-gradient(720px 240px at 50% 0%, rgba(245,158,11,.22), transparent 58%), linear-gradient(165deg, rgba(252,211,77,.42) 0%, rgba(245,158,11,.22) 42%, rgba(253,230,138,.12) 100%); } .checkin-reward-label{ display:block; font-size:11px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:rgba(10,12,16,.52); margin-bottom:8px; } .checkin-reward-value{ display:block; font-size:44px; line-height:1.05; font-weight:900; letter-spacing:.02em; color:rgba(10,12,16,.94); } .checkin-card-body{padding:18px 18px 20px} .checkin-wallet-skin{margin-top:0} .checkin-wallet-skin .balance{align-items:flex-end} .checkin-badge{ flex:0 0 auto; align-self:center; padding:10px 14px; border-radius:16px; font-size:12px; font-weight:850; letter-spacing:.06em; border:1px solid rgba(251,191,36,.35); background:linear-gradient(180deg, rgba(245,158,11,.20), rgba(245,158,11,.08)); color:rgba(10,12,16,.82); } .checkin-form{margin-top:18px} .checkin-submit{ width:100%; padding:15px 18px; border-radius:16px; font-size:15px; font-weight:800; } .checkin-timer{ margin-top:18px; padding:14px 16px; border-radius:18px; border:1px solid rgba(10,12,16,.10); background:rgba(246,247,251,.95); display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; } .checkin-timer-label{ font-size:11px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .checkin-timer-value{ font-size:17px; font-weight:850; font-family:var(--mono); letter-spacing:.04em; color:var(--text); } .checkin-footnote{ margin-top:14px; margin-bottom:0; text-align:center; max-width:440px; margin-left:auto; margin-right:auto; } .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Money explosion (check-in sucesso) */ .money-burst{ position:fixed; inset:0; z-index:80; pointer-events:none; overflow:visible; } .money-piece{ position:absolute; top:-10vh; font-size:28px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.55)); opacity:0; animation: moneyFall 1.8s ease-out forwards; will-change: transform, opacity; } @keyframes moneyFall{ 0%{transform:translate3d(var(--x, 0), -10vh, 0) rotate(0deg) scale(.8); opacity:0} 10%{opacity:1} 70%{opacity:1} 100%{transform:translate3d(calc(var(--x, 0) + var(--dx, 0px)), 110vh, 0) rotate(var(--rot, 360deg)) scale(1.15); opacity:0} } /* Admin dashboard (responsivo) */ .admin-shell{ max-width:1100px; margin:14px auto 0; padding:0 18px 190px; display:grid; grid-template-columns: 260px 1fr; gap:14px; position:relative; z-index:1; } @media(max-width:980px){ .admin-shell{grid-template-columns:1fr} } .admin-nav{ position:sticky; top:88px; align-self:start; border:1px solid rgba(10,12,16,.10); background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74)); border-radius:22px; box-shadow:var(--shadow); padding:12px; display:flex; flex-direction:column; gap:8px; } @media(max-width:980px){ .admin-nav{ position:sticky; top:76px; flex-direction:row; overflow:auto; -webkit-overflow-scrolling:touch; gap:10px; padding:10px; border-radius:18px; } } .admin-nav-title{ font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:6px 8px 2px; } @media(max-width:980px){ .admin-nav-title{display:none} } .admin-nav-item{ display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:16px; border:1px solid rgba(10,12,16,.08); background:rgba(255,255,255,.78); color:var(--text); font-weight:850; font-size:12px; white-space:nowrap; } .admin-nav-item.active{ background:linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.08)); border-color:rgba(251,191,36,.35); } .admin-ic{ width:34px;height:34px; border-radius:14px; display:grid; place-items:center; border:1px solid rgba(10,12,16,.10); background:rgba(245,158,11,.14); font-family:var(--mono); font-weight:900; color:rgba(10,12,16,.84); } .admin-nav-sep{ height:1px; background:rgba(10,12,16,.10); margin:4px 4px; } @media(max-width:980px){ .admin-nav-sep{display:none} } .admin-main{ border:1px solid rgba(10,12,16,.10); background:rgba(255,255,255,.86); border-radius:22px; box-shadow:var(--shadow); overflow:hidden; } .admin-header{ padding:16px 16px 12px; border-bottom:1px solid rgba(10,12,16,.08); background:linear-gradient(180deg, rgba(245,158,11,.10), rgba(255,255,255,0)); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .admin-header h2{margin:0;font-size:15px;letter-spacing:.2px} .admin-header p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.35} .admin-content{padding:16px} .admin-content .card{box-shadow:none} .admin-content .grid{margin-top:0}