/* Painel n8n — identidade MAI gestão / ADV club */
:root{
  --bg:        oklch(0.155 0.008 68);
  --bg-2:      oklch(0.135 0.008 68);
  --surface:   oklch(0.195 0.008 68);
  --surface-2: oklch(0.235 0.010 70);
  --text:      oklch(0.955 0.012 85);
  --muted:     oklch(0.66 0.014 75);
  --faint:     oklch(0.52 0.012 75);
  --border:    oklch(0.30 0.010 70);
  --border-2:  oklch(0.36 0.012 70);
  --accent:    oklch(0.72 0.09 72);
  --accent-hi: oklch(0.80 0.10 74);
  --accent-ink:oklch(0.16 0.01 68);
  --good:      oklch(0.74 0.11 150);
  --good-bg:   oklch(0.30 0.05 150);
  --warn:      oklch(0.80 0.10 75);
  --warn-bg:   oklch(0.32 0.05 70);
  --danger:    oklch(0.68 0.16 25);
  --danger-bg: oklch(0.32 0.09 25);
  --radius:    12px;
  --radius-sm: 10px;
  --shadow:    0 24px 60px -30px rgba(0,0,0,.7);
  --sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --serif: "Playfair Display", ui-serif, Georgia, serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-hi); text-decoration:underline; text-underline-offset:3px; }

/* ---------- tipografia ---------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); margin:0 0 .6rem; font-weight:600;
}
.display{ font-family:var(--serif); font-weight:500; font-size:2rem; line-height:1.1;
  margin:0 0 .5rem; letter-spacing:-.01em; text-wrap:balance; }
.display em{ font-style:italic; color:var(--accent); }
.display-sm{ font-family:var(--serif); font-weight:500; font-size:1.35rem; margin:0; }
.display-sm em{ font-style:italic; color:var(--accent); }
.lead{ color:var(--muted); margin:.2rem 0 0; max-width:46ch; }
.muted{ color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- marca ---------- */
.brand{ display:flex; flex-direction:column; align-items:center; line-height:.92; }
.brand-inline{ flex-direction:row; align-items:baseline; gap:.35rem; }
.brand-adv{ font-family:var(--sans); font-weight:700; letter-spacing:.24em;
  font-size:1.5rem; padding-left:.24em; }
.brand-club{ font-family:var(--serif); font-style:italic; color:var(--accent);
  font-size:1.5rem; font-weight:600; }
.brand-inline .brand-adv{ font-size:1.05rem; }
.brand-inline .brand-club{ font-size:1.05rem; }

/* ---------- botões ---------- */
.btn{ font-family:var(--sans); font-weight:600; font-size:.92rem; cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius-sm); padding:.7rem 1.15rem;
  transition:.16s ease; display:inline-flex; align-items:center; gap:.45rem;
  line-height:1; white-space:nowrap; }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn-sm{ padding:.5rem .8rem; font-size:.82rem; }
.btn-block{ width:100%; justify-content:center; }
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ background:var(--accent-hi); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-2); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--faint); }
.btn-soft{ background:var(--surface-2); color:var(--text); border-color:var(--border-2); }
.btn-soft:hover{ background:var(--surface); }
.btn-danger{ background:var(--danger); color:oklch(0.16 0.01 25); }
.btn-danger:hover{ filter:brightness(1.08); }
.btn-danger-ghost{ background:transparent; color:var(--danger); border-color:transparent; }
.btn-danger-ghost:hover{ background:var(--danger-bg); }
.btn[disabled]{ opacity:.55; cursor:progress; }
.icon-btn{ background:transparent; border:0; color:var(--muted); font-size:1rem;
  cursor:pointer; padding:.3rem .5rem; border-radius:8px; }
.icon-btn:hover{ background:var(--surface-2); color:var(--text); }

/* ---------- formulários ---------- */
.form{ margin-top:1.4rem; }
.field{ margin-bottom:1.05rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.45rem; }
.field input[type=text], .field input[type=password]{
  width:100%; background:var(--bg-2); color:var(--text); font-family:var(--sans);
  font-size:.95rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.72rem .85rem; transition:.16s; }
.field input::placeholder{ color:var(--faint); }
.field input:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px oklch(0.72 0.09 72 / .18); background:var(--bg); }
.hint{ display:block; color:var(--faint); font-size:.78rem; margin-top:.4rem; }
.hint code, code{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.85em;
  color:var(--accent); background:oklch(0.72 0.09 72 / .10); padding:.05em .35em; border-radius:5px; }
.check{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--muted);
  cursor:pointer; margin:.2rem 0 .4rem; }
.check input{ accent-color:var(--accent); width:1.05rem; height:1.05rem; }
.check-danger{ color:var(--danger); }
.dns-status{ margin-top:.6rem; font-size:.83rem; padding:.55rem .7rem; border-radius:8px;
  border:1px solid var(--border); line-height:1.45; }
