/* esign — design system sóbrio, profissional, responsivo. */
:root{
  --bg:#f6f7f9; --surface:#ffffff; --ink:#161a20; --muted:#68707d;
  --line:#e4e8ee; --line-2:#eef1f5;
  --accent:#1f3a5f; --accent-2:#2b5c9a; --accent-ink:#1f3a5f;
  --ok:#0f7b4f; --ok-bg:#e7f5ee; --err:#b3261e; --err-bg:#fdecea;
  --warn:#9a6b00; --warn-bg:#fdf3e0;
  --radius:12px; --radius-sm:8px; --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 8px 30px rgba(16,24,40,.08);
  --fs:15px; --maxw:1100px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs); line-height:1.55; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ line-height:1.25; letter-spacing:-.01em; }
h1{ font-size:1.5rem; margin:0 0 4px; }
h2{ font-size:1.15rem; margin:0 0 12px; }
.muted{ color:var(--muted); }
.small{ font-size:.86rem; }
.mono{ font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; }

/* layout admin */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width:236px; background:var(--surface); border-right:1px solid var(--line);
  padding:22px 16px; position:sticky; top:0; height:100vh; flex-shrink:0;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem;
  padding:4px 8px 20px; letter-spacing:-.02em; }
.brand .dot{ width:26px; height:26px; border-radius:7px; background:var(--accent);
  color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:800; }
.nav a{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm);
  color:var(--ink); font-weight:500; font-size:.94rem; margin-bottom:2px; }
.nav a:hover{ background:var(--line-2); text-decoration:none; }
.nav a.active{ background:var(--accent); color:#fff; }
.nav .sep{ height:1px; background:var(--line); margin:14px 4px; }
.main{ flex:1; min-width:0; }
.topbar{ display:flex; justify-content:space-between; align-items:center;
  padding:16px 32px; border-bottom:1px solid var(--line); background:var(--surface); }
.content{ padding:28px 32px; max-width:var(--maxw); margin:0 auto; }

/* cards */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin-bottom:20px; }
.card.pad-lg{ padding:28px; }
.card h2:first-child{ margin-top:0; }
.grid{ display:grid; gap:20px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }

/* stat tiles */
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow); }
.stat .n{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; }
.stat .l{ color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }

/* forms */
label{ display:block; font-weight:600; font-size:.86rem; margin:0 0 6px; color:#39404b; }
.field{ margin-bottom:16px; }
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; color:var(--ink); background:#fff; transition:border-color .12s,box-shadow .12s;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(31,58,95,.12); }
textarea{ resize:vertical; min-height:120px; }
textarea.code{ font-family:"SFMono-Regular",Consolas,monospace; font-size:.86rem; min-height:420px; line-height:1.5; }
.help{ color:var(--muted); font-size:.82rem; margin-top:5px; }
.row{ display:flex; gap:16px; flex-wrap:wrap; }
.row > *{ flex:1; min-width:180px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--radius-sm);
  border:1px solid var(--accent); background:var(--accent); color:#fff; font:inherit; font-weight:600;
  cursor:pointer; transition:filter .12s,background .12s; text-decoration:none; }
.btn:hover{ filter:brightness(1.08); text-decoration:none; }
.btn.secondary{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn.secondary:hover{ background:var(--line-2); filter:none; }
.btn.danger{ background:#fff; color:var(--err); border-color:#f0c8c5; }
.btn.danger:hover{ background:var(--err-bg); }
.btn.lg{ padding:13px 26px; font-size:1.02rem; }
.btn.block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* tables */
table.data{ width:100%; border-collapse:collapse; }
table.data th{ text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); }
table.data td{ padding:12px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
table.data tr:hover td{ background:#fafbfc; }
table.data tr:last-child td{ border-bottom:none; }

/* badges / status */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px;
  font-size:.78rem; font-weight:600; background:var(--line-2); color:#39404b; }
.badge.ok{ background:var(--ok-bg); color:var(--ok); }
.badge.warn{ background:var(--warn-bg); color:var(--warn); }
.badge.err{ background:var(--err-bg); color:var(--err); }
.badge.info{ background:#e8eefb; color:#2b4a8b; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7; }

/* flashes */
.flash{ padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; font-weight:500;
  border:1px solid transparent; }
.flash.ok{ background:var(--ok-bg); color:var(--ok); border-color:#bfe3d0; }
.flash.error{ background:var(--err-bg); color:var(--err); border-color:#f3c9c6; }

/* timeline */
.timeline{ list-style:none; padding:0; margin:0; }
.timeline li{ position:relative; padding:0 0 18px 26px; border-left:2px solid var(--line); }
.timeline li:last-child{ border-left-color:transparent; }
.timeline li::before{ content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px;
  border-radius:50%; background:#fff; border:2px solid var(--accent); }
.timeline .t{ font-weight:600; }
.timeline .d{ color:var(--muted); font-size:.82rem; }

/* lang tabs */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.tabs a{ padding:9px 16px; color:var(--muted); font-weight:600; border-bottom:2px solid transparent;
  margin-bottom:-1px; }
.tabs a:hover{ color:var(--ink); text-decoration:none; }
.tabs a.active{ color:var(--accent); border-bottom-color:var(--accent); }

.page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  margin-bottom:22px; flex-wrap:wrap; }

@media (max-width:860px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:static; display:flex; flex-wrap:wrap; gap:6px;
    align-items:center; padding:12px 16px; }
  .sidebar .brand{ padding:0; margin-right:auto; }
  .nav{ display:flex; flex-wrap:wrap; gap:2px; }
  .nav .sep{ display:none; }
  .content,.topbar{ padding:18px 16px; }
  .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; }
}