/* ====================== Tokens ====================== */
:root{
  --brand-500:#00bd3d;
  --brand-600:#00a337;
  --brand-700:#008b32;

  /* Light */
  --page-bg:#f0fdf4;
  --card-bg:#ffffff;
  --card-border:#e5e7eb;
  --left-bg:#e9f7ee;

  --text-primary:#111827;
  --text-secondary:#6b7280;
  --input-bg:#ffffff;
  --input-bd:#d1d5db;
  --input-text:#111827;

  --ring: 0 0 0 3px rgba(0,189,61,.25);
  --topbar-h:44px;
  --shadow-lg: 0 35px 90px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.03);
}
/* Dark */
html.dark{
  --page-bg:#0b0c0c;
  --card-bg:#171b1c;
  --card-border:#1f2629;
  --left-bg:#2b3034;

  --text-primary:#f8fafc;
  --text-secondary:#a9b6bf;

  --input-bg:#171b1c;
  --input-bd:#2b3236;
  --input-text:#e5e7eb;

  --shadow-lg: 0 35px 90px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.03);
}

/* ====================== Base ====================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font: 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,'Helvetica Neue',Arial;
  background:var(--page-bg);
  color:var(--text-primary);
}
img{ max-width:100%; display:block }
.hidden{ display:none !important }
.mt-8{ margin-top:2rem }
.muted{ color:var(--text-secondary) }
.logo{ height:48px; margin:0 auto 12px; display:block }

/* === Swap de logo por tema === */
.only-light{ display:block; }
.only-dark { display:none;  }
html.dark .only-light{ display:none; }
html.dark .only-dark { display:block; }

/* Links */
a.link{ color:var(--brand-500); text-decoration:none; font-weight:700 }
a.link:hover{ text-decoration:underline }

/* ========= Topbar ========= */
.topline-bar{
  position:fixed; inset:0 0 auto 0; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:flex-end; gap:.75rem; padding:0 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(22,22,23,0));
  z-index:50; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
html:not(.dark) .topline-bar{
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(255,255,255,0));
}
.topline-bar::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg,#22c55e,#06b6d4,#6366f1); opacity:.95;
}

/* ========= Toggle de tema (EXATO do login) ========= */
.theme-toggle{
  --w:78px; --h:34px; --p:3px; --k:28px; --dx: calc(var(--w) - var(--k) - var(--p)*2);
  position:relative; width:var(--w); height:var(--h); padding:var(--p); border-radius:999px;
  cursor:pointer; outline:none; border:1px solid; display:inline-block; isolation:isolate;
  background:#eceff3; border-color:#d5d9e0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.05);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
html.dark .theme-toggle{ background:#2f323a; border-color:#3a3e46; }
.theme-toggle .slot{
  position:absolute; top:50%; width:28px; height:28px; margin-top:-14px;
  display:grid; place-items:center; pointer-events:none; opacity:.75;
}
.theme-toggle .slot.left{ left:8px; }
.theme-toggle .slot.right{ right:8px; }
.theme-toggle .slot svg{ width:18px; height:18px; }
.theme-toggle .slot svg *{ stroke:#9aa3af; }
html.dark .theme-toggle .slot svg *{ stroke:#8a93a1; }
.theme-toggle .thumb{
  position:absolute; top:var(--p); left:var(--p); width:var(--k); height:var(--k); border-radius:999px;
  transform: translateX(0);
  transition: transform .38s cubic-bezier(.28,1.2,.43,1), box-shadow .2s ease, background .3s ease;
  display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,.25) 45%, rgba(255,255,255,.08) 65%),
    linear-gradient(180deg,#f8c266,#f59e0b);
  box-shadow: 0 4px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.25);
}
.theme-toggle .thumb svg{ width:22px; height:22px; display:block; }
.theme-toggle .thumb .thumb-sun{ display:block; }
.theme-toggle .thumb .thumb-moon{ display:none; }
html.dark .theme-toggle .thumb{
  transform: translateX(var(--dx));
  background:
    radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,.25) 45%, rgba(255,255,255,.08) 65%),
    linear-gradient(180deg,#6ba6ff,#2563eb);
  box-shadow: 0 6px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.22);
}
html.dark .thumb .thumb-sun{ display:none; }
html.dark .thumb .thumb-moon{ display:block; }
.theme-toggle:active .thumb{ transform:translateX(0) scale(.96); }
html.dark .theme-toggle:active .thumb{ transform:translateX(calc(var(--dx))) scale(.96); }
.theme-toggle:focus-visible{ box-shadow: 0 0 0 3px rgba(99,102,241,.35); }
.theme-toggle.t-anim::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  animation: sweep .55s ease both;
}
@keyframes sweep{ from{transform:translateX(-40%);opacity:0}35%{opacity:1}to{transform:translateX(40%);opacity:0} }

