/* Telas da conta (entrar, convite, equipe, administração) com as cores do app */
:root {
  --bg: oklch(.175 .006 250); --panel: oklch(.217 .007 250); --soft: oklch(.26 .008 250); --chip: oklch(.29 .012 250);
  --line: oklch(.31 .007 250); --ink: oklch(.94 .005 90); --muted: oklch(.67 .012 250);
  --accent: oklch(.651 .158 43.8); --accent-ink: oklch(.16 .01 35); --accent-text: oklch(.76 .135 47); --accent-bg: oklch(.27 .04 45);
  --ok: oklch(.75 .11 160); --ok-bg: oklch(.275 .033 160); --warn: oklch(.82 .12 70); --warn-bg: oklch(.29 .043 65);
  --bad: oklch(.7 .16 25); --bad-bg: oklch(.28 .05 25); --info: oklch(.77 .08 235); --info-bg: oklch(.27 .035 235);
  --r: 8px; --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --display: 'Manrope', 'DM Sans', sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); min-height: 100vh; }
a { color: var(--accent-text); }
.centro { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.cartao { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.largo { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.marca { display: flex; align-items: center; gap: 8px; font: 700 16px var(--display); margin-bottom: 20px; text-decoration: none; color: var(--ink); }
.marca i { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); display: inline-block; }
.marca span { color: var(--accent-text); }
h1 { font: 700 22px var(--display); margin: 0 0 4px; }
h2 { font: 700 16px var(--display); margin: 26px 0 10px; }
.mut { color: var(--muted); font-size: 13px; margin: 6px 0; }
label { display: block; font-size: 12px; color: var(--muted); margin: 14px 0 4px; }
input, select { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 11px;
  color: var(--ink); font: 15px var(--font); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r); padding: 9px 14px;
  font: 600 14px var(--font); border: 1px solid var(--line); background: var(--soft); color: var(--ink); cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { border-color: var(--muted); }
button.pri { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
button.pri:hover { filter: brightness(1.08); }
button.cheio { width: 100%; margin-top: 18px; padding: 11px; }
button.peq, .btn.peq { padding: 5px 10px; font-size: 12px; }
button.perigo { color: var(--bad); }
button:disabled { opacity: .55; cursor: default; }
.aviso { border-radius: var(--r); padding: 9px 11px; font-size: 13px; margin-top: 12px; overflow-wrap: anywhere; }
.aviso.info { background: var(--info-bg); color: var(--info); }
.aviso.ok { background: var(--ok-bg); color: var(--ok); }
.aviso.warn { background: var(--warn-bg); color: var(--warn); }
.aviso.ruim { background: var(--bad-bg); color: var(--bad); }
.aviso[hidden] { display: none; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--chip); color: var(--ink); white-space: nowrap; }
.chip.acc { background: var(--accent-bg); color: var(--accent-text); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.ruim { background: var(--bad-bg); color: var(--bad); }
.lista { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.linha { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.linha:last-child { border-bottom: 0; }
.av { width: 32px; height: 32px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.cresce { flex: 1; min-width: 150px; }
.cresce b { display: block; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.topo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.topo .marca { margin: 0; }
.topo .voltar { margin-left: auto; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 5px 9px; font-size: 12px; background: var(--bg); color: var(--muted); }
.seg button.on { background: var(--accent-bg); color: var(--accent-text); }
.tog { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; margin: 0; }
.tog input { width: auto; accent-color: var(--accent); }
.vazio { padding: 14px 12px; color: var(--muted); font-size: 13px; background: var(--panel); }
.copiar { display: flex; gap: 8px; margin-top: 8px; }
.copiar input { font-size: 13px; }