.dns-status.checking{ color:var(--muted); }
.dns-status.ok{ color:var(--good); background:var(--good-bg); border-color:transparent; }
.dns-status.warn{ color:var(--warn); background:var(--warn-bg); border-color:transparent; }
.dns-status code{ color:inherit; background:oklch(1 0 0 / .10); }

/* ---------- login ---------- */
.login-body{ display:grid; place-items:center; padding:2rem 1.2rem;
  background:
    radial-gradient(120% 90% at 50% -10%, oklch(0.22 0.02 70 / .8), transparent 60%),
    radial-gradient(80% 60% at 90% 110%, oklch(0.24 0.04 72 / .35), transparent 55%),
    var(--bg); }
.login-wrap{ width:100%; max-width:430px; }
.login-card{ background:linear-gradient(180deg, var(--surface), var(--bg));
  border:1px solid var(--border); border-radius:var(--radius); padding:2.4rem 2.1rem 1.8rem;
  box-shadow:var(--shadow); }
.login-card .brand{ margin-bottom:2rem; }
.login-card .eyebrow{ text-align:left; }
.foot-note{ margin:1.8rem 0 0; text-align:center; color:var(--faint);
  font-size:.75rem; letter-spacing:.03em; }
.alert{ background:var(--danger-bg); border:1px solid oklch(0.68 0.16 25 / .4);
  color:oklch(0.9 0.06 30); border-radius:var(--radius-sm); padding:.7rem .9rem;
  font-size:.88rem; margin-bottom:1rem; }

/* ---------- topbar / layout ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.6rem; border-bottom:1px solid var(--border);
  background:oklch(0.145 0.008 68 / .8); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:20; }
.topnav{ display:flex; align-items:center; gap:1.1rem; }
.topnav-label{ color:var(--faint); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; }
.container{ max-width:1080px; margin:0 auto; padding:2.4rem 1.6rem 4rem; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.page-actions{ display:flex; gap:.6rem; align-items:center; }

/* ---------- grid de cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.1rem; }
.empty{ grid-column:1/-1; text-align:center; padding:3.5rem 1rem;
  border:1px dashed var(--border-2); border-radius:var(--radius); color:var(--muted); }
.empty .display-sm{ margin-bottom:.4rem; }
.card{ background:linear-gradient(180deg, var(--surface), oklch(0.17 0.008 68));
  border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem 1.3rem 1.1rem;
  transition:.18s; }
.card:hover{ border-color:var(--border-2); transform:translateY(-2px);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.8); }
.card-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.card-title{ font-family:var(--serif); font-weight:600; font-size:1.3rem; margin:0;
  word-break:break-word; }
.card-meta{ margin:1rem 0 1.1rem; display:grid; gap:.6rem; }
.card-meta div{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.card-meta dt{ color:var(--faint); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.card-meta dd{ margin:0; font-size:.9rem; text-align:right; word-break:break-all; }
.card-actions{ display:flex; flex-wrap:wrap; gap:.4rem; border-top:1px solid var(--border);
  padding-top:.95rem; }

/* ---------- pills ---------- */
.pill{ font-size:.72rem; font-weight:600; letter-spacing:.04em; padding:.28rem .6rem;
  border-radius:999px; text-transform:lowercase; white-space:nowrap; }
.pill-good{ color:var(--good); background:var(--good-bg); }
.pill-warn{ color:var(--warn); background:var(--warn-bg); }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1.2rem; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:oklch(0.10 0.008 68 / .72);
  backdrop-filter:blur(3px); }
.modal-dialog{ position:relative; width:100%; max-width:520px; background:var(--surface);
  border:1px solid var(--border-2); border-radius:var(--radius); box-shadow:var(--shadow);
  max-height:90vh; overflow:auto; }
.modal-head{ display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 1.4rem .4rem; }
.modal-body{ padding:.6rem 1.4rem 1rem; }
.modal-foot{ display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.4rem 1.3rem;
  border-top:1px solid var(--border); margin-top:.6rem; }

/* ---------- output ---------- */
.output{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.85rem 1rem; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.8rem;
  line-height:1.5; color:oklch(0.86 0.01 85); white-space:pre-wrap; word-break:break-word;
  margin-top:1rem; max-height:320px; overflow:auto; }

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:80;
  display:flex; flex-direction:column; gap:.6rem; }
.toast{ background:var(--surface-2); border:1px solid var(--border-2); color:var(--text);
  padding:.8rem 1rem; border-radius:var(--radius-sm); box-shadow:var(--shadow);
  font-size:.88rem; max-width:340px; border-left:3px solid var(--accent);
  animation:slidein .2s ease; }
.toast.ok{ border-left-color:var(--good); }
.toast.err{ border-left-color:var(--danger); }
@keyframes slidein{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:560px){
  .display{ font-size:1.6rem; }
  .page-head{ align-items:flex-start; }
  .field-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }