:root {
  --bg: #09131f;
  --bg-soft: #0f1e2f;
  --panel: #12263d;
  --line: #2f4a67;
  --text: #e8f1ff;
  --muted: #9bb0c8;
  --accent: #f59e0b;
  --accent-2: #38bdf8;
  --ok: #22c55e;
  --warn: #f97316;
  --danger: #ef4444;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.18), transparent 40%),
    radial-gradient(circle at 88% 20%, rgba(245, 158, 11, 0.2), transparent 42%),
    linear-gradient(180deg, var(--bg), #070d16 65%);
  min-height: 100vh;
}

a { color: var(--accent-2); }

.container {
  width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 2.2rem 0 3rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

.hero {
  border: 1px solid var(--line);
  background: linear-gradient(130deg, rgba(18, 38, 61, 0.95), rgba(12, 26, 41, 0.92));
  border-radius: 18px;
  padding: 1.2rem 1.2rem 1.4rem;
}

h1, h2, h3 { margin: 0 0 .45rem; }
p { margin: 0; color: var(--muted); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .9rem;
}

.card {
  border: 1px solid var(--line);
  background: rgba(18, 38, 61, .85);
  border-radius: 14px;
  padding: .95rem;
}

.kpi {
  font-size: 1.8rem;
  font-weight: 700;
}

.badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  border: 1px solid var(--line);
  color: var(--muted);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin: 1rem 0;
}

input, select, textarea, button {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0b1726;
  color: var(--text);
  padding: .58rem .68rem;
  font: inherit;
}

button {
  cursor: pointer;
  background: linear-gradient(120deg, #f59e0b, #f97316);
  color: #111;
  border: none;
  font-weight: 700;
}

button.alt {
  background: linear-gradient(120deg, #38bdf8, #0ea5e9);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .75rem;
  background: rgba(9, 19, 31, 0.65);
  border-radius: 10px;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: .55rem;
  border-bottom: 1px solid rgba(47, 74, 103, .65);
  font-size: .92rem;
}

th { color: #c8daf2; font-weight: 600; }

tr:hover td { background: rgba(56, 189, 248, 0.08); }

.status-pill {
  border-radius: 999px;
  padding: .12rem .5rem;
  font-size: .75rem;
  font-weight: 700;
}

.status-pending { background: rgba(249, 115, 22, .17); color: #ffb987; }
.status-in_progress { background: rgba(56, 189, 248, .17); color: #93ddff; }
.status-done { background: rgba(34, 197, 94, .17); color: #95f0b4; }

.footer { margin-top: 1rem; font-size: .86rem; color: var(--muted); }

@media (max-width: 760px) {
  .container { width: 94vw; padding-top: 1rem; }
  .toolbar { flex-direction: column; align-items: stretch; }
  table { font-size: .82rem; }
}