:root{
  --tl-bg:#f3f7fb;
  --tl-bg2:#eaf1f8;
  --tl-card:#ffffff;
  --tl-card2:#f8fbff;
  --tl-text:#122033;
  --tl-muted:#63758c;
  --tl-line:#d8e3ef;
  --tl-blue:#2563eb;
  --tl-blue2:#1d4ed8;
  --tl-green:#16a34a;
  --tl-red:#e11d48;
  --tl-orange:#f59e0b;
  --tl-shadow:0 18px 45px rgba(15,35,60,.12);
  --tl-radius:22px;
}

*{
  box-sizing:border-box;
}

html{
  font-size:14px;
}

body{
  margin:0 !important;
  background:
    radial-gradient(circle at 0 0, rgba(37,99,235,.10), transparent 34%),
    linear-gradient(180deg,var(--tl-bg),var(--tl-bg2)) !important;
  color:var(--tl-text) !important;
  font-family:Inter,Segoe UI,Arial,sans-serif !important;
  letter-spacing:-.01em;
}

a{
  color:inherit;
}

button,
input,
textarea,
select{
  font-family:inherit !important;
}

.page,
.app,
.dashboard,
.portal,
main{
  max-width:1680px;
  margin:0 auto;
}

body > header,
.topbar,
.header,
.app-header{
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--tl-line) !important;
  box-shadow:0 8px 28px rgba(15,35,60,.06);
}

h1{
  font-size:34px !important;
  line-height:1.08 !important;
  margin:0 0 4px !important;
  letter-spacing:-.045em !important;
  color:#0f1f35 !important;
}

h2{
  font-size:20px !important;
  letter-spacing:-.025em !important;
  color:#102033 !important;
}

h3{
  font-size:16px !important;
  color:#102033 !important;
}

.subtitle,
p,
small{
  color:var(--tl-muted);
}

.card,
.panel,
.box,
section,
.login-card{
  border-radius:var(--tl-radius) !important;
}

.card,
.panel,
.box,
.module,
.widget,
.login-card,
form,
.table-card{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(203,216,231,.95) !important;
  box-shadow:var(--tl-shadow) !important;
}

.container,
.content,
.main,
.dashboard-content{
  padding:26px !important;
}

.stats,
.kpis,
.cards,
.metrics{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(180px,1fr)) !important;
  gap:16px !important;
  margin-bottom:20px !important;
}

.stats > *,
.kpis > *,
.cards > *,
.metrics > *{
  min-height:128px;
  padding:22px !important;
  position:relative;
  overflow:hidden;
}

.stats > *::after,
.kpis > *::after,
.cards > *::after,
.metrics > *::after{
  content:"";
  position:absolute;
  right:-35px;
  top:-35px;
  width:110px;
  height:110px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
}

.stat-icon,
.icon,
.metric-icon{
  width:42px !important;
  height:42px !important;
  border-radius:14px !important;
  display:inline-grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,var(--tl-blue),#60a5fa) !important;
  color:white !important;
  font-weight:900 !important;
}

.layout,
.grid,
.dashboard-grid{
  display:grid !important;
  grid-template-columns:420px minmax(0,1fr) !important;
  gap:20px !important;
  align-items:start !important;
}

form{
  padding:22px !important;
}

label{
  display:block;
  font-size:11px !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#334963 !important;
  margin:14px 0 7px !important;
}

input,
textarea,
select{
  width:100%;
  border:1px solid #cbd8e7 !important;
  border-radius:14px !important;
  padding:13px 14px !important;
  background:#fff !important;
  color:#122033 !important;
  outline:none !important;
  font-weight:650 !important;
  box-shadow:0 1px 0 rgba(15,35,60,.03);
}

textarea{
  min-height:108px;
  resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--tl-blue) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.12) !important;
}

button,
.btn,
.button,
input[type="submit"]{
  border:0 !important;
  border-radius:13px !important;
  padding:11px 16px !important;
  background:linear-gradient(180deg,var(--tl-blue),var(--tl-blue2)) !important;
  color:white !important;
  font-weight:900 !important;
  cursor:pointer !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:42px;
  box-shadow:0 10px 22px rgba(37,99,235,.22);
}

