:root {
  --bg: #070c13;
  --bg-soft: #0a111a;
  --sidebar: #081019;
  --surface: #0d1621;
  --surface-2: #101c28;
  --surface-3: #132230;
  --line: rgba(148, 163, 184, .12);
  --line-strong: rgba(148, 163, 184, .2);
  --text: #e7edf5;
  --muted: #708095;
  --muted-2: #94a3b8;
  --accent: #13c69b;
  --accent-soft: rgba(19, 198, 155, .10);
  --blue: #2d8cff;
  --blue-soft: rgba(45, 140, 255, .12);
  --green: #18c782;
  --green-soft: rgba(24, 199, 130, .12);
  --red: #ef476f;
  --red-soft: rgba(239, 71, 111, .12);
  --purple: #8b5cf6;
  --purple-soft: rgba(139, 92, 246, .12);
  --warning: #f4b740;
  --radius: 8px;
  --radius-lg: 11px;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(700px 380px at 85% -140px, rgba(19,198,155,.055), transparent 65%),
    var(--bg);
  color: var(--text);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

.layout { display: grid; grid-template-columns: 188px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  inset: 0 auto 0 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(180deg, #08111a 0%, #071019 100%);
  border-right: 1px solid var(--line);
  z-index: 30;
}
.brand-wrap {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 17px;
  border-bottom: 1px solid rgba(148,163,184,.06);
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: grid; place-items: center;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(19,198,155,.22));
}
.brand-mark svg { width: 25px; height: 25px; }
.brand-text { line-height: 1.05; }
.brand-title { font-weight: 750; font-size: 13px; letter-spacing: -.15px; color: #f4f7fb; }
.brand-subtitle { margin-top: 2px; font-size: 7px; letter-spacing: 1.65px; text-transform: uppercase; color: #76869a; }

.sidebar-scroll { padding: 14px 10px 12px; overflow-y: auto; scrollbar-width: thin; }
.nav-section { margin: 9px 8px 7px; font-size: 7px; letter-spacing: 1.2px; text-transform: uppercase; color: #4b5b6d; font-weight: 700; }
.sidebar nav { display: grid; gap: 2px; }
.sidebar nav a {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: #8290a2;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: .18s ease;
}
.sidebar nav a:hover { color: #d9e2ec; background: rgba(255,255,255,.025); }
.sidebar nav a.active {
  color: #5be1be;
  background: linear-gradient(90deg, rgba(19,198,155,.13), rgba(19,198,155,.035));
  border-color: rgba(19,198,155,.07);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-icon { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 14px; }
.nav-icon svg { width: 14px; height: 14px; stroke-width: 1.7; }
.sidebar-spacer { flex: 1; }
.system-status {
  margin: 10px;
  padding: 11px;
  display: flex; gap: 9px; align-items: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.015);
  border-radius: 7px;
}
.status-check { width: 22px; height: 22px; border-radius: 5px; display:grid; place-items:center; background: var(--green-soft); color: var(--green); }
.status-check svg { width: 12px; }
.system-status strong { display:block; font-size: 9px; color:#b9c4d1; font-weight:600; }
.system-status span { display:block; font-size:7px; margin-top:2px; color:#59697b; }
.sidebar-footer { padding: 8px 18px 16px; color: #465668; font-size: 7px; line-height: 1.55; }

.main-shell { min-width: 0; }
.appbar {
  height: 48px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 19px;
  border-bottom: 1px solid var(--line);
  background: rgba(7,12,19,.82);
  backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 20;
}
.appbar-actions { display:flex; align-items:center; gap:5px; }
.icon-btn { width: 27px; height: 27px; border-radius: 6px; display:grid; place-items:center; color:#728196; border:1px solid transparent; background:transparent; }
.icon-btn:hover { color:#d1dae5; background:rgba(255,255,255,.03); border-color:var(--line); }
.icon-btn svg { width:13px; height:13px; }
.user-menu { display:flex; align-items:center; gap:8px; padding-left:9px; margin-left:3px; border-left:1px solid var(--line); }
.avatar { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:rgba(19,198,155,.18); color:#65e3c2; font-weight:700; font-size:9px; border:1px solid rgba(19,198,155,.2); }
.user-meta strong { display:block; font-size:9px; color:#d9e1ea; line-height:1.05; }
.user-meta span { display:block; margin-top:3px; font-size:7px; color:#5c6c7e; }
.mobile-menu-btn { display:none; margin-right:auto; }

.content { padding: 16px 18px 28px; min-width: 0; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 13px; }
.page-title h1 { margin:0; color:#e8eef5; font-size:16px; font-weight:650; letter-spacing:-.25px; }
.page-title p { margin:4px 0 0; color:#657589; font-size:8px; }
.page-clock { min-width:104px; text-align:center; padding:8px 10px; border:1px solid var(--line); border-radius:6px; color:#77879a; background:rgba(255,255,255,.012); font-size:8px; }
.page-clock strong { color:#26d2a7; margin-left:6px; font-weight:650; }

.cards { display:grid; grid-template-columns: repeat(5, minmax(125px, 1fr)); gap:8px; margin-bottom:10px; }
.card {
  min-height: 74px;
  display:flex; align-items:flex-start; gap:10px;
  padding:11px;
  background: linear-gradient(145deg, rgba(16,28,40,.95), rgba(12,22,32,.96));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: 0 8px 20px rgba(0,0,0,.09);
}
.card-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:6px; flex:0 0 28px; }
.card-icon svg { width:14px; height:14px; }
.card-icon.green { color:var(--green); background:var(--green-soft); }
.card-icon.blue { color:var(--blue); background:var(--blue-soft); }
.card-icon.red { color:var(--red); background:var(--red-soft); }
.card-icon.purple { color:#a68cff; background:var(--purple-soft); }
.card-body { min-width:0; }
.card .label { color:#7c8b9d; font-size:8px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .value { color:#dfe7f0; font-size:18px; font-weight:650; line-height:1; margin-top:7px; }
.card .hint { color:#4f6072; font-size:7px; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.dashboard-grid { display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(260px, .85fr); gap:9px; margin-bottom:9px; }
.panel {
  background: linear-gradient(145deg, rgba(14,25,36,.96), rgba(11,20,30,.97));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px;
  margin-bottom:10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
}
.panel:last-child { margin-bottom:0; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.panel h2, .panel h3 { margin:0; color:#dce5ee; font-size:11px; font-weight:620; }
.panel-subtitle { margin:3px 0 0; color:#526276; font-size:7px; }
.panel-link { color:#c7d1dc; font-size:7px; padding:5px 9px; background:#111e2a; border:1px solid var(--line); border-radius:5px; }
.panel-link:hover { border-color:rgba(19,198,155,.24); color:#5ce1be; }
.muted { color:var(--muted); font-size:9px; }
.empty-state { min-height:89px; display:grid; place-items:center; text-align:center; color:#526275; font-size:8px; }

.quick-actions { display:grid; gap:6px; }
.quick-action { min-height:26px; display:flex; align-items:center; gap:7px; padding:6px 9px; border:1px solid var(--line); border-radius:5px; color:#7e8da0; background:rgba(255,255,255,.012); font-size:8px; transition:.16s; }
.quick-action:hover { color:#dce6f0; border-color:rgba(19,198,155,.2); background:rgba(19,198,155,.035); }
.quick-action .plus { color:#9eafc0; font-size:10px; }

.flow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 0 3px; }
.flow-node { padding:5px 10px; border:1px solid var(--line); background:#0c1721; border-radius:5px; color:#8090a2; font-size:7px; }
.flow-node.active { border-color:rgba(19,198,155,.2); color:#71dbc1; background:rgba(19,198,155,.05); }
.flow-arrow { color:#425265; font-size:10px; }
.info-strip { margin-top:10px; padding:8px 10px; border:1px solid rgba(19,198,155,.13); border-left:2px solid var(--accent); border-radius:5px; color:#607285; background:rgba(19,198,155,.035); font-size:7px; }

.table-wrap { overflow:auto; margin-top:8px; border:1px solid rgba(148,163,184,.06); border-radius:6px; }
table { width:100%; border-collapse:collapse; min-width:620px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid rgba(148,163,184,.075); vertical-align:top; font-size:8px; }
th { color:#657589; font-size:7px; font-weight:650; text-transform:uppercase; letter-spacing:.3px; background:rgba(255,255,255,.012); }
td { color:#a6b2c0; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:rgba(255,255,255,.012); }

label { display:block; margin:10px 0 5px; color:#738397; font-size:8px; }
input, select, textarea {
  width:100%;
  min-height:34px;
  background:#09131d;
  border:1px solid var(--line-strong);
  color:#d7e0e9;
  border-radius:6px;
  padding:8px 10px;
  outline:none;
  transition:.15s;
}
input:focus, select:focus, textarea:focus { border-color:rgba(19,198,155,.42); box-shadow:0 0 0 3px rgba(19,198,155,.06); }
input::placeholder, textarea::placeholder { color:#405164; }
textarea { min-height:82px; resize:vertical; }
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px; }
.actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
button, .btn {
  min-height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(19,198,155,.25);
  background:rgba(19,198,155,.14);
  color:#69dfc1;
  padding:7px 11px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
  font-size:8px;
  transition:.15s;
}
button:hover, .btn:hover { background:rgba(19,198,155,.22); transform:translateY(-1px); }
.btn-secondary { background:#111f2c; color:#9dacbd; border-color:var(--line); }
.btn-secondary:hover { background:#172737; color:#d0dae5; }
.btn-danger { background:var(--red-soft); color:#ff7a98; border-color:rgba(239,71,111,.18); }
.btn-ok { background:var(--green-soft); color:#63dfac; border-color:rgba(24,199,130,.2); }

.flash { padding:9px 11px; border-radius:6px; margin-bottom:11px; font-size:8px; border:1px solid transparent; }
.flash-ok { background:var(--green-soft); color:#6fe4b2; border-color:rgba(24,199,130,.15); }
.flash-error { background:var(--red-soft); color:#ff849f; border-color:rgba(239,71,111,.15); }
.badge { display:inline-flex; align-items:center; padding:3px 7px; border-radius:99px; font-size:7px; border:1px solid var(--line); background:#13202d; color:#8ea0b2; }
.badge-active { background:var(--green-soft); color:#61dca9; border-color:rgba(24,199,130,.14); }
.badge-blocked { background:var(--red-soft); color:#ff7e9a; border-color:rgba(239,71,111,.14); }
.badge-expired { background:rgba(244,183,64,.10); color:#e9bd62; border-color:rgba(244,183,64,.14); }

.login-wrap { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(550px 340px at 50% 10%, rgba(19,198,155,.08), transparent 68%), var(--bg); }
.login-box { width:min(390px,100%); background:linear-gradient(145deg,#0f1a25,#0b141e); border:1px solid var(--line); border-radius:12px; padding:27px; box-shadow:0 28px 80px rgba(0,0,0,.35); }
.login-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:22px; }
.login-brand .brand-mark { width:34px;height:34px; }
.login-box h1 { text-align:center; margin:0 0 4px; font-size:17px; }
.login-box > p { text-align:center; margin:0 0 20px; color:#607184; font-size:9px; }

@media (max-width:1100px) { .cards { grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px) {
  .layout { grid-template-columns:1fr; }
  .sidebar { position:fixed; width:220px; transform:translateX(-102%); transition:.22s ease; box-shadow:20px 0 50px rgba(0,0,0,.35); }
  body.menu-open .sidebar { transform:translateX(0); }
  .appbar { justify-content:flex-end; }
  .mobile-menu-btn { display:grid; }
  .content { padding:14px 12px 24px; }
  .dashboard-grid { grid-template-columns:1fr; }
  .cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:500px) {
  .cards { grid-template-columns:1fr; }
  .page-clock { display:none; }
  .user-meta { display:none; }
  .row { grid-template-columns:1fr; }
}

/* Ajuste de escala visual — legibilidade em navegadores a 100% */
body { font-size: 16px; }
.layout { grid-template-columns: 240px minmax(0, 1fr); }
.brand-wrap { height: 82px; padding: 0 22px; }
.brand { gap: 12px; }
.brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
.brand-mark svg { width: 31px; height: 31px; }
.brand-title { font-size: 17px; }
.brand-subtitle { font-size: 9px; letter-spacing: 1.8px; }
.sidebar-scroll { padding: 18px 13px 15px; }
.nav-section { margin: 13px 10px 9px; font-size: 10px; letter-spacing: 1.35px; }
.sidebar nav { gap: 4px; }
.sidebar nav a { min-height: 46px; gap: 13px; padding: 11px 13px; border-radius: 8px; font-size: 15px; }
.nav-icon { width: 18px; height: 18px; flex-basis: 18px; }
.nav-icon svg { width: 18px; height: 18px; }
.system-status { margin: 13px; padding: 14px; gap: 11px; border-radius: 9px; }
.status-check { width: 30px; height: 30px; }
.status-check svg { width: 15px; }
.system-status strong { font-size: 12px; }
.system-status span { font-size: 10px; }
.sidebar-footer { padding: 11px 22px 20px; font-size: 10px; }

.appbar { height: 64px; padding: 0 26px; }
.appbar-actions { gap: 8px; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; }
.icon-btn svg { width: 17px; height: 17px; }
.user-menu { gap: 11px; padding-left: 14px; margin-left: 7px; }
.avatar { width: 36px; height: 36px; font-size: 12px; }
.user-meta strong { font-size: 12px; }
.user-meta span { font-size: 10px; }

.content { padding: 24px 28px 38px; }
.page-head { gap: 20px; margin-bottom: 20px; }
.page-title h1 { font-size: 24px; letter-spacing: -.35px; }
.page-title p { margin-top: 6px; font-size: 12px; }
.page-clock { min-width: 145px; padding: 11px 14px; font-size: 12px; border-radius: 8px; }

.cards { grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.card { min-height: 108px; gap: 14px; padding: 16px; border-radius: 11px; }
.card-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 9px; }
.card-icon svg { width: 20px; height: 20px; }
.card .label { font-size: 12px; margin-top: 2px; }
.card .value { font-size: 29px; margin-top: 9px; }
.card .hint { font-size: 10px; margin-top: 8px; }

.dashboard-grid { grid-template-columns: minmax(0, 1.7fr) minmax(320px, .83fr); gap: 14px; margin-bottom: 14px; }
.panel { padding: 19px; margin-bottom: 14px; border-radius: 11px; }
.panel-head { gap: 16px; margin-bottom: 14px; }
.panel h2, .panel h3 { font-size: 16px; }
.panel-subtitle { margin-top: 5px; font-size: 10px; }
.panel-link { font-size: 10px; padding: 8px 12px; border-radius: 7px; }
.muted { font-size: 12px; }
.empty-state { min-height: 145px; font-size: 12px; }

.quick-actions { gap: 9px; }
.quick-action { min-height: 40px; gap: 10px; padding: 10px 13px; border-radius: 7px; font-size: 12px; }
.quick-action .plus { font-size: 15px; }
.flow { gap: 11px; padding: 14px 0 5px; }
.flow-node { padding: 8px 14px; border-radius: 7px; font-size: 11px; }
.flow-arrow { font-size: 15px; }
.info-strip { margin-top: 14px; padding: 11px 14px; border-radius: 7px; font-size: 11px; }

.table-wrap { margin-top: 11px; border-radius: 8px; }
table { min-width: 760px; }
th, td { padding: 13px 14px; font-size: 12px; }
th { font-size: 10px; letter-spacing: .45px; }

label { margin: 14px 0 7px; font-size: 12px; }
input, select, textarea { min-height: 44px; border-radius: 8px; padding: 11px 13px; font-size: 14px; }
textarea { min-height: 110px; }
.row { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 13px; }
.actions { gap: 10px; margin-top: 17px; }
button, .btn { min-height: 40px; padding: 10px 15px; border-radius: 8px; font-size: 12px; }
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 15px; font-size: 12px; }
.badge { padding: 5px 9px; font-size: 10px; }

.login-box { width: min(460px, 100%); padding: 35px; border-radius: 15px; }
.login-brand { gap: 13px; margin-bottom: 28px; }
.login-brand .brand-mark { width: 43px; height: 43px; }
.login-box h1 { font-size: 23px; }
.login-box > p { margin-bottom: 25px; font-size: 12px; }

@media (max-width: 1350px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 220px minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { width: 260px; }
  .content { padding: 20px 15px 30px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .page-title h1 { font-size: 21px; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 96px; }
  .content { padding: 17px 12px 26px; }
}