:root{--bg:#061120;--card:#0d1b2f;--card2:#111f35;--gold:#d4af37;--gold2:#f3d77a;--silver:#d9e1ea;--muted:#91a1b5;--line:rgba(255,255,255,.1);--green:#42e08f;--red:#ff5c6c;--yellow:#ffd166;--blue:#5bc0ff;--shadow:0 18px 60px rgba(0,0,0,.42)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top,#142642 0,#061120 45%,#03070d 100%);color:#fff}body{padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom)}button,input,select{font:inherit}.app-shell{width:min(460px,100%);margin:0 auto;padding:20px 0 28px}.hero-card,.password-card,.settings-card,.security-card{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:18px;margin:14px 0;backdrop-filter:blur(12px)}.top-row{display:flex;align-items:center;justify-content:space-between}.logo{width:86px;height:86px;border-radius:24px;object-fit:cover;box-shadow:0 10px 32px rgba(0,0,0,.38)}h1{font-size:36px;letter-spacing:5px;margin:10px 0 0;background:linear-gradient(90deg,var(--gold2),#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-card p{margin:6px 0 0;color:var(--muted);letter-spacing:.8px}.language-select{background:#09182b;color:var(--silver);border:1px solid rgba(212,175,55,.5);border-radius:14px;padding:10px 12px}.section-label{display:block;color:var(--gold2);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:1.4px;margin-bottom:10px}.password-box{display:flex;gap:10px;background:#071223;border:1px solid rgba(212,175,55,.32);border-radius:18px;padding:10px}#passwordOutput{width:100%;background:transparent;border:0;outline:0;color:#fff;font-size:22px;font-weight:800;letter-spacing:1px}.icon-btn,.primary-btn,.mode-btn,.stepper button{border:0;cursor:pointer;border-radius:15px;font-weight:800}.icon-btn{background:rgba(255,255,255,.08);color:var(--silver);padding:10px 12px}.primary-btn{width:100%;margin-top:16px;padding:16px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#061120;box-shadow:0 12px 32px rgba(212,175,55,.25);text-transform:uppercase;letter-spacing:1px}.strength-line{margin-top:12px;color:var(--muted)}.message{height:20px;margin:10px 0 0;color:var(--green);font-weight:700}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-btn{min-height:48px;background:rgba(255,255,255,.06);color:var(--silver);border:1px solid var(--line);padding:10px}.mode-btn.active{background:linear-gradient(135deg,rgba(212,175,55,.95),rgba(243,215,122,.92));color:#061120;border-color:transparent}.length-row{display:flex;align-items:center;justify-content:space-between;margin:18px 0;color:var(--silver)}.stepper{display:flex;align-items:center;gap:12px;background:#071223;border:1px solid var(--line);border-radius:16px;padding:6px}.stepper button{width:38px;height:38px;background:rgba(255,255,255,.08);color:#fff;font-size:22px}.stepper strong{min-width:28px;text-align:center}.custom-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px;color:var(--silver)}.custom-panel label{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:12px}input[type=checkbox]{accent-color:var(--gold)}.security-card{color:var(--muted);font-size:14px}.security-card strong{color:var(--silver)}@media(max-width:380px){.mode-grid,.custom-panel{grid-template-columns:1fr}h1{font-size:30px}.password-box{flex-direction:column}.icon-btn{width:100%}} /* NOVO FUNDO PREMIUM CLEAN */ body{ background:#0f172a !important; background-image: radial-gradient(circle at 50% 0%, rgba(212,175,55,.12), transparent 28%), linear-gradient(180deg,#0f172a 0%, #111827 55%, #0b1220 100%) !important; } body::before, body::after{ display:none !important; } /* PASSPRO - FUNDO CORRIGIDO PARA PAGES Alteração apenas visual do fundo da página. */ html, body { background: #0b1220 !important; background-image: radial-gradient(circle at 50% 0%, rgba(212,175,55,0.10), transparent 26%), linear-gradient(180deg, #0b1220 0%, #101828 55%, #070b12 100%) !important; background-attachment: fixed !important; } /* PASSPRO V4 - MELHORIAS VISUAIS LEVES Mantém estrutura, funções e layout geral. */ /* fundo premium com glow discreto */ html, body { background: radial-gradient(circle at 50% 4%, rgba(212,175,55,0.13), transparent 23%), radial-gradient(circle at 50% 36%, rgba(73,130,255,0.08), transparent 30%), linear-gradient(180deg, #070d18 0%, #0b1220 42%, #060a12 100%) !important; background-attachment: fixed !important; } /* brilho sutil atrás dos cards, sem desenhos extras */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 18%, rgba(212,175,55,0.09), transparent 18%), radial-gradient(circle at 50% 52%, rgba(80,150,255,0.07), transparent 24%); z-index: -1; } body::after { display: none !important; } /* card superior um pouco mais compacto */ .hero-card { min-height: 150px !important; padding-top: 22px !important; padding-bottom: 22px !important; } /* logo levemente menor para sobrar mais tela */ .app-logo { width: 82px !important; height: 82px !important; } /* título continua premium, só com mais harmonia */ h1 { letter-spacing: .14em !important; } /* subtítulo mais legível */ .hero-card p { color: rgba(226,232,240,.82) !important; } /* card de senha com destaque mais premium */ .password-box { background: rgba(2, 8, 18, .76) !important; border: 1.5px solid rgba(240,214,107,.58) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(212,175,55,.08), 0 18px 40px rgba(0,0,0,.22) !important; } /* botão copiar com contraste melhor */ .copy-btn { background: rgba(255,255,255,.09) !important; } /* botão principal com glow mais refinado */ .primary-btn { box-shadow: 0 16px 38px rgba(212,175,55,.24), 0 0 36px rgba(212,175,55,.10) !important; } /* cards com sensação de vidro mais limpa */ .glass-card { background: linear-gradient(180deg, rgba(28,42,61,.88), rgba(13,23,38,.94)) !important; border-color: rgba(255,255,255,.12) !important; } /* mobile: reduz ainda mais o cabeçalho sem quebrar o visual */ @media(max-width:520px){ .hero-card { min-height: 138px !important; } .app-logo { width: 76px !important; height: 76px !important; } }