/* ========= Layout ========= */
.page-shell{
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right, 0px))
    calc(20px + env(safe-area-inset-bottom, 0px))
    calc(16px + env(safe-area-inset-left, 0px));
  padding-top: calc(var(--topbar-h) + 16px + env(safe-area-inset-top, 0px));
  min-height: 100dvh;
  display:flex; align-items:center; justify-content:center;
}

/* ========= Card ========= */
.auth-card{
  width:100%;
  max-width: 560px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  overflow:hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
  margin-inline:auto;
}
.auth-card__inner{ padding: 24px 20px; }

/* Cabeçalho */
.hero{ text-align:center; margin-bottom: 18px; }
.title{ margin:4px 0 2px; font-weight:900; font-size:28px; line-height:1.12; color:var(--text-primary) }
.subtitle{ margin:0 0 18px; color:var(--text-secondary); font-size:14px }

/* ========= Form/Inputs ========= */
.vspace > * + * { margin-top: 16px; }
.field{ margin-bottom: 14px }
.label{ display:block; font-weight:700; color:var(--text-primary); margin-bottom:6px }

.input{
  height:48px; width:100%; padding:0 14px;
  background:var(--input-bg); border:1px solid var(--input-bd);
  color:var(--input-text); border-radius:10px; outline:none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.input::placeholder{ color:var(--text-secondary); opacity:.9; }
.input:focus{ border-color:var(--brand-500); box-shadow:0 0 0 2px rgba(0,189,61,.35); }

.input-wrap{ position:relative }
.icon-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; height:32px; width:32px; border-radius:8px;
  color:var(--text-secondary); background:transparent; border:0; cursor:pointer;
}
.icon-btn:hover{ background:rgba(0,0,0,.06) }
html.dark .icon-btn:hover{ background:rgba(255,255,255,.06) }
.icon-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* ========= Botões ========= */
.btn{
  height:48px; width:100%; border-radius:10px; font-weight:800; border:0; cursor:pointer;
  transition:filter .12s ease, opacity .12s ease, transform .03s ease;
}
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.btn[data-variant="green"]{ background:var(--brand-500); color:#fff }
.btn[data-variant="green"]:hover{ filter:brightness(.96) }
.btn[data-variant="blue"]{ background:#3b82f6; color:#fff }
.btn[data-variant="blue"]:hover{ filter:brightness(.96) }
.btn[data-variant="ghost"]{
  background:transparent; color:#334155; border:1px solid #e2e8f0;
}
html.dark .btn[data-variant="ghost"]{
  color:#cbd5e1; border-color:#3a3e46;
}

/* barra de progresso interna */
.btn.btn-progress{ position:relative; overflow:hidden; isolation:isolate; }
.btn.btn-progress::before{
  content:""; position:absolute; inset:0; width:var(--prog,0%); border-radius:inherit; z-index:0;
  background:#22c55e; transition: width .18s ease;
}
.btn.btn-progress .btn-text{ position:relative; z-index:1; }

/* ========= Toast ========= */
.toast{
  border-radius: 10px; padding: 12px 14px; font-size:14px; border:1px solid;
}
.toast.error{ border-color:#fca5a5; background:#fef2f2; color:#991b1b }
.toast.warn { border-color:#fcd34d; background:#fffbeb; color:#92400e }
.toast.ok   { border-color:#86efac; background:#f0fdf4; color:#14532d }
html.dark .toast.error{ border-color:#7f1d1d; background:rgba(185,28,28,.22); color:#fecaca }
html.dark .toast.warn { border-color:#78350f; background:rgba(217,119,6,.22); color:#fde68a }
html.dark .toast.ok   { border-color:#14532d; background:rgba(34,197,94,.18); color:#bbf7d0 }

/* ========= Link voltar ========= */
.back-login{ margin-top:20px; text-align:center; color:var(--text-secondary) }

/* ========= Modal ========= */
.modal-overlay{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px); z-index:100;
}
.modal-overlay[data-open="true"]{ display:grid; }
.modal{
  width:min(520px, 92vw); border-radius:16px; overflow:hidden;
  background:#111214; color:#e5e7eb; border:1px solid #2b2f36;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  transform: translateY(14px) scale(.98);
  opacity:0; transition:.2s ease;
}
html:not(.dark) .modal{ background:#fff; color:#111827; border-color:#e5e7eb; }
.modal-overlay[data-open="true"] .modal{ transform: translateY(0) scale(1); opacity:1; }
.modal .head{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06);
}
html:not(.dark) .modal .head{ border-bottom-color:#f1f5f9; }
.modal .body{ padding:16px; font-size:14px; line-height:1.6; }
.modal .foot{
  display:flex; gap:8px; justify-content:flex-end; padding:14px 16px; border-top:1px solid rgba(255,255,255,.06);
}
html:not(.dark) .modal .foot{ border-top-color:#f1f5f9; }
.title-sm{ margin:0; font-size:18px; font-weight:800 }

/* ========= Acessibilidade ========= */
:focus-visible { outline: var(--ring); outline-offset: 2px; }