/* ============================
THEME TOKENS
============================= */
:root{
color-scheme: dark;
--bg:#0f1117; /* fundo geral */
--panel:#0b1220; /* fundo principal */
--sidebar:#0b1220; /* fundo da sidebar */
--surface:#111827; /* caixas */
--accent:#00c2ff; /* azul primário */
--accent-2:#6b5cff; /* roxo/azul 2 */
--muted:#94a3b8; /* texto secundário */
--text:#e6edf6; /* texto principal */
--danger:#ef4444; /* erro */
--ok:#22c55e; /* ok */
--warn:#eab308; /* aviso */
--border:rgba(148,163,184,0.16);
--radius:14px;
--shadow-1:0 12px 30px rgba(0,0,0,.35);
--shadow-2:0 24px 60px rgba(0,0,0,.55);
--outline:rgba(0,194,255,.8);
}
/* ============================
RESET / BASE
============================= */
*{
box-sizing:border-box;
}
html,body{
height:100%;
}
body{
margin:0;
min-height:100vh;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
background:
radial-gradient(1100px 700px at -10% -20%, rgba(59,130,246,.10), transparent 45%),
radial-gradient(900px 600px at 110% -10%, rgba(99,102,241,.10), transparent 45%),
var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
a{
color:inherit;
text-decoration:none;
}
button{
font:inherit;
border:0;
cursor:pointer;
background:none;
}
/* Scrollbar */
*::-webkit-scrollbar{
width:10px;
height:10px;
}
*::-webkit-scrollbar-track{
background: rgba(148,163,184,.08);
}
*::-webkit-scrollbar-thumb{
background: rgba(148,163,184,.28);
border-radius: 999px;
border:2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{
background: rgba(148,163,184,.45);
}
/* Focus visível */
:focus-visible{
outline:2px solid var(--outline);
outline-offset:2px;
border-radius:8px;
}
/* Acessibilidade: reduz animações se o usuário pedir */
@media (prefers-reduced-motion: reduce){
*{
scroll-behavior:auto !important;
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
}
}
/* ============================
LAYOUT
============================= */
.container{
display:grid;
grid-template-columns: 260px 1fr;
min-height:100vh;
width:100%; /* ocupa largura toda */
}
/* ============================
SIDEBAR
============================= */
.sidebar{
position:sticky;
top:0;
height:100vh;
background:
linear-gradient(180deg, rgba(11,18,32,.98), #0a1020 60%);
border-right:1px solid var(--border);
padding:18px;
overflow-y:auto;
box-shadow: var(--shadow-1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.logo-img{
width:190px;
height:auto;
display:block;
margin:0 auto 16px;
filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));
user-select:none;
}
/* Menu em grid (quadrados) */
.menu{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:8px;
list-style:none;
padding:0;
margin:6px 0 0;
}
.menu-title{
grid-column: 1 / -1;
margin: 8px 0 4px;
padding: 8px 10px;
font-weight: 800;
letter-spacing:.06em;
text-transform: uppercase;
font-size: .78rem;
color:#e9eefb;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,.03);
}
.menu li{
list-style:none;
}
.menu li a{
position: relative;
width:72px;
height:72px;
display:block;
overflow:hidden;
border-radius:14px;
border:1px solid var(--border);
background:
radial-gradient(circle at 0 0, rgba(148,163,184,.16), transparent 55%),
var(--surface);
box-shadow: var(--shadow-1);
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease,
background .22s ease;
transform-origin:center;
}
.menu li a::after{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at 10% 0%, rgba(255,255,255,.16), transparent 60%);
opacity:0;
transition:opacity .22s ease;
}
.menu li a:hover{
transform: translateY(-2px) scale(1.02);
box-shadow: var(--shadow-2);
border-color:transparent;
}
.menu li a:hover::after{
opacity:1;
}
.menu li a:active{
transform:translateY(0) scale(.98);
}
.menu li a img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit;
pointer-events:none;
}
/* ============================
MAIN / CONTENT
============================= */
#mainContent{
padding:28px;
background:
radial-gradient(1800px 900px at 0% 0%, rgba(15,23,42,.85), transparent 60%),
linear-gradient(180deg, rgba(14,26,51,.55), rgba(14,26,51,.35)),
var(--panel);
min-height:100vh;
}
/* Cards topo */
.cards{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:20px;
}
.card{
position:relative;
background: linear-gradient(180deg, rgba(24,40,76,.35), rgba(14,26,51,.65));
border:1px solid var(--border);
border-radius: var(--radius);
padding:18px;
flex:1 1 260px;
box-shadow: var(--shadow-1);
overflow:hidden;
transition:
transform .18s ease,
box-shadow .25s ease,
border-color .2s ease,
background .25s ease;
}
.card::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%);
opacity:.0;
pointer-events:none;
transition:opacity .22s ease;
}
.card:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-2);
border-color: rgba(148,163,184,.35);
}
.card:hover::before{
opacity:.9;
}
.card h3{
margin:0 0 6px;
font-size:1.05rem;
letter-spacing:.02em;
}
.card p{
margin:0 0 8px;
color:var(--muted);
}
.progress{
width:100%;
height:12px;
border-radius:999px;
overflow:hidden;
background: rgba(255,255,255,.06);
border:1px solid var(--border);
}
.progress-bar{
height:100%;
width:0%;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
box-shadow: 0 0 16px rgba(0,194,255,.45);
border-radius:999px;
transition: width .6s ease;
}
/* Section padrão */
.section{
position:relative;
background: linear-gradient(180deg, rgba(24,40,76,.35), rgba(14,26,51,.65));
border:1px solid var(--border);
border-radius:var(--radius);
padding:10px;
margin-bottom:20px;
box-shadow: var(--shadow-1);
overflow:hidden;
}
.section::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(120% 120% at 0 0, rgba(184, 159, 148, 0.16), transparent 60%);
mix-blend-mode:soft-light;
opacity:.0;
pointer-events:none;
transition:opacity .24s ease;
}
.section:hover::before{
opacity:.9;
}
.section h2{
margin:0 0 12px;
font-size:1.1rem;
font-weight:800;
}
/* Grid utilitária */
.section-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}
.section-full{
grid-column:1 / -1;
}
.mainBtn{
padding:12px 14px;
border:0;
border-radius:12px;
font-weight:800;
cursor:pointer;
background: linear-gradient(135deg,var(--accent),var(--accent-2));
color:#0b0f16;
box-shadow: 0 12px 28px rgba(0,194,255,.28);
transition:
transform .15s ease,
filter .15s ease,
box-shadow .18s ease;
}
.mainBtn:hover{
transform: translateY(-1px);
filter: brightness(1.04);
box-shadow: 0 16px 36px rgba(0,194,255,.38);
}
/* ============================
STATUS EM TEMPO REAL (cards)
============================= */
.baseStatus{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap:18px;
}
.baseCard{
position:relative;
background: var(--surface);
border:1px solid var(--border);
border-radius:12px;
padding:16px;
box-shadow: var(--shadow-1);
transition:
transform .2s ease,
box-shadow .25s ease,
border-color .2s ease,
background .2s ease;
}
.baseCard:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-2);
border-color: rgba(148,163,184,.4);
}
/* Indicador no canto */
.state-indicator{
position:absolute;
top:12px;
right:12px;
width:20px;
height:20px;
border-radius:50%;
filter: drop-shadow(0 0 10px rgba(0,194,255,.55));
}
/* Loading: anel girando */
.baseCard.loading .state-indicator{
background: conic-gradient(from 0turn, var(--accent) 0 25%, transparent 25% 100%);
-webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 60%);
mask: radial-gradient(farthest-side, transparent 58%, #000 60%);
animation: spin .9s linear infinite;
}
/* Active: check */
.baseCard.active .state-indicator{
background-color: var(--ok);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/85% 85%;
mask: url('data:image/svg+xml;utf8,') no-repeat center/85% 85%;
}
/* Error: triângulo */
.baseCard.error .state-indicator{
background-color: var(--danger);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/90% 90%;
mask: url('data:image/svg+xml;utf8,') no-repeat center/90% 90%;
}
@keyframes spin{
to{ transform: rotate(360deg); }
}
/* ============================
MODAL
============================= */
.modal{
display:none;
position: fixed;
inset:0;
background: rgba(1, 3, 10, 0.77);
z-index: 1200;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.modal.show{
display:block;
}
.modal-content{
background: linear-gradient(180deg, rgba(9, 14, 26, 0.55), rgba(7, 12, 22, 0.85));
border:1px solid var(--border);
color:var(--text);
border-radius:18px;
width: min(780px, 94vw);
margin: 8vh auto;
padding: 18px 18px 8px;
box-shadow: var(--shadow-2);
position: relative;
}
#modalBody{
padding: 8px;
max-height: calc(80vh - 80px);
overflow:auto;
}
.close{
position:absolute;
right:10px;
top:8px;
font-size:26px;
line-height:26px;
color: var(--muted);
cursor:pointer;
user-select:none;
border-radius:10px;
padding:2px 8px;
transition:
background .12s ease,
color .12s ease,
transform .07s ease;
}
.close:hover{
background: rgba(148,163,184,0.08);
color: var(--text);
}
.close:active{
transform: translateY(1px);
}
/* ============================
LOGIN OVERLAY (MEGA BUSCAS)
============================= */
#loginOverlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:1100;
background:
radial-gradient(1200px 700px at 50% -10%, rgba(0,194,255,.24), transparent 55%),
radial-gradient(900px 900px at 0% 100%, rgba(56,189,248,.16), transparent 55%),
rgba(2,6,23,0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* CARD DO LOGIN */
.login-box{
width:min(360px, 90vw);
background:
radial-gradient(220px 220px at 0% 0%, rgba(56,189,248,.18), transparent 60%),
radial-gradient(220px 220px at 100% 0%, rgba(34,197,94,.15), transparent 60%),
linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.94));
border-radius: 20px;
padding: 20px 18px 18px;
border:1px solid rgba(148,163,184,.45);
box-shadow:
0 26px 80px rgba(15,23,42,.95),
0 0 0 1px rgba(15,23,42,.9),
0 0 32px rgba(56,189,248,.28);
animation: login-pop .18s ease-out;
display:flex;
flex-direction:column;
align-items:center;
position:relative;
overflow:hidden;
}
/* borda neon animada sutil */
.login-box::before{
content:'';
position:absolute;
inset:-1px;
border-radius: inherit;
background:
linear-gradient(120deg,
rgba(34,197,235,.22),
rgba(52,211,153,.12),
rgba(37,99,235,.26),
rgba(34,197,235,.22));
opacity:.0;
mix-blend-mode:screen;
transition:opacity .25s ease;
pointer-events:none;
}
.login-box:hover::before{
opacity:.6;
}
@keyframes login-pop{
from{
transform: translateY(10px) scale(.97);
opacity:.0;
}
to{
transform:none;
opacity:1;
}
}
/* TOPO (logo + texto) */
.login-brand{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px dashed rgba(51,65,85,.8);
}
/* LOGO SEM CONTAINER / SEM CARD */
.brand-mark{
width: 150px;
height:auto;
border-radius: 0;
background:none;
padding:0;
border:none;
box-shadow:none;
object-fit:contain;
filter: drop-shadow(0 0 14px rgba(56,189,248,.45));
animation: logo-floating 4s ease-in-out infinite;
}
@keyframes logo-floating{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-4px); }
}
/* título “Login” */
.login-box h2{
margin:0;
font-size:1.1rem;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
color:#e5f0ff;
text-align:center;
}
/* inputs */
.login-box input{
width:100%;
padding:11px 13px;
margin:8px 0;
border-radius:12px;
border:1px solid rgba(148,163,184,.45);
background: radial-gradient(200px 200px at 0 0, rgba(15,23,42,.9), rgba(15,23,42,.96));
color:#e2e8f0;
outline:none;
font-size:.92rem;
transition:
border-color .15s ease,
box-shadow .15s ease,
background .15s ease,
transform .08s ease;
}
.login-box input::placeholder{
color: rgba(148,163,184,.75);
}
.login-box input:hover{
border-color: rgba(56,189,248,.65);
}
.login-box input:focus{
border-color: rgba(56,189,248,.85);
box-shadow:
0 0 0 1px rgba(56,189,248,.35),
0 0 22px rgba(56,189,248,.35);
background: radial-gradient(220px 220px at 0 0, rgba(15,23,42,.98), rgba(15,23,42,.96));
transform: translateY(-1px);
}
/* BOTÃO LOGIN – maior e chamativo */
#btnLogin{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
margin-top:14px;
padding:13px 16px;
border-radius:999px;
border:none;
cursor:pointer;
background:
linear-gradient(120deg, #22e07b, #10c468, #22e07b);
background-size: 180% 180%;
color:#020617;
font-weight:800;
font-size:1rem;
letter-spacing:.03em;
box-shadow:
0 16px 40px rgba(16,196,104,.55),
0 0 0 1px rgba(21,94,59,.9);
transition:
transform .08s ease,
box-shadow .15s ease,
filter .12s ease,
background-position .6s ease;
}
#btnLogin:hover{
background-position: 100% 0%;
filter: brightness(1.05);
box-shadow:
0 20px 46px rgba(16,196,104,.7),
0 0 0 1px rgba(22,163,74,1);
transform: translateY(-1px);
}
#btnLogin:active{
transform: translateY(1px) scale(.98);
box-shadow:
0 10px 26px rgba(16,196,104,.55),
0 0 0 1px rgba(21,94,59,.9);
}
/* estado “carregando” opcional */
#btnLogin.is-loading{
cursor:wait;
filter:saturate(.9) brightness(.92);
position:relative;
}
#btnLogin.is-loading::after{
content:'';
position:absolute;
inset:6px;
border-radius:999px;
border:2px solid rgba(15,23,42,.35);
border-top-color:#0F141ECC;
animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin{
to{ transform:rotate(360deg); }
}
/* MSG ERRO / STATUS */
#loginMsg{
min-height:18px;
margin-top:10px;
font-size:.9rem;
color:var(--danger);
text-align:center;
opacity:.9;
}
/* RESPONSIVO PEQUENO */
@media (max-width:480px){
.login-box{
width:88vw;
padding:18px 14px 16px;
border-radius:18px;
}
.brand-mark{
width:130px;
}
}
/* ============================
UTILS
============================= */
.hidden{
display:none !important;
}
.text-muted{
color:var(--muted) !important;
}
/* ============================
RESPONSIVE QUICK TWEAKS
(o resto fica no styles_mobilee.css)
============================= */
@media (max-width: 980px){
.container{
grid-template-columns: 220px 1fr;
}
}
@media (max-width: 780px){
.container{
grid-template-columns: 1fr;
}
.sidebar{
position:relative;
height:auto;
}
.menu{
grid-template-columns: repeat(4, 1fr);
}
#mainContent{
padding:22px;
}
.section-grid{
grid-template-columns:1fr;
}
}
/* === Checker 99POP === */
.c99-wrap{
display: grid;
grid-template-columns: 2fr 320px;
gap: 20px;
align-items: stretch;
width: 100%;
max-width: 1200px;
}
@media (max-width: 980px){
.c99-wrap{
grid-template-columns: 1fr;
}
}
.c99-left{
display:flex;
flex-direction: column;
min-height: 100%;
background:#090d11;
border-radius:12px;
padding:20px;
box-shadow:0 4px 15px #060a11a8;
}
.c99-title{
text-align:center;
font-size:28px;
color:#00ff7f;
margin-bottom:12px;
font-weight:700;
letter-spacing:.5px;
}
/* área do textarea */
.c99-textarea{
width:100%;
min-height:200px;
padding:12px;
border-radius:10px;
border:2px solid #1313131a;
background:#1313131a;
color:#fff;
font-size:16px;
resize:none;
outline:none;
}
/* botões diretamente embaixo do textarea */
.c99-controls{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
}
.c99-btn{
padding:10px 15px;
border:none;
border-radius:10px;
font-weight:700;
cursor:pointer;
transition: all .2s ease;
color:#000;
background:linear-gradient(45deg,#00ff7f,#00cc5c);
box-shadow:0 0 10px #03001d69;
}
.c99-btn:hover{
transform:translateY(-2px);
opacity:.9;
}
.c99-btn:disabled{
opacity:.5;
cursor:not-allowed;
}
/* bloco final de resultados – usado por todos os checkers (Aprovados e Reprovados) */
.c99-results{
margin-top:14px;
display:flex;
flex-direction:column;
gap:14px;
}
.c99-block{
background:#1313131A;
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
padding:12px;
}
/* Cabeçalho: título + botão Copiar CPFs */
.c99-block-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:6px;
}
.c99-block-head h3{
margin:0;
font-size:14px;
font-weight:800;
letter-spacing:.3px;
color:#e5e7eb;
}
/* Card onde ficam as linhas (tanto aprovados quanto reprovados) */
.c99-result{
display:none;
flex-direction:column;
gap:6px;
width:100%;
max-height:220px;
padding:8px 8px 10px;
border-radius:14px;
overflow-y:auto;
position:relative;
/* mesmo “climão” do EAR */
background:linear-gradient(145deg, rgba(15,23,42,.95), rgba(2,6,23,1));
border:1px solid rgba(30,64,175,.8);
box-shadow:
inset 0 0 0 1px rgba(15,23,42,1),
0 12px 28px rgba(15,23,42,.9);
}
/* se você quiser diferenciar levemente na cor da borda: */
.c99-result.c99-green{ /* aprovados */
border-color:rgba(34,197,94,.9);
}
.c99-result.c99-red{ /* reprovados */
border-color:rgba(248,113,113,.9);
}
.c99-pre{
white-space:pre-wrap;
word-wrap:break-word;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size:13px;
line-height:1.35;
}
/* botão de copiar antigo, se ainda for usado dentro do card */
.c99-copy{
position:absolute;
top:10px;
right:10px;
padding:6px 12px;
border:none;
border-radius:999px;
background:rgba(15,23,42,.95);
color:#e5e7eb;
cursor:pointer;
font-size:11px;
font-weight:600;
transition:.2s;
}
.c99-copy:hover{
background:rgba(15,23,42,1);
transform:translateY(-1px);
}
.c99-pre{
white-space:pre-wrap;
word-wrap:break-word;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size:13px;
line-height:1.35;
}
.c99-copy{
position:absolute;
top:10px;
right:10px;
padding:6px 12px;
border:none;
border-radius:8px;
background:rgba(0,0,0,0.5);
color:#fff;
cursor:pointer;
transition:.2s;
}
.c99-copy:hover{
background:rgba(0,0,0,0.8);
transform:translateY(-1px);
}
/* painel direito */
.c99-right{
display:flex;
flex-direction:column;
min-height:100%;
background:#090d11;
border-radius:12px;
padding:15px;
box-shadow:0 4px 15px #090d11;
gap:15px;
}
.c99-subtitle{
text-align:center;
color:#00ffff81;
font-weight:700;
letter-spacing:.4px;
}
.c99-stats{
display:flex;
flex-direction:column;
gap:10px;
}
.c99-stat{
display:flex;
justify-content:space-between;
padding:8px 12px;
border-radius:8px;
font-weight:700;
}
.c99-carregados{
background:#141414b9;
color:#ffffff7e;
}
.c99-aprovadas{
background:#141414b9;
color:rgba(0, 255, 0, 0.514);
}
.c99-reprovadas{
background:#141414b9;
color:rgba(255, 0, 0, 0.438);
}
/* separador (direita) */
.c99-sep{
height:150px;
padding:10px;
border-radius:10px;
border:2px solid #0a1120;
background:#1313131A;
color:#fff;
resize:none;
outline:none;
}
.c99-btn--cyan{
background:linear-gradient(45deg,#00ffff7a,#00cccc7e);
color:#000;
}
/* =======================
CONSULTA DE PLACA – dark neutro + copy
======================= */
/* paleta neutra + acento bem sutil */
:root{
--bg:#0b0f14;
--panel:#0f141b;
--card:#0f141b;
--stroke:#1b2330;
--stroke-soft:#151b24;
--txt:#e5e7eb;
--txt-muted:#9aa4b2;
--accent:#2fc7b4;
--accent-weak:#1c3a3a;
}
.placa-wrap{
display:flex;
justify-content:center;
align-items:flex-start;
width:100%;
max-width:980px;
margin:0 auto;
padding:20px;
}
.placa-panel{
flex:1;
background:#0d1117;
border-radius:12px;
box-shadow:0 4px 15px rgba(0,0,0,.45);
padding:22px;
color:#e6edf3;
border:1px solid rgba(255,255,255,.06);
}
.placa-title{
display:flex;
align-items:center;
gap:10px;
justify-content:center;
font-size:22px;
font-weight:800;
color:#c9d1d9;
letter-spacing:.3px;
margin-bottom:6px;
}
.placa-title .placa-badge{
font-size:.75rem;
font-weight:700;
color:#a1a1aa;
background:#111827;
border:1px solid rgba(255,255,255,.08);
padding:4px 8px;
border-radius:999px;
}
.placa-hero{
display:grid;
grid-template-columns:1fr auto;
gap:14px;
align-items:center;
margin-bottom:14px;
}
.placa-hero .left{
display:flex;
flex-direction:column;
gap:6px;
}
.placa-hero .hint{
font-size:.9rem;
color:#9aa4ae;
}
.placa-hero .examples{
font-size:.8rem;
color:#8b949e;
}
.placa-hero .right{
display:flex;
gap:8px;
}
.placa-form{
display:flex;
gap:10px;
align-items:center;
}
.placa-input{
flex:1;
max-width:360px;
padding:10px 14px;
font-size:15px;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
background:#0b0f14;
color:#e6edf3;
outline:none;
}
.placa-input::placeholder{
color:#6b7280;
}
.placa-input:focus{
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,.2);
}
.placa-btn{
padding:10px 16px;
border:none;
border-radius:10px;
font-weight:700;
cursor:pointer;
color:#e6edf3;
background:#1f2937;
border:1px solid rgba(255,255,255,.08);
transition:.2s;
}
.placa-btn:hover{
transform:translateY(-2px);
background:#273244;
}
.placa-btn[disabled]{
opacity:.6;
cursor:not-allowed;
transform:none;
}
.placa-btn--primary{
background:#2563eb;
border-color:#2563eb;
color:#fff;
}
.placa-btn--primary:hover{
background:#1d4ed8;
}
.placa-valid{
font-size:.82rem;
margin-left:4px;
}
.placa-valid.ok{
color:#22c55e;
}
.placa-valid.err{
color:#ef4444;
}
.placa-card{
background:#0b0f14;
border-radius:12px;
padding:16px;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.placa-actions{
display:flex;
gap:10px;
align-items:center;
justify-content:flex-start;
flex-wrap:nowrap;
margin-bottom:10px;
}
.placa-copy{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.12);
background:rgba(3,152,252,.08);
color:#bfe3ff;
font-weight:600;
cursor:pointer;
}
.placa-copy:hover{
filter:brightness(1.08);
}
.placa-table{
display:flex;
flex-direction:column;
width:100%;
}
.placa-table .row{
display:grid;
grid-template-columns:220px 1fr;
gap:10px;
padding:10px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.placa-table .row:nth-child(odd){
background:rgba(255,255,255,.02);
}
.placa-table .campo{
font-weight:700;
color:#9cc2ff;
}
.placa-table .valor{
color:#e6edf3;
font-weight:500;
}
/* skeleton */
.placa-skeleton{
display:grid;
grid-template-columns:220px 1fr;
gap:10px;
}
.placa-skel-row{
height:36px;
border-radius:8px;
background:linear-gradient(90deg,#0f141a,#141b23,#0f141a);
background-size:200% 100%;
animation:placaShimmer 1.1s linear infinite;
border:1px solid rgba(255,255,255,.04);
}
@keyframes placaShimmer{
0%{background-position:0% 0}
100%{background-position:200% 0}
}
@media (max-width:700px){
.placa-table .row,
.placa-skeleton{
grid-template-columns:1fr;
}
}
/* STYLE DO CRLV */
.crlv-wrap{
max-width:880px;
margin:0 auto;
padding:6px;
}
.crlv-card{
background:#090d11;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
padding:18px;
box-shadow:0 12px 30px #090d11;
}
.crlv-title{
font-weight:900;
font-size:22px;
margin-bottom:4px;
}
.crlv-hint{
color:#aab1ba;
font-size:.92rem;
margin-bottom:12px;
}
.crlv-toolbar{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:10px;
}
.crlv-btn{
padding:10px 14px;
border:0;
border-radius:10px;
cursor:pointer;
font-weight:700;
background:linear-gradient(45deg,#00d7ff,#00bcd4);
color:#031014;
box-shadow:0 0 12px rgba(0,230,255,.22);
transition:.18s;
}
.crlv-btn:hover{
opacity:.95;
transform:translateY(-1px);
}
.crlv-btn:disabled{
opacity:.55;
filter:saturate(.6);
cursor:not-allowed;
transform:none;
}
.crlv-btn.secondary{
background:#161c22;
color:#e6eef6;
border:1px solid rgba(255,255,255,.08);
box-shadow:none;
}
.crlv-btn.danger{
background:linear-gradient(45deg,#ff4d4d,#ff7b60);
color:#210b0b;
box-shadow:0 0 12px rgba(255,80,80,.22);
}
.crlv-btn.ghost{
background:transparent;
border:1px dashed rgba(255,255,255,.15);
color:#b8c3cd;
}
/* 🔧 coluna lateral preview */
.crlv-grid{
display:grid;
grid-template-columns:1fr 320px;
gap:16px;
}
@media (max-width:980px){
.crlv-grid{
grid-template-columns:1fr;
}
}
.crlv-ta-wrap{
position:relative;
}
.crlv-ta{
width:100%;
min-height:260px;
background:#0b0f14;
color:#fff;
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
padding:12px 12px 42px 12px;
resize:vertical;
outline:none;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.crlv-dnd{
position:absolute;
inset:0;
border:2px dashed transparent;
border-radius:12px;
pointer-events:none;
transition:.2s;
}
.crlv-ta-wrap.dropping .crlv-dnd{
border-color:rgba(0,247,255,.4);
background:rgba(0,247,255,.06);
}
.crlv-meta{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
position:absolute;
bottom:6px;
left:10px;
right:10px;
color:#9fb0be;
font-size:.83rem;
}
.crlv-ctr{
opacity:.85;
}
.crlv-hotkey{
font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
background:#0f1620;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
padding:2px 6px;
}
/* preview */
.crlv-side{
display:flex;
flex-direction:column;
gap:12px;
}
.crlv-thumb{
position:relative;
width:100%;
min-height:260px;
background:linear-gradient(180deg,#0b0f14,#0a0f14);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
padding:8px;
overflow:visible;
}
.crlv-thumb img{
display:none;
width:100%;
height:auto;
max-height:340px;
object-fit:contain;
border-radius:8px;
}
.crlv-thumb.has-img img{
display:block;
}
/* skeleton */
.crlv-skel{
width:100%;
height:260px;
border-radius:10px;
background:linear-gradient(90deg,#0e151c 0%,#12202a 50%,#0e151c 100%);
background-size:200% 100%;
animation:crlv-shimmer 1.1s linear infinite;
}
.crlv-thumb.has-img .crlv-skel{
display:none;
}
@keyframes crlv-shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
/* ações */
.crlv-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:center;
}
.crlv-toast{
position:fixed;
right:18px;
bottom:18px;
background:#0e151c;
color:#dff7ff;
border:1px solid rgba(0,247,255,.2);
padding:10px 12px;
border-radius:10px;
box-shadow:0 10px 22px rgba(0,0,0,.5);
z-index:9999;
opacity:0;
transform:translateY(10px);
transition:.18s;
}
.crlv-toast.show{
opacity:1;
transform:translateY(0);
}
.crlv-help{
margin-top:12px;
padding:10px;
border-radius:10px;
background:#0e141a;
border:1px dashed rgba(255,255,255,.09);
color:#9fb0be;
}
.crlv-help code{
background:#0f1620;
border:1px solid rgba(255,255,255,.13);
border-radius:6px;
padding:1px 5px;
}
/* botão copiar */
.crlv-copy-btn{
position:absolute;
top:10px;
right:10px;
background:rgba(0,0,0,.45);
color:#eaf6ff;
border:1px solid rgba(255,255,255,.18);
backdrop-filter: blur(3px);
padding:6px 10px;
border-radius:10px;
font-weight:700;
cursor:pointer;
transition:.15s;
}
.crlv-copy-btn:hover{
background:rgba(0,0,0,.7);
}
/* SEPARADOR CPF */
.sep-wrap{
max-width:960px;
margin:0 auto;
}
.sep-card{
background:#0d1117;
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
padding:16px;
box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.sep-title{
font-weight:900;
font-size:22px;
margin-bottom:4px;
}
.sep-hint{
color:#aab1ba;
font-size:.92rem;
margin-bottom:12px;
}
.sep-grid{
display:grid;
grid-template-columns:1fr 320px;
gap:16px;
}
@media (max-width:980px){
.sep-grid{
grid-template-columns:1fr;
}
}
.sep-ta-wrap{
position:relative;
}
.sep-ta{
width:100%;
min-height:240px;
background:#0b0f14;
color:#eaf6ff;
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
padding:12px 12px 42px;
resize:vertical;
outline:none;
}
.sep-meta{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
position:absolute;
bottom:6px;
left:10px;
right:10px;
color:#9fb0be;
font-size:.83rem;
}
.sep-ctr{
opacity:.85;
}
.sep-side{
display:flex;
flex-direction:column;
gap:12px;
}
.sep-card-mini{
background:#0b0f14;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
padding:12px;
}
.sep-subtitle{
margin:0 0 8px 0;
font-weight:800;
}
.sep-badges{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:8px;
}
.sep-badge{
background:#0e141a;
border:1px solid rgba(255,255,255,.08);
color:#cfe9ff;
border-radius:999px;
padding:4px 8px;
font-size:.85rem;
}
.sep-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
}
/* GERADORES / QR TOOL */
:root{
--qr-bg: #0b1623;
--qr-card: #0f1d2b;
--qr-border: rgba(255,255,255,.08);
--qr-soft: rgba(255,255,255,.06);
--qr-text: #d5e7ff;
--qr-muted: #8aa3bf;
--qr-cyan: #00c2ff;
--qr-cyan-2: #6b5cff;
--qr-glow: 0 8px 30px rgba(0,194,255,.15);
}
/* container do cartão */
.crlv-wrap{
padding: 6px;
}
.crlv-card{
background: linear-gradient(180deg, rgba(15,29,43,.86), rgba(10,19,30,.86));
border: 1px solid var(--qr-border);
border-radius: 18px;
box-shadow: var(--qr-glow);
padding: 16px 16px 14px;
}
.crlv-title{
font-weight: 800;
font-size: 1.05rem;
letter-spacing: .4px;
color: var(--qr-text);
}
.crlv-hint{
color: var(--qr-muted);
margin-top: 6px;
font-size: .92rem;
}
.crlv-grid{
margin-top: 14px;
display: grid;
grid-template-columns: 1fr 360px;
gap: 16px;
}
@media (max-width: 980px){
.crlv-grid{
grid-template-columns: 1fr;
}
}
/* inputs e campos */
.gw-field label{
display:block;
margin-bottom:6px;
color: var(--qr-muted);
font-size: .88rem;
}
.gw-input{
width:100%;
background: #0a1521;
color: var(--qr-text);
border: 1px solid var(--qr-soft);
border-radius: 12px;
padding: 11px 12px;
outline: none;
transition: .2s ease;
}
.gw-input:focus{
border-color: rgba(0,194,255,.45);
box-shadow: 0 0 0 3px rgba(0,194,255,.12);
}
/* botões principais */
.crlv-actions{
display:flex;
gap:10px;
flex-wrap: wrap;
}
.crlv-btn{
background: linear-gradient(180deg, #0e2a3b, #0a1f2d);
color: #dff5ff;
border: 1px solid rgba(0,194,255,.25);
border-radius: 12px;
padding: 10px 14px;
font-weight: 700;
font-size: .92rem;
letter-spacing: .2px;
cursor: pointer;
transition: .2s ease;
}
.crlv-btn:hover{
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(0,194,255,.12);
border-color: rgba(0,194,255,.45);
}
.crlv-btn.secondary{
background: #0b1926;
color: #bfeaff;
}
.crlv-btn.ghost{
background: transparent;
border-color: var(--qr-soft);
color: var(--qr-muted);
}
/* thumb/preview do QR */
.crlv-thumb{
background: radial-gradient(120% 120% at 0% 0%, rgba(0,194,255,.08), transparent 55%),
linear-gradient(180deg, #0b1623, #09131f);
border: 1px solid var(--qr-border);
border-radius: 14px;
min-height: 260px;
display:flex;
align-items:center;
justify-content:center;
padding: 16px;
}
.crlv-thumb img{
width: 100%;
height: auto;
max-width: 100%;
image-rendering: -webkit-optimize-contrast;
filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
}
/* segment control (tipo) */
.gw-segment .seg-btn{
background: #0b1926;
color: #bfeaff;
border: 1px solid var(--qr-soft);
border-radius: 12px;
padding: 8px 12px;
font-weight: 700;
font-size: .9rem;
cursor: pointer;
transition: .18s ease;
}
.gw-segment .seg-btn:hover{
border-color: rgba(0,194,255,.35);
}
.gw-segment .seg-btn.active{
background: linear-gradient(180deg, rgba(0,194,255,.18), rgba(0,194,255,.08));
border-color: rgba(0,194,255,.55);
color: #eaffff;
box-shadow: 0 6px 18px rgba(0,194,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
/* campos dinâmicos com grid */
.gw-grid{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.gw-grid.gw-full{
grid-template-columns: 1fr;
}
@media (max-width: 720px){
.gw-grid{
grid-template-columns: 1fr;
}
}
/* “Link montado” */
#qrBuiltLink{
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
letter-spacing: .2px;
background: #0a1320;
color: #e0f4ff;
}
/* alinhamento dos botões "Geradores" (na sidebar) lado a lado */
.painel-actions{
display:flex;
gap:10px;
flex-wrap: wrap;
align-items:center;
}
/* CONSULTA CEP */
.cep-wrap .placa-card{
max-width: 860px;
margin: 28px auto;
}
.cep-wrap .placa-input{
width: 360px;
}
/* tabela de resultado */
#cepResultado .placa-table{
display:grid;
grid-template-columns:1fr;
gap:6px;
}
#cepResultado .placa-table .row{
display:flex;
justify-content:space-between;
align-items:center;
background: rgba(255,255,255,0.02);
border:1px solid rgba(255,255,255,0.05);
border-radius:10px;
padding:10px 14px;
transition:.2s;
}
#cepResultado .placa-table .row:hover{
background: rgba(0,194,255,0.05);
border-color: rgba(0,194,255,0.25);
}
#cepResultado .placa-table .campo{
color:#6bdcff;
font-weight:600;
font-size:.95rem;
}
#cepResultado .placa-table .valor{
color:#fff;
font-weight:500;
text-align:right;
max-width:55%;
word-break:break-word;
}
#cepResultado .placa-actions{
display:flex;
justify-content:flex-end;
margin-bottom:8px;
}
#cepResultado .placa-copy{
background: rgba(0,194,255,0.08);
border:1px solid rgba(0,194,255,0.35);
color:#6bdcff;
font-weight:600;
padding:6px 14px;
border-radius:8px;
cursor:pointer;
transition:.2s;
}
#cepResultado .placa-copy:hover{
background: rgba(0,194,255,0.18);
}
@media (max-width:900px){
#cepResultado .placa-table .valor{
text-align:left;
max-width:100%;
}
}
/* teste */
/* ============================
CARDS DE ATUALIZAÇÕES (HOME)
============================ */
/* ============================
CARDS DE ATUALIZAÇÕES (HOME)
============================= */
.updates-strip{
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.update-card{
position: relative;
flex: 0 0 260px; /* "tamanho cartão de crédito" */
max-width: 280px;
min-height: 140px;
border-radius: 14px;
padding: 10px 12px 12px;
background:
radial-gradient(circle at 0 0, rgba(56,189,248,.27), transparent 55%),
linear-gradient(135deg, #020617 0%, #020b2a 40%, #1f2937 100%);
border:1px solid rgba(56,189,248,.45); /* borda puxando pro azul dos botões */
box-shadow:
0 12px 30px rgba(0,0,0,.55),
0 0 0 1px rgba(15,23,42,.9);
overflow: hidden;
display:flex;
flex-direction:column;
gap:6px;
font-size:.86rem;
transition: transform .16s ease, box-shadow .2s ease, border-color .18s ease, background .18s ease;
}
.update-card:hover{
transform: translateY(-3px);
box-shadow: 0 18px 50px rgba(0,0,0,.75);
border-color: rgba(56,189,248,.8);
}
/* faixa de status no topo */
.update-card-status{
position:absolute;
top:8px;
right:10px;
font-size:.7rem;
padding:2px 10px;
border-radius:999px;
border:1px solid rgba(148,163,184,.35);
text-transform:uppercase;
letter-spacing:.08em;
}
/* cores por status (batendo com o admin) */
.update-card--info .update-card-status{
background:rgba(148,163,184,.15);
color:#e2e8f0;
}
.update-card--online .update-card-status{
background:rgba(34,197,94,.22);
border-color:rgba(34,197,94,.65);
color:#bbf7d0;
}
.update-card--alerta .update-card-status{
background:rgba(234,179,8,.18);
border-color:rgba(234,179,8,.7);
color:#facc15;
}
.update-card--offline .update-card-status{
background:rgba(248,113,113,.14);
border-color:rgba(239,68,68,.7);
color:#fecaca;
}
.update-card--novo .update-card-status{
background:rgba(252, 92, 92, 0.14);
border-color:rgb(255, 0, 0);
color:#fecaca;
}
/* tagzinha da esquerda */
.update-card-tag{
display:inline-flex;
align-items:center;
gap:6px;
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.12em;
padding:2px 8px;
border-radius:999px;
border:1px solid rgba(148,163,184,.3);
background:rgba(15,23,42,.9);
color:rgba(148,163,184,.9);
}
/* título / texto */
.update-card-title{
margin-top:18px;
font-weight:700;
font-size:.96rem;
}
.update-card-text{
color:var(--muted);
line-height:1.35;
}
/* linha de meta (data) */
.update-card-meta{
margin-top:auto;
font-size:.75rem;
color:rgba(148,163,184,.85);
display:flex;
justify-content:space-between;
gap:8px;
}
/* mini imagem opcional no topo (se tiver imageUrl) */
.update-card-thumb{
position:absolute;
inset:0;
opacity:.14;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
pointer-events:none;
filter:blur(1px);
}
/* camada pra garantir legibilidade por cima da thumb */
.update-card-inner{
position:relative;
z-index:1;
}
/* responsivo */
@media (max-width:780px){
.updates-strip{
margin-top:14px;
}
.update-card{
flex:1 1 calc(50% - 10px);
}
}
@media (max-width:520px){
.update-card{
flex:1 1 100%;
}
}
/* Card do usuário no topo */
.user-card {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(15, 20, 30, 0.8);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.user-avatar {
width: 56px;
height: 56px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
object-fit: cover;
}
.user-info {
flex: 1;
min-width: 0;
}
.user-name {
font-weight: 700;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-expiry {
margin-top: 2px;
font-size: 0.82rem;
opacity: 0.85;
}
/* Botões Trocar senha / Sair */
.user-actions {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 120px;
}
.btn-user {
border: none;
border-radius: 999px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
white-space: nowrap;
}
.btn-user:active {
transform: scale(0.97);
}
.btn-user.primary {
background: #00e0a3;
color: #051016;
}
.btn-user.primary:hover {
background: #10f0b3;
}
.btn-user.secondary {
background: transparent;
color: #cbd5f5;
border: 1px solid rgba(148, 163, 184, 0.5);
}
.btn-user.secondary:hover {
background: rgba(148, 163, 184, 0.08);
}
/* Mobile: empilha tudo bonitinho */
@media (max-width: 640px) {
.user-card {
flex-direction: column;
align-items: flex-start;
}
.user-actions {
flex-direction: row;
width: 100%;
justify-content: flex-start;
}
.btn-user {
flex: 0 0 auto;
}
}
/* ==================== MESCLA 99 – layout tipo app (enterprise) ==================== */
.mescla99-wrap {
max-width: 460px;
margin: 0 auto;
padding: 16px 0;
}
.mescla99-card {
border-radius: 24px;
padding: 24px 22px 28px;
background: rgba(0, 0, 0, 0.32); /* mantém dark, só um pouco mais “cheio” */
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.06); /* borda bem sutil */
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.02); /* “glow” corporativo */
}
/* título / subtítulo */
.mescla99-title {
margin: 0 0 6px;
text-align: center;
font-size: 20px;
font-weight: 600;
letter-spacing: .02em;
}
.mescla99-subtitle {
margin: 0 0 22px;
text-align: center;
font-size: 13px;
line-height: 1.5;
opacity: .74;
}
/* bloco das fotos */
.mescla99-avatars {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
margin-bottom: 22px;
}
/* em telas maiores, deixa lado a lado, fica mais “dashboard” */
@media (min-width: 640px) {
.mescla99-avatars {
flex-direction: row;
justify-content: center;
gap: 32px;
}
.mescla99-avatar-wrap {
flex: 1;
}
}
.mescla99-avatar-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* círculo da foto */
.mescla99-avatar {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
position: relative;
border: 1px solid rgba(255,255,255,.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
text-align: center;
color: inherit;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 55%);
box-shadow:
0 0 0 1px rgba(0,0,0,0.65),
0 10px 24px rgba(0,0,0,0.8);
transition:
box-shadow .18s ease-out,
transform .18s ease-out,
border-color .18s ease-out,
background .18s ease-out;
}
.mescla99-avatar span {
opacity: .7;
}
/* highlight no hover (só “profissional”, sem exagero) */
.mescla99-avatar-wrap:hover .mescla99-avatar {
transform: translateY(-2px);
box-shadow:
0 16px 30px rgba(0,0,0,0.85),
0 0 0 1px rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.22);
}
/* imagem dentro do círculo */
.mescla99-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* “anel” interno bem discreto */
.mescla99-avatar::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.45);
pointer-events: none;
}
/* botões “Selecionar” */
.mescla99-avatar-btn {
border-radius: 999px;
padding: 7px 20px;
font-size: 12px;
cursor: pointer;
background: transparent;
outline: none;
border: 1px solid rgba(255,255,255,0.18);
color: inherit;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 500;
transition:
background .18s ease-out,
border-color .18s ease-out,
transform .14s ease-out,
box-shadow .18s ease-out;
}
.mescla99-avatar-btn:hover {
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.06);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}
.mescla99-avatar-btn:active {
transform: translateY(0);
box-shadow: none;
}
.mescla99-avatar-btn:focus-visible {
outline: 2px solid rgba(255,255,255,0.45);
outline-offset: 2px;
}
/* botão MESCLAR (reaproveita sua cor da .crlv-btn) */
.mescla99-main-btn {
width: 100%;
border-radius: 999px;
padding: 12px 18px;
font-weight: 600;
font-size: 14px;
margin-top: 10px;
border: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: .08em;
box-shadow: 0 12px 30px rgba(0,0,0,0.75);
transition:
transform .16s ease-out,
box-shadow .18s ease-out,
opacity .18s ease-out;
}
.mescla99-main-btn:hover {
transform: translateY(-1px);
box-shadow: 0 18px 40px rgba(0,0,0,0.85);
}
.mescla99-main-btn:active {
transform: translateY(0);
box-shadow: 0 10px 24px rgba(0,0,0,0.8);
}
.mescla99-main-btn:disabled {
opacity: .6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* área do resultado */
.mescla99-result {
margin-top: 22px;
text-align: center;
}
.mescla99-result img {
max-width: 100%;
border-radius: 18px;
display: block;
margin: 0 auto;
box-shadow: 0 18px 40px rgba(0,0,0,0.95);
}
/* mensagem/erro */
.mescla99-msg {
margin-top: 10px;
font-size: 12px;
line-height: 1.6;
opacity: .85;
text-align: center;
}
/* =========================================================
SEPARADOR CPF AVANÇADO – layout nível hard
Só mexe em classes começando com .sep- para não quebrar o resto
========================================================= */
/* wrapper geral */
.sep-wrap {
max-width: 1120px;
margin: 0 auto;
padding: 18px 10px 32px;
}
/* card principal */
.sep-card {
position: relative;
border-radius: 24px;
padding: 22px 22px 26px;
background: radial-gradient(circle at top left,
rgba(0, 255, 170, 0.07),
transparent 55%)
,
rgba(14, 20, 35, 0.92);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.03);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(148, 255, 214, 0.12);
}
/* pequena linha “glow” no topo do card */
.sep-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 24px;
padding: 1px;
background: linear-gradient(135deg,
rgba(0, 255, 170, 0.35),
rgba(0, 140, 255, 0.18),
rgba(255, 255, 255, 0.02));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.7;
pointer-events: none;
}
/* título e subtítulo */
.sep-title {
position: relative;
margin: 0 0 4px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.03em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.sep-title::after {
content: "ADVANCED";
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid rgba(0, 255, 170, 0.5);
background: radial-gradient(circle at top,
rgba(0, 255, 170, 0.22),
transparent 70%);
text-shadow: 0 0 6px rgba(0, 255, 170, 0.7);
}
.sep-hint {
margin: 4px 0 18px;
font-size: 13px;
opacity: 0.78;
max-width: 720px;
}
/* layout duas colunas */
.sep-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 20px;
align-items: flex-start;
}
/* ==================== ÁREA ESQUERDA (textarea) ==================== */
.sep-ta-wrap {
position: relative;
border-radius: 18px;
padding: 10px;
background: radial-gradient(circle at top left,
rgba(255, 255, 255, 0.04),
rgba(15, 23, 42, 0.98));
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow:
inset 0 0 0 1px rgba(15, 23, 42, 0.7),
0 14px 28px rgba(0, 0, 0, 0.9);
}
/* textarea base – reaproveita visual do seu sep-ta se quiser */
.sep-ta {
width: 100%;
min-height: 210px;
resize: vertical;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.65);
background: radial-gradient(circle at top,
rgba(15, 23, 42, 0.9),
rgba(6, 12, 25, 1));
padding: 10px 11px;
font-size: 13px;
line-height: 1.4;
color: #e5f5ff;
outline: none;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.9);
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background 0.2s ease;
}
.sep-ta::placeholder {
color: rgba(148, 163, 184, 0.7);
}
.sep-ta:focus {
border-color: rgba(56, 189, 248, 0.9);
box-shadow:
0 0 0 1px rgba(56, 189, 248, 0.6),
0 0 22px rgba(8, 47, 73, 0.85);
background: radial-gradient(circle at top,
rgba(15, 23, 42, 0.96),
rgba(6, 12, 25, 1));
}
/* barra inferior (contador + botões) */
.sep-meta {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 12px;
color: rgba(148, 163, 184, 0.85);
}
.sep-ctr {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.sep-ctr span {
padding: 2px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(56, 189, 248, 0.55);
color: #e5f5ff;
}
/* ==================== ÁREA DIREITA (opções + cards) ==================== */
.sep-side {
display: flex;
flex-direction: column;
gap: 12px;
}
/* cards menores */
.sep-card-mini {
border-radius: 18px;
padding: 12px 12px 13px;
background: linear-gradient(
135deg,
rgba(15, 23, 42, 0.96),
rgba(15, 23, 42, 0.93)
);
border: 1px solid rgba(51, 65, 85, 0.9);
box-shadow:
0 12px 22px rgba(0, 0, 0, 0.9),
inset 0 0 0 1px rgba(15, 23, 42, 0.9);
}
.sep-subtitle {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.92;
}
/* ==================== Radios bonitos ==================== */
.sep-radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.sep-radio {
position: relative;
display: flex;
align-items: center;
gap: 9px;
cursor: pointer;
font-size: 13px;
padding: 6px 9px;
border-radius: 999px;
transition:
background 0.16s ease,
box-shadow 0.16s ease,
transform 0.12s ease;
}
.sep-radio input {
position: relative;
width: 14px;
height: 14px;
margin: 0;
appearance: none;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.8);
background: radial-gradient(circle, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0.85));
box-shadow: 0 0 0 1px rgba(15, 23, 42, 1);
display: inline-flex;
align-items: center;
justify-content: center;
outline: none;
cursor: pointer;
}
.sep-radio input::after {
content: "";
width: 8px;
height: 8px;
border-radius: inherit;
background: transparent;
transition: background 0.16s ease, box-shadow 0.16s ease;
}
.sep-radio span {
opacity: 0.88;
}
/* estado hover geral */
.sep-radio:hover {
background: radial-gradient(circle at left,
rgba(30, 64, 175, 0.18),
transparent 70%);
box-shadow: 0 0 0 1px rgba(30, 64, 175, 0.6);
transform: translateY(-1px);
}
/* radio selecionado */
.sep-radio input:checked {
border-color: rgba(34, 197, 94, 0.9);
box-shadow:
0 0 0 1px rgba(15, 23, 42, 1),
0 0 10px rgba(34, 197, 94, 0.7);
}
.sep-radio input:checked::after {
background: radial-gradient(circle,
rgba(34, 197, 94, 1),
rgba(22, 163, 74, 1));
box-shadow:
0 0 12px rgba(34, 197, 94, 0.8),
0 0 40px rgba(34, 197, 94, 0.5);
}
.sep-radio input:focus-visible {
outline: 2px solid rgba(56, 189, 248, 0.9);
outline-offset: 2px;
}
/* badgezinhos de contagem */
.sep-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.sep-badge {
font-size: 11px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
background: radial-gradient(circle at top,
rgba(15, 23, 42, 0.98),
rgba(15, 23, 42, 0.9));
color: rgba(226, 232, 240, 0.88);
display: inline-flex;
align-items: center;
gap: 4px;
}
.sep-badge b {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 11px;
}
/* ações dentro dos cards (usa .crlv-btn do seu tema) */
.sep-actions {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* textarea de saída na direita – herda .sep-ta, só ajusta altura */
.sep-card-mini .sep-ta {
min-height: 96px;
font-size: 12px;
}
/* botões dentro desse módulo – só um ajuste fino, cor vem de .crlv-btn existente */
.sep-actions .crlv-btn {
font-size: 12px;
padding-inline: 10px;
border-radius: 999px;
}
/* ==================== Responsivo ==================== */
@media (max-width: 900px) {
.sep-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 600px) {
.sep-card {
padding: 18px 14px 22px;
}
.sep-title {
font-size: 18px;
}
.sep-hint {
font-size: 12px;
}
.sep-meta {
flex-direction: column;
align-items: flex-start;
}
.sep-card-mini {
padding: 10px 10px 11px;
}
}
/* ====== STATUS DAS FERRAMENTAS NO MENU ====== */
.menu li {
position: relative;
}
/* bolacha de status no canto do ícone */
.menu .feature-status-badge {
position: absolute;
right: 4px;
top: 4px;
padding: 2px 6px;
border-radius: 999px;
font-size: 9px;
letter-spacing: .04em;
text-transform: uppercase;
font-weight: 600;
backdrop-filter: blur(6px);
border: 1px solid rgba(0,0,0,.35);
box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
/* cores por status – ajusta pra ficar condizente com seu tema */
.feature-status--ONLINE {
color: #0af5a3;
background: rgba(1, 84, 60, 0.85);
}
.feature-status--OFFLINE {
color: #ff8b8b;
background: rgba(120, 13, 13, 0.9);
}
.feature-status--NOVO {
color: #ff0000;
background: rgba(120, 13, 13, 0.9);
}
.feature-status--MANUTENÇÃO {
color: #ffe38b;
background: rgba(120, 80, 13, 0.9);
}
.feature-status--INSTAVEL {
color: #ffd28b;
background: rgba(120, 64, 0, 0.9);
}
/* visual do botão bloqueado */
.menu a.is-feature-blocked {
opacity: 0.35;
pointer-events: auto; /* ainda vamos capturar o clique, só não deixa ser "ativo" */
filter: grayscale(0.4);
cursor: not-allowed;
}
.menu a.is-feature-blocked img {
transform: none !important;
}
/* hover normal continua só pros que estão online */
.menu a:not(.is-feature-blocked):hover img {
transform: translateY(-2px) scale(1.02);
}
/* ===== STATUS DAS FERRAMENTAS NO MENU ===== */
/* TAGZINHA EM CIMA DO BOTÃO (tipo MÓDULO / INFO) */
.feature-badge {
position: absolute;
top: -6px; /* sobe ela um pouquinho pra fora do botão */
left: 50%;
transform: translateX(-50%);
padding: 2px 8px;
border-radius: 999px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
background: #111827;
color: #e5e7eb;
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 4px 12px rgba(0,0,0,.45);
pointer-events: none; /* não atrapalha o clique no botão */
z-index: 2;
}
/* variações de cor por status */
.feature-badge--online {
background: linear-gradient(135deg, #16a34a, #22c55e);
color: #eafff5;
}
.feature-badge--offline {
background: linear-gradient(135deg, #7f1d1d, #dc2626);
color: #fee2e2;
}
.feature-badge--novo {
background: linear-gradient(135deg, #7f1d1d, #ff0000);
color: #fee2e2;
}
.feature-badge--manutencao {
background: linear-gradient(135deg, #92400e, #f97316);
color: #fffbeb;
}
.feature-badge--instavel {
background: linear-gradient(135deg, #334155, #6b7280);
color: #e5e7eb;
}
/* estado visual do botão quando bloqueado */
.menu a.feature-disabled {
opacity: .45;
cursor: not-allowed;
filter: grayscale(0.3);
}
/* instável: só realce na borda */
.menu a.feature-unstable {
box-shadow: 0 0 0 2px rgba(251,191,36,.35);
}
.tool-status-card {
background: #04101f;
border-radius: 16px;
padding: 18px 20px 16px;
border: 1px solid rgba(0, 247, 255, 0.08);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
color: #e5f6ff;
max-width: 460px;
margin: 0 auto;
font-family: inherit;
}
.tool-status-header h2 {
margin: 8px 0 6px;
font-size: 1.2rem;
font-weight: 600;
}
.tool-status-body p {
margin: 0;
font-size: .95rem;
line-height: 1.5;
color: #a4c2d8;
}
.tool-status-footer {
margin-top: 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* pill de status */
.tool-status-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: .7rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
/* cores por status */
.tool-status-pill--offline {
background: rgba(255, 80, 80, 0.15);
color: #ff9090;
}
/* cores por status */
.tool-status-pill--novo {
background: rgb(255, 0, 0);
color: #ff9090;
}
.tool-status-pill--manutenção,
.tool-status-pill--manutencao {
background: rgba(255, 184, 77, 0.15);
color: #ffd48a;
}
.tool-status-pill--instavel {
background: rgba(0, 247, 255, 0.08);
color: #4ef3ff;
}
/* =========================
COMPARA 99 x UBER
========================= */
.c99x-wrap {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
gap: 20px;
align-items: flex-start;
}
.c99x-left,
.c99x-right {
background: rgba(10, 14, 20, 0.9);
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.c99x-title {
margin: 0 0 6px;
font-size: 1.3rem;
letter-spacing: 0.04em;
font-weight: 700;
text-transform: uppercase;
}
.c99x-subtitle {
margin: 0 0 10px;
font-size: 0.9rem;
color: #a0aec0;
}
.c99x-textarea {
width: 100%;
min-height: 150px;
resize: vertical;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(15, 19, 29, 0.95);
color: #e2e8f0;
padding: 10px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.85rem;
outline: none;
box-shadow: inset 0 0 0 1px rgba(15, 199, 255, 0);
transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.c99x-textarea:focus {
border-color: rgba(0, 247, 255, 0.4);
box-shadow: 0 0 0 1px rgba(0, 247, 255, 0.35);
background: rgba(10, 14, 22, 0.98);
}
.c99x-controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 14px;
}
.c99x-btn {
border: none;
outline: none;
border-radius: 999px;
padding: 6px 14px;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
background: linear-gradient(135deg, #0bd19d, #09b3ff);
color: #0b1220;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
display: inline-flex;
align-items: center;
gap: 6px;
transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease, background 0.15s ease;
}
.c99x-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.c99x-btn:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.c99x-btn:disabled {
opacity: 0.45;
cursor: default;
}
.c99x-results {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.c99x-block h3 {
margin: 0 0 6px;
font-size: 0.9rem;
font-weight: 600;
}
.c99x-result {
position: relative;
border-radius: 10px;
padding: 8px 10px 8px;
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 60%);
border: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: column;
gap: 6px;
}
.c99x-pre {
margin: 0;
max-height: 150px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.78rem;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
.c99x-green {
border-color: rgba(45, 212, 191, 0.65);
background: rgba(6, 78, 59, 0.35);
}
.c99x-blue {
border-color: rgba(59, 130, 246, 0.5);
background: rgba(30, 64, 175, 0.35);
}
.c99x-yellow {
border-color: rgba(234, 179, 8, 0.6);
background: rgba(113, 63, 18, 0.4);
}
.c99x-red {
border-color: rgba(248, 113, 113, 0.7);
background: rgba(127, 29, 29, 0.45);
}
.c99x-gray {
border-color: rgba(148, 163, 184, 0.6);
background: rgba(31, 41, 55, 0.6);
}
.c99x-copy {
align-self: flex-end;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(15, 23, 42, 0.9);
color: #e2e8f0;
padding: 3px 10px;
font-size: 0.72rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
.c99x-copy:hover {
background: rgba(15, 23, 42, 1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
transform: translateY(-1px);
}
.c99x-right {
min-height: 100%;
}
.c99x-stats {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.c99x-stat {
font-size: 0.85rem;
padding: 6px 8px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(148, 163, 184, 0.25);
}
.c99x-stat span {
font-weight: 600;
color: #e5fffb;
}
.c99x-legend {
list-style: none;
padding: 0;
margin: 0 0 12px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.8rem;
color: #a0aec0;
}
.c99x-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 999px;
margin-right: 6px;
vertical-align: middle;
}
.c99x-dot--green { background: #22c55e; }
.c99x-dot--blue { background: #3b82f6; }
.c99x-dot--yellow{ background: #eab308; }
.c99x-dot--red { background: #f87171; }
.c99x-tip {
margin-top: 10px;
font-size: 0.8rem;
color: #94a3b8;
padding: 8px 9px;
border-radius: 9px;
background: rgba(15, 23, 42, 0.9);
border: 1px dashed rgba(148, 163, 184, 0.4);
}
@media (max-width: 900px) {
.c99x-wrap {
grid-template-columns: minmax(0, 1fr);
}
.c99x-left,
.c99x-right {
padding: 14px 12px;
}
.c99x-textarea {
min-height: 130px;
}
}
/* Overlay do modal */
.checkout-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* Card central */
.checkout-card {
width: 100%;
max-width: 420px;
background: #171717;
border-radius: 18px;
border: 1px solid rgba(248, 113, 113, 0.5);
box-shadow: 0 0 30px rgba(248, 113, 113, 0.4);
padding: 22px 22px 24px;
position: relative;
color: #f9fafb;
}
.checkout-close {
position: absolute;
top: 10px;
right: 12px;
border: none;
background: transparent;
color: #f87171;
font-size: 22px;
cursor: pointer;
}
/* Cabeçalho */
.checkout-header {
text-align: center;
margin-bottom: 14px;
}
.checkout-icon {
width: 52px;
height: 52px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at top, #f97373, #7f1d1d);
margin-bottom: 6px;
font-size: 22px;
}
.checkout-header h2 {
margin: 0;
font-size: 20px;
}
.checkout-header p {
margin: 4px 0 0;
font-size: 13px;
color: #9ca3af;
}
/* Form */
.checkout-form label {
display: block;
font-size: 13px;
margin-bottom: 10px;
}
.checkout-form input[type="text"],
.checkout-form input[type="password"] {
width: 100%;
margin-top: 4px;
border-radius: 10px;
border: 1px solid #27272a;
background: #111827;
color: #e5e7eb;
padding: 8px 10px;
font-size: 14px;
}
/* Planos */
.checkout-plan-group {
margin: 10px 0 14px;
font-size: 13px;
}
.checkout-plan-group > span {
display: block;
margin-bottom: 4px;
color: #9ca3af;
}
.checkout-plan {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid #27272a;
background: #0b0b0f;
cursor: pointer;
margin-bottom: 5px;
}
.checkout-plan input {
accent-color: #f97373;
}
.checkout-plan strong {
display: block;
font-size: 14px;
}
.checkout-plan span {
font-size: 13px;
color: #f97373;
}
/* Botões */
.checkout-btn-main {
width: 100%;
padding: 10px;
border-radius: 999px;
border: none;
cursor: pointer;
background: linear-gradient(90deg, #fb7185, #f97316);
color: #111827;
font-weight: 600;
margin-top: 4px;
}
.checkout-btn-main:disabled {
opacity: .6;
cursor: wait;
}
.checkout-btn-sec {
width: 100%;
padding: 8px;
border-radius: 999px;
border: 1px solid #4b5563;
background: transparent;
color: #e5e7eb;
cursor: pointer;
margin-top: 10px;
}
/* Mensagem */
.checkout-msg {
font-size: 12px;
margin-top: 6px;
color: #f97373;
}
/* PIX etapa */
.checkout-pix-body {
font-size: 13px;
}
.checkout-info-linha {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.checkout-timer {
font-size: 12px;
color: #fbbf24;
margin-bottom: 8px;
}
.checkout-qrcode-wrap {
display: flex;
justify-content: center;
padding: 10px 0;
}
.checkout-qrcode-wrap img {
width: 210px;
height: 210px;
border-radius: 12px;
background: #0b0b0f;
}
.checkout-copia-cola label {
font-size: 12px;
color: #9ca3af;
}
.checkout-copia-row {
display: flex;
gap: 6px;
margin-top: 4px;
}
.checkout-copia-row input {
flex: 1;
border-radius: 999px;
border: 1px solid #27272a;
background: #020617;
color: #e5e7eb;
padding: 6px 10px;
font-size: 12px;
}
.checkout-copia-row button {
padding: 6px 10px;
border-radius: 999px;
border: none;
background: #f97373;
color: #111827;
cursor: pointer;
font-size: 12px;
}
.checkout-status {
margin-top: 8px;
font-size: 12px;
color: #9ca3af;
}
/* ===========================
ÁREA DE RESULTADOS
=========================== */
#ear-resultados {
margin-top: 12px;
background: linear-gradient(145deg, rgba(15,23,42,.85), rgba(2,6,23,.98));
border-radius: var(--ear-radius-lg);
border: 1px solid rgba(30,64,175,.8);
padding: 6px 6px 8px;
max-height: 340px;
overflow-y: auto;
box-shadow: inset 0 0 0 1px rgba(15,23,42,.85);
}
/* Scrollbar techzinho */
#ear-resultados::-webkit-scrollbar {
width: 6px;
}
#ear-resultados::-webkit-scrollbar-track {
background: transparent;
}
#ear-resultados::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #22d3ee, #6366f1);
border-radius: 999px;
}
/* Botão "Copiar CPFs" global (EAR + outros checkers) */
.ear-copy-all-btn{
border-radius:999px;
border:1px solid rgba(148,163,184,.4);
background:rgba(15,23,42,.95);
color:#cbd5f5;
font-size:11px;
padding:5px 14px;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
text-transform:uppercase;
letter-spacing:.06em;
box-shadow:
0 0 0 1px rgba(15,23,42,1),
0 8px 16px rgba(15,23,42,.85);
transition:
background .15s ease,
border-color .15s ease,
color .15s ease,
transform .15s ease,
box-shadow .15s ease;
}
.ear-copy-all-btn::before{
content:"⧉";
font-size:10px;
}
.ear-copy-all-btn:hover{
background:rgba(17,24,39,1);
border-color:#22d3ee;
color:#e5e7eb;
transform:translateY(-1px);
box-shadow:
0 0 0 1px rgba(56,189,248,.5),
0 10px 22px rgba(15,23,42,.95);
}
.ear-copy-all-btn:active{
transform:translateY(0);
box-shadow:
0 0 0 1px rgba(56,189,248,.4),
0 6px 12px rgba(15,23,42,.9);
}
.ear-copy-all-btn::before {
content: "⧉";
font-size: 10px;
}
.ear-copy-all-btn:hover {
background: rgba(15,23,42,1);
border-color: var(--ear-accent);
color: #e5e7eb;
transform: translateY(-1px);
}
/* ===========================
LINHA DE RESULTADO
=========================== */
.ear-linha {
position: relative;
display: flex;
align-items: flex-start; /* texto no topo pra não espirrar */
justify-content: space-between;
gap: 6px;
padding: 6px 8px; /* ALTURA MAIOR */
margin-bottom: 4px;
border-radius: var(--ear-radius-md);
background: radial-gradient(circle at top left, rgb(3 4 4 / 0%), #0b0f14);
border: 1px solid rgba(0 0 0 / 75%);
box-shadow:
0 0 0 1px rgba(15, 23, 42, 1),
0 12px 24px rgba(15, 23, 42, .65);
font-family: var(--ear-font-mono);
font-size: 11px;
color: var(--ear-text);
max-width: 760px; /* LARGURA MENOR DENTRO DO BLOCO */
}
/* “pill” lateral decorativa */
.ear-linha::before {
content: "";
position: absolute;
left: 0;
top: 7px;
bottom: 7px;
width: 2px;
border-radius: 999px;
background: linear-gradient(180deg, #22d3ee, #6366f1);
opacity: .9;
}
/* texto */
.ear-linha-text {
flex: 1;
white-space: pre-wrap;
word-break: break-word;
padding-left: 4px;
}
/* versão reprovado: pode usar via JS adicionando .ear-linha--reprovado / --aprovado */
.ear-linha--aprovado {
border-color: rgba(34,197,94,.8);
}
.ear-linha--aprovado::before {
background: linear-gradient(180deg, #4ade80, #22c55e);
}
.ear-linha--reprovado {
border-color: rgba(34,197,94,.8);
}
.ear-linha--reprovado::before {
background: linear-gradient(180deg, #4ade80, #22c55e);
}
/* ===========================
BOTÕES MINI (CONSULTAR + COPIAR)
=========================== */
.ear-actions {
display: flex;
flex-direction: column;
gap: 4px;
margin-left: 4px;
}
/* Botão mini padrão (ex: "Consultar") */
.ear-mini-btn {
border: 0;
border-radius: var(--ear-radius-sm);
padding: 4px 6px; /* ALTURA UM POUCO MAIOR, LARGURA CONTIDA */
font-size: 10px;
line-height: 1.1;
cursor: pointer;
background: radial-gradient(circle at 30% 0, #a6c9b1fc, #00ff32 60%, #00ff7e);
color: rgba(15, 23, 42, .95);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .05em;
white-space: nowrap;
min-width: 64px;
max-width: 84px; /* não deixa ficar muito largo */
text-align: center;
box-shadow:
0 0 0 1px rgba(15,23,42,1),
0 7px 14px rgba(15,118,110,.65);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.ear-mini-btn:hover {
background: radial-gradient(circle at 30% 0, #67e8f9, #14b8a6 60%, #047857);
transform: translateY(-1px);
box-shadow: 0 9px 18px rgba(20,184,166,.75);
filter: brightness(1.03);
}
.ear-mini-btn:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(20,184,166,.7);
}
/* Botão de copiar dados da linha */
.ear-copy-btn {
border: 0;
border-radius: var(--ear-radius-sm);
padding: 3px 6px;
font-size: 9px;
line-height: 1.1;
cursor: pointer;
background: rgba(15,23,42,.95);
color: var(--ear-text-soft);
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
box-shadow: 0 0 0 1px rgba(31,41,55,.9);
transition: background .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}
.ear-copy-btn::before {
content: "⧉";
font-size: 10px;
}
.ear-copy-btn:hover {
background: rgba(17,24,39,1);
color: #f9fafb;
box-shadow:
0 0 0 1px rgba(148,163,184,.9),
0 8px 16px rgba(15,23,42,.85);
transform: translateY(-1px);
}
.ear-copy-btn:active {
transform: translateY(0);
box-shadow:
0 0 0 1px rgba(148,163,184,.8),
0 4px 10px rgba(15,23,42,.85);
}
/* ===========================
RESPONSIVO
=========================== */
@media (max-width: 768px) {
#bloco-ear {
padding: 14px 12px;
border-radius: 18px;
}
.ear-linha {
flex-direction: column;
align-items: stretch;
}
.ear-actions {
flex-direction: row;
justify-content: flex-end;
}
}
/* ===============================
MODAL / FLOAT – CONSULTA EAR
=============================== */
/* Contêiner principal do float – agora transparente,
só o card interno é o “bloco” visível */
.placa-wrap {
min-width: 420px;
max-width: 540px; /* largura menor */
max-height: 80vh; /* altura grande */
margin: 0 auto;
padding: 0; /* sem padding externo */
border-radius: 0;
background: transparent; /* 🔴 some com o container de fundo */
border: none;
box-shadow: none;
color: #e5e7eb;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
overflow: hidden;
}
/* painel interno só organiza título + card */
.placa-panel {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: 0;
background: transparent;
}
/* Título */
.placa-title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #f9fafb;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Badge EAR + 99/UBER */
.placa-badge {
font-size: 10px;
padding: 3px 9px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: .08em;
border: 1px solid rgba(56,189,248,.7);
color: #e0f2fe;
background: radial-gradient(circle at 20% 0, rgba(56,189,248,.35), rgba(15,23,42,.9));
box-shadow: 0 0 0 1px rgba(15,23,42,.9);
}
/* Card que segura tudo – é o único “bloco” visível */
.placa-card {
position: relative;
flex: 1;
border-radius: 22px;
background: linear-gradient(145deg, rgba(15,23,42,.96), rgba(2,6,23,1));
border: 1px solid rgba(30,64,175,.9);
padding: 10px 12px;
box-shadow:
inset 0 0 0 1px rgba(15,23,42,.95),
0 16px 32px rgba(15,23,42,.90);
display: flex;
flex-direction: column;
gap: 6px;
overflow: hidden;
}
/* Barra de ações (ex: copiar tudo) */
.placa-copy-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-bottom: 4px;
}
/* Botão copiar tudo */
.placa-copy-btn {
border-radius: 999px;
border: 1px solid rgba(148,163,184,.5);
background: rgba(15,23,42,.98);
color: #cbd5f5;
font-size: 11px;
padding: 3px 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
letter-spacing: .06em;
box-shadow: 0 0 0 1px rgba(15,23,42,.9);
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.placa-copy-btn::before {
content: "⧉";
font-size: 10px;
}
.placa-copy-btn:hover {
background: rgba(17,24,39,1);
border-color: #22d3ee;
color: #e5e7eb;
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(56,189,248,.5),
0 10px 20px rgba(15,23,42,.95);
}
.placa-copy-btn:active {
transform: translateY(0);
box-shadow:
0 0 0 1px rgba(56,189,248,.4),
0 6px 12px rgba(15,23,42,.95);
}
/* Área de conteúdo rolável (tabelas) */
#cpfDetResultado {
overflow-y: auto;
max-height: calc(80vh - 120px); /* garante que não estoure a viewport */
}
/* Scrollbar */
#cpfDetResultado::-webkit-scrollbar {
width: 6px;
}
#cpfDetResultado::-webkit-scrollbar-track {
background: transparent;
}
#cpfDetResultado::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #22d3ee, #6366f1);
border-radius: 999px;
}
/* Skeleton (loading) */
.placa-skeleton {
display: flex;
flex-direction: column;
gap: 6px;
}
.placa-skel-row {
height: 14px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(30,64,175,.15),
rgba(148,163,184,.35),
rgba(30,64,175,.15)
);
background-size: 200% 100%;
animation: placa-shimmer 1.2s infinite linear;
}
@keyframes placa-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ===============================
TABELA DE DETALHES
=============================== */
.placa-table {
border-radius: 14px;
border: 1px solid rgba(30,64,175,.75);
background: radial-gradient(circle at top left, rgba(15,23,42,.96), rgba(2,6,23,1));
padding: 6px 8px;
margin-bottom: 8px;
box-shadow:
0 0 0 1px rgba(15,23,42,1),
0 10px 22px rgba(15,23,42,.85);
}
/* linha */
.placa-table .row {
display: grid;
grid-template-columns: 130px minmax(0, 1fr);
column-gap: 8px;
align-items: center;
padding: 4px 0;
border-bottom: 1px dashed rgba(51,65,85,.7);
font-size: 12px;
}
.placa-table .row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
/* coluna "campo" */
.placa-table .campo {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(148,163,184,.9);
}
/* coluna "valor" */
.placa-table .valor {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
color: #e5e7eb;
word-break: break-word;
}
/* Destaques de status */
.placa-table .valor.status-ok {
color: #4ade80;
}
.placa-table .valor.status-erro {
color: #fb7185;
}
/* Mensagem bruta pode precisar quebrar linha bonitinho */
.placa-table .valor.valor-msg-bruta {
font-size: 11px;
line-height: 1.4;
color: #cbd5f5;
}
/* Loading / aviso vermelho */
.placa-loading {
font-size: 12px;
color: #e5e7eb;
padding: 8px 4px;
text-align: center;
}
.placa-loading[style*="ff7777"] {
color: #fb7185 !important;
}
/* ===============================
RESPONSIVO FLOAT
=============================== */
@media (max-width: 640px) {
.placa-wrap {
min-width: 100%;
max-width: 100%;
border-radius: 0;
}
.placa-table .row {
grid-template-columns: 1fr;
row-gap: 2px;
padding: 5px 0;
}
.placa-table .campo {
font-size: 10px;
opacity: .85;
}
.placa-table .valor {
font-size: 11px;
}
}
/* barra de ações dentro do painel (topo do card) */
.ear-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-bottom: 4px;
}
/* ajuste específico quando estiver dentro do card de aprovados */
.ear-toolbar--panel {
padding-bottom: 4px;
border-bottom: 1px dashed rgba(51,65,85,.7);
}
.ear-copy-all-btn::before {
content: "⧉";
font-size: 10px;
}
.ear-copy-all-btn:hover {
background: rgba(17,24,39,1);
border-color: #22d3ee;
color: #e5e7eb;
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(56,189,248,.5),
0 10px 22px rgba(15,23,42,.95);
}
.ear-copy-all-btn:active {
transform: translateY(0);
box-shadow:
0 0 0 1px rgba(56,189,248,.4),
0 6px 12px rgba(15,23,42,.9);
}
/* barra de ações dentro do painel (topo do card) */
.ear-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-bottom: 4px;
}
/* ajuste específico quando estiver dentro do card de aprovados */
.ear-toolbar--panel {
padding-bottom: 4px;
border-bottom: 1px dashed rgba(51,65,85,.7);
}
.ear-copy-all-btn::before {
content: "⧉";
font-size: 10px;
}
.ear-copy-all-btn:hover {
background: rgba(17,24,39,1);
border-color: #22d3ee;
color: #e5e7eb;
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(56,189,248,.5),
0 10px 22px rgba(15,23,42,.95);
}
.ear-copy-all-btn:active {
transform: translateY(0);
box-shadow:
0 0 0 1px rgba(56,189,248,.4),
0 6px 12px rgba(15,23,42,.9);
}
/* 0000000000000000000000000000000 */
/* ===== CNH AVANÇADA – LAYOUT HARD ===== */
.cnh-wrap-pro {
padding: 18px 20px 24px;
}
.cnh-panel-pro {
background: #0f1117;
border-radius: 16px;
padding: 18px 20px 22px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* HEADER */
.cnh-header-pro {
display: flex;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
align-items: flex-start;
}
.cnh-header-left {
max-width: 60%;
}
.cnh-subtitle-pro {
margin-top: 4px;
color: #a0a6b8;
font-size: 13px;
}
.placa-badge--cnh {
background: linear-gradient(135deg, #3b82f6, #22c55e);
border-radius: 999px;
padding: 3px 10px;
font-size: 11px;
}
.cnh-header-right {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
}
.cnh-header-pill {
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.cnh-header-pill--pro {
background: rgba(246, 189, 22, 0.08);
color: #f6bd16;
border: 1px solid rgba(246, 189, 22, 0.4);
}
.cnh-header-pill--live {
background: rgba(34, 197, 94, 0.12);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.4);
}
/* GRID PRINCIPAL */
.cnh-grid-pro {
display: grid;
grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
gap: 18px;
}
.cnh-card-pro {
background: rgba(15, 17, 23, 0.9);
border-radius: 14px;
padding: 14px 14px 16px;
border: 1px solid rgba(148, 163, 184, 0.18);
}
/* ESQUERDA */
.cnh-card-form {
margin-bottom: 10px;
}
.cnh-label-pro {
display: block;
font-size: 13px;
margin-bottom: 6px;
color: #e5e7eb;
}
.cnh-input-group {
display: flex;
gap: 8px;
}
.cnh-input-pro {
flex: 1;
height: 38px;
}
.cnh-btn-consultar {
white-space: nowrap;
height: 38px;
padding-inline: 14px;
font-size: 13px;
}
.cnh-status-bar {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cnh-btn-clear {
height: 30px;
font-size: 11px;
padding-inline: 10px;
background: transparent;
border: 1px solid rgba(148, 163, 184, 0.5);
}
.cnh-hint-pro {
margin-top: 6px;
font-size: 11px;
color: #9ca3af;
}
/* CHIPS DE STATUS */
.cnh-chip-status {
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
}
.cnh-chip--idle {
background: rgba(148, 163, 184, 0.15);
color: #e5e7eb;
}
.cnh-chip--ready {
background: rgba(59, 130, 246, 0.15);
color: #bfdbfe;
}
.cnh-chip--loading {
background: rgba(234, 179, 8, 0.18);
color: #facc15;
}
.cnh-chip--ok {
background: rgba(34, 197, 94, 0.18);
color: #bbf7d0;
}
.cnh-chip--error {
background: rgba(248, 113, 113, 0.18);
color: #fecaca;
}
/* NOTAS */
.cnh-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.cnh-card-title {
font-size: 13px;
font-weight: 600;
color: #e5e7eb;
}
.cnh-notes-list {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: #9ca3af;
}
.cnh-notes-list li::before {
content: "• ";
color: #3b82f6;
}
/* DIREITA – RESULT */
.cnh-card-head-result {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
margin-bottom: 10px;
}
.cnh-card-head-main {
display: flex;
flex-direction: column;
gap: 3px;
}
.cnh-result-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #6b7280;
}
.cnh-result-title {
font-size: 16px;
font-weight: 600;
color: #e5e7eb;
}
.cnh-result-meta {
font-size: 11px;
color: #9ca3af;
}
.cnh-card-head-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.cnh-mini-btn {
height: 30px;
font-size: 11px;
padding-inline: 10px;
}
/* CHIP DE RISCO GLOBAL */
.cnh-risk-chip {
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cnh-risk-chip--idle {
background: rgba(148, 163, 184, 0.16);
color: #e5e7eb;
border: 1px solid rgba(148, 163, 184, 0.4);
}
.cnh-risk-chip--ok {
background: rgba(34, 197, 94, 0.18);
color: #bbf7d0;
border: 1px solid rgba(34, 197, 94, 0.6);
}
.cnh-risk-chip--warn {
background: rgba(234, 179, 8, 0.18);
color: #fef3c7;
border: 1px solid rgba(234, 179, 8, 0.6);
}
.cnh-risk-chip--high {
background: rgba(248, 113, 113, 0.18);
color: #fecaca;
border: 1px solid rgba(248, 113, 113, 0.7);
}
/* GRID INTERNO DOS RESULTADOS */
.cnh-table-wrap-pro {
background: rgba(15, 17, 23, 0.8);
border-radius: 12px;
padding: 10px 10px 12px;
border: 1px solid rgba(31, 41, 55, 0.8);
}
.cnh-results-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
gap: 10px;
}
.cnh-block {
background: radial-gradient(circle at top, rgba(55, 65, 81, 0.3), rgba(15, 23, 42, 0.9));
border-radius: 10px;
padding: 8px 9px 9px;
border: 1px solid rgba(55, 65, 81, 0.7);
}
.cnh-block-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9ca3af;
margin-bottom: 6px;
}
.cnh-table {
font-size: 12px;
}
.cnh-table .row {
display: grid;
grid-template-columns: 0.95fr 1.6fr;
column-gap: 4px;
padding: 3px 0;
border-bottom: 1px dashed rgba(55, 65, 81, 0.7);
}
.cnh-table .row:last-child {
border-bottom: none;
}
.cnh-table .campo {
color: #9ca3af;
}
.cnh-table .valor {
color: #e5e7eb;
}
.valor-msg-bruta {
white-space: pre-wrap;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: #e5e7eb;
}
/* MENSAGEM VAZIA/ERRO NO BLOCO */
.cnh-empty-msg {
font-size: 12px;
color: #fca5a5;
padding: 6px 0;
}
/* FOOTER */
.cnh-footer-pro {
margin-top: 10px;
border-top: 1px dashed rgba(55, 65, 81, 0.8);
padding-top: 6px;
}
.cnh-footer-text {
font-size: 11px;
color: #9ca3af;
}
/* PLACEHOLDER */
.cnh-placeholder-msg {
font-size: 12px;
color: #9ca3af;
}
/* RESPONSIVO */
@media (max-width: 960px) {
.cnh-header-pro {
flex-direction: column;
}
.cnh-header-left {
max-width: 100%;
}
.cnh-header-right {
align-items: flex-start;
}
.cnh-grid-pro {
grid-template-columns: minmax(0, 1fr);
}
.cnh-results-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ZOOM */
/* Zoom global 80% sem scroll e sem bug de fundo */
/* corpo normal, cobrindo a tela toda e sem scroll */
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
/* usa a MESMA cor de fundo do seu painel (ajusta se precisar) */
body {
background: #050b1d; /* ou o background do seu style.css */
}
/* wrapper que vai ser “diminuído” */
.painel-root {
width: 125vw; /* 100 / 0.8 = 125 */
height: 125vh;
transform: scale(1.0);
transform-origin: top left;
}