/* ========= Global tokens, reset, base, componentes ========= */
:root{
  /* Brand — laranja vivo que funciona no branco e no preto */
  --brand:#ff6a00;
  --brand-600:#e35f00;
  --brand-700:#c95500;
  --brand-50:#fff5ee;

  /* Monocromáticos */
  --ink:#111;            /* texto principal */
  --muted:#6b7280;
  --line:#e5e7eb;

  /* Superfícies */
  --bg:#fff;
  --card:#fff;
  --elev:0 8px 28px rgba(17,17,17,.06);

  /* Acessórios */
  --success:#16a34a;
  --danger:#dc2626;
  --warning:#f59e0b;

  /* Forma */
  --radius:14px;

  /* Header */
  --header-h:56px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font:16px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Layout utilitário */
.container{max-width:1000px; margin:0 auto; padding:20px}
.stack{display:flex; flex-direction:column; gap:16px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width: 880px){ .grid-2{grid-template-columns:1fr} }

/* Títulos */
.h1{font-size:1.6rem; font-weight:700; margin:0}
.h2{font-size:1.2rem; font-weight:700; margin:0 0 8px}

/* Card */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--elev);
}

/* Botões */
.btn{
  --btn-bg:#111; --btn-fg:#fff; --btn-bd:transparent;
  display:inline-grid; grid-auto-flow:column; align-items:center; justify-content:center;
  gap:10px; padding:12px 16px; border-radius:12px;
  border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer; text-decoration:none; transition:transform .02s, filter .2s, background .2s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{ --btn-bg:var(--brand); --btn-fg:#fff }
.btn-primary:hover{ filter:brightness(.95) }
.btn-outline{ --btn-bg:#fff; --btn-fg:var(--brand); --btn-bd:var(--brand) }
.btn-outline:hover{ background:var(--brand-50) }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line) }

/* Botão “perigo” suave (para logout etc.) */
.btn-danger-soft{
  --btn-bg:#fee2e2; --btn-fg:#b91c1c; --btn-bd:#fecaca;
  display:inline-flex; gap:8px; align-items:center;
  padding:10px 12px; border-radius:10px; border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg); cursor:pointer;
}
.btn-danger-soft:hover{ filter:brightness(.98) }

/* Inputs */
.form{display:grid; gap:16px}
.form-row{display:grid; gap:16px}
.form-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:880px){ .form-2{grid-template-columns:1fr} }
.label{display:block; font-weight:600; margin:0 0 8px}
.input, .select, .textarea{
  width:100%; padding:12px 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.textarea{min-height:110px; resize:vertical}
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,106,0,.14);
}

/* Switch (reutilizável) */
.switch{position:relative; display:inline-block; width:56px; height:32px}
.switch input{opacity:0; width:0; height:0}
.switch .slider{
  position:absolute; inset:0; cursor:pointer; background:#cbd5e1; border-radius:999px; transition:.2s;
}
.switch .slider:before{
  content:""; position:absolute; left:4px; bottom:4px; width:24px; height:24px;
  background:#fff; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{background:var(--brand)}
.switch input:checked + .slider:before{ transform:translateX(24px) }

/* Chips/Tags */
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:#fff; cursor:pointer; user-select:none; font-size:.95rem;
}
.tag.is-selected{ background:var(--brand-50); border-color:var(--brand); }

/* Alert */
.alert{ padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:#f8fafc; }
.alert--error{border-color:#fecaca; background:#fff1f2; color:#991b1b}
.alert--success{border-color:#bbf7d0; background:#f0fdf4; color:#065f46}

/* Header global (reutilizável) */
.site-header{
  position:sticky; top:0; z-index:20; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 16px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 20px rgba(0,0,0,.04);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--brand); font-weight:800; letter-spacing:.2px}
.brand i{font-size:18px}

/* Badge (reutilizável) */
.badge{
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#ef4444; color:#fff; font-size:.75rem; font-weight:700;
  border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.page-header{ display:flex; align-items:center; justify-content:flex-start; margin-bottom:16px; }
.page-header > .container{ display:flex; align-items:center; }
.page-wrap{ padding:20px } /* usado pelo profile e agora history */
.back-btn{ gap:8px }

/* Utilitários */
.hidden{display:none !important}


/* ====== Utilitários adicionais (auth + geral) ====== */
.row-between{display:flex; justify-content:space-between; align-items:center; gap:8px}
.muted{color:var(--muted)}
.link{color:var(--brand); text-decoration:none}
.link:hover{filter:brightness(.9); text-decoration:underline}
.link-muted{color:var(--muted); text-decoration:none}
.link-muted:hover{color:var(--ink); text-decoration:underline}
.text-center{text-align:center}
.mt-12{margin-top:12px}
.help{font-size:.88rem;}

/* Campos inválidos + mensagem de campo */
.field-error{ margin-top:6px; color:var(--danger); font-size:.9rem; min-height:1em }
.input.is-invalid, .select.is-invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}

/* Spinner padrão para qualquer botão com .loading */
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.6); border-top-color:#fff;
  display:none; animation:spin 1s linear infinite;
}
.btn.loading .spinner{display:inline-block}
.btn.loading .btn-text{opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}

.card-header{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card-body{ padding:16px }