@charset "utf-8";
/* CSS Document */

:root{ --bg:#fff; --card:#2b2b2b; --muted:#2b2b2b; --accent:#22d3ee; --accent-2:#a78bfa; --ok:#10b981; --warn:#f59e0b; --err:#ef4444; --border:#2b2b2b; }

.visivel{display: none}

.container{max-width:80%; margin:5px auto; padding:0 16px}

.card{background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:0 ; border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding:24px}

.subtitle{color:var(--muted); margin-top:0}

.pill{display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:999px; font-size:.85rem; color:#c7d2fe}

.grid{display:grid; gap:16px}
@media(min-width:860px){ .grid-2{grid-template-columns:1fr 1fr} }

fieldset{border:1px solid var(--border); border-radius:16px; padding:16px 16px 8px}

legend{padding:0 8px; color:#2b2b2b}

.item{ gap:12px; padding:10px 12px; border-radius:12px; color: #2b2b2b;}

.item:hover{background:rgba(123,123,123,0.06)}

.q{flex:1; font-weight: bold;}

.opts{ gap:12px; flex-wrap:wrap;}

label.opt{display:flex; align-items:center; gap:8px; padding-top:4px; cursor:pointer; font-weight: 400}

input[type="radio"]{accent-color:#60a5fa}

.actions{display:flex; flex-wrap:wrap; gap:20px; margin-top:18px; justify-content: center; align-items: center;}

button{border:0 solid; font-size: 1rem; background:#2b2b2b; font-weight:700; color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer}

button.primary{background:#1694DB; color:#181818; font-weight:700}

button.ghost{background:#1BC43F; color: #181818; font-weight:700}

.progress{height:10px; background:#0b1224; border:1px solid var(--border); border-radius:999px; overflow:hidden; margin:16px 0;}

.pp{position: sticky; z-index: 1000;}

.bar{height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .25s ease;}

.result{margin-top:20px; padding:16px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.025); color: #2b2b2b; text-align:center}

.muted{color:var(--muted)}

.code{font-family: Open Sans; background:#fff; color: #2b2b2b; border:1px solid var(--border); padding:2px 8px; border-radius:8px; text-align: center; align-items: center; align-content: center; }

.pair{display:grid; grid-template-columns:1fr 1fr; gap:8px}

.tag{display:inline-block; padding:4px 10px; border-radius:999px; border:0; margin-right:6px; background-color: #2b2b2b; color: #fff;}

.estima{font-weight: bold;}
    
.small{color: #2b2b2b; align-content: center; align-items: center; text-align: center;}
    
.foot{font-size:.9rem; color:var(--muted)}
    
/* barra centralizada */
.dim-bar-container{width:80%; margin:0 auto; align-items: center; align-content: center;align-items: center }

.dim-bar{position:relative; height:30px; background:#f3f4f6; border-radius:16px; border:1px solid rgba(0,0,0,0.06); overflow:visible}

.dim-bar .center-line{position:absolute; left:50%; top:3px; bottom:3px; width:2px; background:#9ca3af; transform:translateX(-1px)}

.dim-bar .fill-left, .dim-bar .fill-right{position:absolute; top:0; bottom:0; transition:width .45s ease}

.dim-bar .fill-left{right:50%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-top-left-radius:16px; border-bottom-left-radius:16px}

.dim-bar .fill-right{left:50%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-top-right-radius:16px; border-bottom-right-radius:16px}