:root{
  --bg:#0f0f10;
  --card:#1b1c1f;
  --muted:#a9a9ad;
  --text:#f1f1f1;
  --red:#e2534d;
  --yellow:#f0b54a;
  --blue:#5bc0de;
  --green:#5cb85c;
  --border:#2b2c31;
}

*{box-sizing:border-box}
body{
  margin:0; font-family: Arial, sans-serif;
  background: radial-gradient(ellipse at top, #1b1b1d 0%, #0f0f10 60%);
  color:var(--text);
}

.page{max-width:1200px; margin:24px auto; padding:16px}

.topbar{
  background: rgba(20,20,22,.65);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

h1{margin:0 0 6px 0; font-size:28px}
.topbar p{margin:0; color:var(--muted)}

.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

.card{
  background: rgba(27,28,31,.80);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

h2{margin:0 0 14px 0; color:var(--red)}
label{display:block; margin:10px 0 6px; color:#ddd}

input{
  width:100%;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid #34353b;
  background:#121317;
  color:#fff;
  outline:none;
}
input:focus{border-color:#4b4c55}

.row{display:flex; gap:10px; align-items:center; margin-top:10px}
.row input{flex:1}
.row .filter{display:flex; align-items:center; gap:8px; margin-left:auto}
.row .filter label{margin:0; font-size:13px; color:var(--muted)}
.row .filter select{
  padding:10px 10px;
  border-radius:10px;
  border:1px solid #34353b;
  background:#121317;
  color:#fff;
}

.btn{
  border:0;
  border-radius:10px;
  padding:12px 14px;
  color:#fff;
  cursor:pointer;
  font-weight:700;
  white-space:nowrap;
}
.btn.red{background:var(--red)}
.btn.yellow{background:var(--yellow); color:#1b1c1f}
.btn.blue{background:var(--blue)}
.btn.green{background:var(--green)}
.btn:active{transform: scale(.99)}

.linkbox{
  margin-top:14px;
  padding:14px;
  border-radius:12px;
  border:1px dashed #3a3b43;
  background: rgba(10,10,12,.35);
}
.linktitle{margin-bottom:8px; font-weight:700}

.msg{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #3a3b43;
}
.msg.ok{background: rgba(92,184,92,.16); border-color: rgba(92,184,92,.35)}
.msg.err{background: rgba(226,83,77,.16); border-color: rgba(226,83,77,.35)}
.msg.warn{background: rgba(240,181,74,.16); border-color: rgba(240,181,74,.35)}
.hidden{display:none}

.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.stat{
  background: rgba(10,10,12,.35);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  text-align:center;
}
.stat-label{color:var(--muted); font-size:13px}
.stat-value{font-size:28px; font-weight:800; margin-top:6px}

.tip{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  background: rgba(226,83,77,.10);
  border:1px solid rgba(226,83,77,.25);
  color:#ffd7d6;
}

.tablewrap{overflow:auto}
table{width:100%; border-collapse:collapse; margin-top:10px}
th,td{padding:10px 8px; border-bottom:1px solid #2e2f36}
th{color:#fff; text-align:left; background: rgba(10,10,12,.25)}
td{color:#e8e8ea}
.muted{color:var(--muted)}
.status-pill{
  display:inline-block;
  padding:4px 8px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
}
.status-assinado{background: rgba(92,184,92,.2); color:#8df08d; border:1px solid rgba(92,184,92,.45)}
.status-pendente{background: rgba(240,181,74,.2); color:#ffd37a; border:1px solid rgba(240,181,74,.45)}
.row-assinado{background: rgba(92,184,92,.05)}
.row-pendente{background: rgba(240,181,74,.05)}

.actions{display:flex; gap:8px; flex-wrap:wrap}
.small{padding:8px 10px; border-radius:10px; font-weight:800; font-size:13px}

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr;}
}

.cliente-box{
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(92,184,92,.35);
  background: rgba(92,184,92,.10);
}