button:hover,
.btn:hover,
.button:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

button.danger,
.btn.danger,
.delete,
.apagar,
a[href*="delete"],
button[name*="delete"]{
  background:linear-gradient(180deg,#f43f5e,#e11d48) !important;
  box-shadow:0 10px 22px rgba(225,29,72,.18);
}

button.success,
.btn.success,
.concluir,
a[href*="complete"],
button[name*="complete"]{
  background:linear-gradient(180deg,#22c55e,#16a34a) !important;
  box-shadow:0 10px 22px rgba(22,163,74,.18);
}

.reopen,
.reabrir,
a[href*="reopen"],
button[name*="reopen"]{
  background:linear-gradient(180deg,#3b82f6,#2563eb) !important;
}

table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:white;
  overflow:hidden;
  border-radius:18px;
}

thead th{
  background:#f7faff !important;
  color:#42546c !important;
  font-size:11px !important;
  font-weight:950 !important;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:14px 14px !important;
  border-bottom:1px solid var(--tl-line) !important;
  white-space:nowrap;
  text-align:left !important;
}

tbody td{
  padding:15px 14px !important;
  border-bottom:1px solid #edf2f8 !important;
  vertical-align:middle !important;
  color:#17263a !important;
}

tbody tr{
  transition:.16s ease;
}

tbody tr:hover{
  background:#f8fbff !important;
}

tbody tr:last-child td{
  border-bottom:0 !important;
}

.badge,
.status,
.pill,
.tag{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:999px !important;
  padding:6px 11px !important;
  font-weight:900 !important;
  font-size:12px !important;
  white-space:nowrap;
}

.badge,
.status{
  background:#dbeafe !important;
  color:#1d4ed8 !important;
}

.badge.green,
.status.green,
.concluida,
.done{
  background:#dcfce7 !important;
  color:#166534 !important;
}

.badge.red,
.status.red,
.atrasada,
.overdue{
  background:#ffe4e6 !important;
  color:#be123c !important;
}

.badge.orange,
.status.orange{
  background:#fef3c7 !important;
  color:#92400e !important;
}

.task-title,
tbody td:first-child,
strong{
  font-weight:950 !important;
  color:#101d30 !important;
}

tbody td:first-child small,
.task-id,
code{
  color:#64748b !important;
  font-size:11px !important;
  font-weight:750 !important;
}

.actions,
td:last-child{
  white-space:nowrap;
}

td:last-child{
  display:flex;
  gap:8px;
  align-items:center;
}

td:last-child .btn,
td:last-child button,
td:last-child a{
  min-height:34px !important;
  padding:8px 11px !important;
  border-radius:11px !important;
  font-size:12px !important;
}

.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 460px;
  background:
    radial-gradient(circle at 15% 15%,rgba(37,99,235,.20),transparent 30%),
    linear-gradient(135deg,#071329,#0f2345 55%,#2563eb);
}

.login-brand{
  color:white !important;
  padding:70px !important;
}

.login-brand h1,
.login-brand h2,
.login-brand p{
  color:white !important;
}

.login-panel-wrap{
  display:grid;
  place-items:center;
  padding:34px;
}

.login-card{
  width:100%;
  max-width:420px;
  padding:28px !important;
}

::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-thumb{
  background:#b7c8dd;
  border-radius:999px;
}

::-webkit-scrollbar-track{
  background:#eef4fa;
}

@media(max-width:1200px){
  .stats,
  .kpis,
  .cards,
  .metrics{
    grid-template-columns:repeat(2,minmax(180px,1fr)) !important;
  }

  .layout,
  .grid,
  .dashboard-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:720px){
  .container,
  .content,
  .main,
  .dashboard-content{
    padding:16px !important;
  }

  h1{
    font-size:27px !important;
  }

  .stats,
  .kpis,
  .cards,
  .metrics{
    grid-template-columns:1fr !important;
  }

  table{
    min-width:820px;
  }

  .login-page{
    grid-template-columns:1fr;
  }

  .login-brand{
    display:none;
  }
}