:root {
  /* 👇 A MÁGICA ACONTECE AQUI */
  color-scheme: dark; 
  
  --bg: #0b0c10;
  --card: rgba(255,255,255,.06);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  /* ... resto das variáveis iguais ... */
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 👇 ADICIONE ISSO PARA O ÍCONE DO CALENDÁRIO FICAR BRANCO */
::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.6;
}
::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ... o resto do seu CSS continua igual ... */

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family: var(--font), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 30% -10%, rgba(125,211,252,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(167,139,250,.12), transparent 55%),
    var(--bg);
}

.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 14px 28px;
  gap:14px;
}

.top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.flagIcon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 3px;
}


.logo{
  width:140px;
  height:auto;
  display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.subtitle{
  margin:0;
  font-size:14px;
  color:var(--muted);
  text-align:center;
}

.card{
  width:min(520px, 100%);
  background:linear-gradient(180deg, var(--card), rgba(255,255,255,.04));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.progress{ height:6px; background:rgba(255,255,255,.06); }
.progress__bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(125,211,252,.85), rgba(167,139,250,.85));
  transition:width .35s ease;
}

#app{ padding:18px 18px 10px; }

.h1{ font-size:20px; line-height:1.2; margin:0 0 6px; }
.p{ margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.45; }

.field{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.label{ font-size:13px; color:var(--muted); }

.input, .file{
  width:100%;
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:var(--text);
  padding:12px 12px;
  outline:none;
  font-size:15px;
}
.input:focus{
  border-color:rgba(125,211,252,.55);
  box-shadow:0 0 0 4px rgba(125,211,252,.14);
}

.row{ display:flex; gap:10px; }
.row > *{ flex:1; }

.helper{ font-size:12px; color:var(--muted2); margin-top:-2px; }

.err{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(251,113,133,.35);
  background:rgba(251,113,133,.10);
  font-size:13px;
}
.ok{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(52,211,153,.35);
  background:rgba(52,211,153,.10);
  font-size:13px;
}

.actions{ display:flex; gap:10px; margin-top:16px; }
.btn{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:600;
  transition:transform .04s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
.btn:active{ transform:translateY(1px); }
.btn.primary{
  border-color:rgba(125,211,252,.35);
  background:rgba(125,211,252,.12);
}
.btn.primary:hover{ background:rgba(125,211,252,.16); border-color:rgba(125,211,252,.50); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.pill{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  cursor:pointer;
  user-select:none;
  font-weight:600;
}
.pill.active{
  border-color:rgba(125,211,252,.55);
  background:rgba(125,211,252,.12);
}

.footer{
  padding:10px 18px 16px;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer__hint{ font-size:12px; color:var(--muted2); }

.tiny{
  width:min(520px, 100%);
  text-align:center;
  color:var(--muted2);
  font-size:12px;
}

/* top loading bar */
#top-loader{
  position:fixed; top:0; left:0; right:0;
  height:3px;
  background:rgba(255,255,255,.06);
  z-index:50;
  overflow:hidden;
}
#top-loader .bar{
  height:100%;
  width:40%;
  background:linear-gradient(90deg,
    rgba(125,211,252,0),
    rgba(125,211,252,.95),
    rgba(167,139,250,.95),
    rgba(125,211,252,0)
  );
  transform:translateX(-60%);
  animation:loaderMove 1.1s ease-in-out infinite;
}
#top-loader.hide{ display:none; }

@keyframes loaderMove{
  0%{ transform:translateX(-60%); }
  50%{ transform:translateX(60%); }
  100%{ transform:translateX(140%); }
}