:root{
  --bg:#050608;
  --panel:rgba(17,20,27,.78);
  --panel2:rgba(24,28,38,.84);
  --line:rgba(209,170,92,.18);
  --gold:#d6ad5c;
  --text:#f6f2e9;
  --muted:#a9afbd;
  --green:#4ade80;
  --amber:#fbbf24;
  --red:#fb7185;
  --blue:#60a5fa;
  --violet:#a78bfa;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 0%,rgba(214,173,92,.14),transparent 26%),
    radial-gradient(circle at 90% 5%,rgba(50,84,135,.25),transparent 28%),
    linear-gradient(135deg,#040405,#0a0d12 45%,#050608);
}
a{color:inherit;text-decoration:none}
.hero-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:brightness(.72) contrast(1.08) saturate(.95)}
.hero-overlay{position:fixed;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.58),rgba(0,0,0,.86));backdrop-filter:blur(2px)}
.login-page{display:grid;place-items:center;overflow:hidden}
.login-shell{position:relative;z-index:1;width:min(440px,92vw)}
.login-card{
  padding:38px;
  border:1px solid var(--line);
  border-radius:30px;
  background:rgba(7,9,13,.76);
  box-shadow:0 30px 120px rgba(0,0,0,.55);
  backdrop-filter:blur(20px);
}
.brand-mark{
  width:52px;height:52px;border-radius:18px;
  display:grid;place-items:center;
  color:#0a0a0a;background:linear-gradient(135deg,#ffe7a3,#c89335);
  font-family:Georgia,serif;font-weight:800;font-size:22px;
  box-shadow:0 0 30px rgba(214,173,92,.25);
}
.login-card h1{font-size:34px;margin:22px 0 8px}
.login-card p{color:var(--muted);margin:0 0 28px}
label{display:block;margin:16px 0 8px;color:#d9deea;font-size:13px}
input,select{
  width:100%;
  background:#0c1018;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  color:var(--text);
  padding:13px 14px;
  outline:none;
}
button,.primary{
  border:0;
  border-radius:14px;
  padding:13px 16px;
  background:linear-gradient(135deg,#f4d485,#b98224);
  color:#090909;
  font-weight:800;
  cursor:pointer;
}
.login-card button{width:100%;margin-top:22px}
.login-card small{display:block;color:var(--muted);margin-top:18px}
.alert{background:rgba(251,113,133,.12);color:#fecdd3;border:1px solid rgba(251,113,133,.24);padding:12px;border-radius:14px;margin-bottom:18px}

.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:286px;
  padding:22px;
  background:rgba(5,7,10,.82);
  border-right:1px solid var(--line);
  backdrop-filter:blur(18px);
  overflow:auto;
}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.brand strong{display:block;font-size:18px}
.brand span{display:block;font-size:12px;color:var(--muted)}
nav{display:grid;gap:7px}
nav a{
  padding:11px 12px;border-radius:14px;color:#cbd1dd;
  border:1px solid transparent;
}
nav a:hover,nav a.active{
  background:rgba(214,173,92,.11);
  border-color:rgba(214,173,92,.22);
  color:var(--text);
}
.sidebar-footer{
  margin-top:26px;padding:14px;border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex;gap:10px;align-items:center;
}
.env-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 18px var(--green)}
.sidebar-footer strong{display:block;font-size:13px}
.sidebar-footer span{display:block;font-size:12px;color:var(--muted)}
.logout{width:100%;margin-top:12px;background:rgba(255,255,255,.06);color:#e5e7eb;border:1px solid rgba(255,255,255,.08)}

.main{margin-left:286px;padding:28px;max-width:1700px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}
.topbar h1{margin:0;font-size:34px}
.topbar p{margin:8px 0 0;color:var(--muted)}
.top-status{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);
  color:#dbe2ef;font-size:13px;
}
.top-status span:first-child{color:var(--green)}
.metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}
.metric,.panel,.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(20,24,34,.78),rgba(10,13,19,.72));
  box-shadow:0 20px 70px rgba(0,0,0,.25);
  backdrop-filter:blur(18px);
}
.metric{border-radius:22px;padding:18px}
.metric span{display:block;color:var(--muted);font-size:12px}
.metric strong{display:block;font-size:30px;margin:7px 0;color:var(--text)}
.metric small{color:#7f8797}
.panel{border-radius:26px;padding:20px;margin-bottom:18px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.section-head h2{margin:0;font-size:20px}
.section-head span{color:var(--muted);font-size:13px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cards.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  display:block;border-radius:22px;padding:18px;min-height:150px;
  transition:.2s transform,.2s border-color,.2s background;
}
.card:hover{transform:translateY(-3px);border-color:rgba(214,173,92,.4);background:rgba(28,33,45,.82)}
.icon{font-size:28px;margin-bottom:14px}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.35}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;padding:6px 9px;font-size:12px;font-weight:700;
}
.badge:before{content:"";width:7px;height:7px;border-radius:50%;display:inline-block}
.online{color:var(--green);background:rgba(74,222,128,.09)}
.online:before{background:var(--green)}
.building{color:var(--amber);background:rgba(251,191,36,.09)}
.building:before{background:var(--amber)}
.planned{color:var(--blue);background:rgba(96,165,250,.09)}
.planned:before{background:var(--blue)}
.attention{color:var(--red)}
.internal{color:var(--violet);background:rgba(167,139,250,.09)}
.internal:before{background:var(--violet)}
.restricted{color:#fca5a5;background:rgba(252,165,165,.09)}
.restricted:before{background:#fca5a5}
.attention-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.attention-grid div,.quick-links a{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  border-radius:18px;padding:14px;
}
.attention-grid strong{display:block;font-size:22px;margin-top:6px}
.attention-grid span{display:block;color:var(--muted);font-size:12px}
.quick-links{display:flex;gap:10px;flex-wrap:wrap}
.quick-links a{padding:10px 13px;color:#dbe2ef}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.split p{color:var(--muted)}
.monitor-list{display:grid;gap:10px}
.monitor-row{
  display:grid;grid-template-columns:42px 1.2fr 2fr 160px;gap:12px;align-items:center;
  padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.035)
}
.monitor-row small{color:var(--muted)}
.monitor-row em{font-style:normal;font-weight:800}
.form-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px}
.user-list{display:grid;gap:14px}
.user-row,.reset-row{display:grid;grid-template-columns:1.4fr 1.6fr 1fr 1fr auto;gap:10px;align-items:center}
.reset-row{grid-template-columns:1fr auto 1fr;margin-top:-8px;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:14px}
.reset-row small{color:var(--muted)}
@media(max-width:1100px){
  .sidebar{position:relative;width:auto;min-height:auto}
  .main{margin-left:0;padding:16px}
  .metrics,.cards,.cards.compact,.attention-grid{grid-template-columns:1fr 1fr}
  .topbar,.split{display:block}
}
@media(max-width:720px){
  .metrics,.cards,.cards.compact,.attention-grid,.form-grid,.user-row,.reset-row,.monitor-row{grid-template-columns:1fr}
}

/* ===== JW CENTRAL REFINED OVERVIEW + MAP START ===== */

.eyebrow {
  display: inline-flex;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.topbar.refined h1 {
  letter-spacing: -0.035em;
}

.card {
  min-height: 118px !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

.card .icon,
.icon {
  font-size: 20px !important;
  margin-bottom: 9px !important;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
}

.card h3 {
  font-size: 14px !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.01em;
}

.card p {
  font-size: 12px !important;
  line-height: 1.28 !important;
  margin-bottom: 10px !important;
}

.badge {
  padding: 5px 8px !important;
  font-size: 11px !important;
}

.badge:before {
  width: 7px !important;
  height: 7px !important;
}

.cards {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

.cards.compact {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.panel {
  padding: 18px !important;
}

.section-head {
  margin-bottom: 13px !important;
}

.section-head h2 {
  font-size: 18px !important;
  letter-spacing: -0.025em;
}

.metric {
  padding: 15px !important;
  border-radius: 18px !important;
}

.metric strong {
  font-size: 25px !important;
}

.metric span {
  font-size: 11px !important;
}

.metric small {
  font-size: 11px !important;
}

.card,
.metric,
.panel,
.monitor-row,
.map-card,
.legend-card,
.map-row {
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.card:hover,
.map-card:hover,
.legend-card:hover,
.map-row:hover {
  transform: translateY(-2px);
  border-color: rgba(214,173,92,.36) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}

/* status extras */
.offline {
  color: #fb7185 !important;
  background: rgba(251,113,133,.10);
}

.offline:before {
  background: #fb7185 !important;
}

.maintenance {
  color: #fbbf24 !important;
  background: rgba(251,191,36,.10);
}

.maintenance:before {
  background: #fbbf24 !important;
}

.progress {
  color: #60a5fa !important;
  background: rgba(96,165,250,.10);
}

.progress:before {
  background: #60a5fa !important;
}

.status-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 18px currentColor;
}

.status-dot.online { background: #4ade80; color: #4ade80; }
.status-dot.offline { background: #fb7185; color: #fb7185; }
.status-dot.maintenance { background: #fbbf24; color: #fbbf24; }
.status-dot.progress { background: #60a5fa; color: #60a5fa; }
.status-dot.internal { background: #a78bfa; color: #a78bfa; }

.map-hero {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 18px;
  align-items: center;
}

.map-hero h2 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.035em;
}

.map-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.flow-line {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.flow-line span {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(214,173,92,.18);
  color: #e5e7eb;
  font-size: 12px;
}

.flow-line b {
  color: var(--gold);
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 11px;
}

.legend-card {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 16px;
  padding: 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.legend-card strong {
  display: block;
  font-size: 13px;
}

.legend-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 13px;
}

.map-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(214,173,92,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
}

.map-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(214,173,92,.11);
  border: 1px solid rgba(214,173,92,.18);
  font-size: 19px;
}

.map-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.map-card p {
  margin: 0 0 11px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.map-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.map-tags span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
  color: #cbd5e1;
  font-size: 10px;
}

.map-table {
  display: grid;
  gap: 8px;
}

.map-row {
  display: grid;
  grid-template-columns: 1.1fr .9fr 1.8fr 140px;
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.03);
}

.map-row strong {
  font-size: 13px;
}

.map-row span,
.map-row small {
  color: var(--muted);
  font-size: 12px;
}

.map-row em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

@media(max-width: 1380px) {
  .cards,
  .cards.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .legend-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width: 980px) {
  .cards,
  .cards.compact,
  .legend-grid,
  .map-grid,
  .map-hero {
    grid-template-columns: 1fr 1fr !important;
  }
  .map-row {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 720px) {
  .cards,
  .cards.compact,
  .legend-grid,
  .map-grid,
  .map-hero {
    grid-template-columns: 1fr !important;
  }
}

/* ===== JW CENTRAL REFINED OVERVIEW + MAP END ===== */

/* ===== JW CENTRAL PREMIUM VISUAL UPGRADE START ===== */

/*
  Padrão visual:
  - manter estrutura atual
  - elevar refinamento visual
  - aproximar Central JW do site principal e do JW Flow
  - Hero 2 como presença sutil
  - cards menores, requintados e legíveis
*/

:root {
  --jw-black: #030406;
  --jw-deep: #07090d;
  --jw-card: rgba(12, 15, 22, .78);
  --jw-card-strong: rgba(18, 22, 31, .86);
  --jw-gold: #d6ad5c;
  --jw-gold-soft: rgba(214, 173, 92, .16);
  --jw-gold-line: rgba(214, 173, 92, .22);
  --jw-white: #f7f2e8;
  --jw-muted: #aeb4c2;
  --jw-blue: #5fa8ff;
  --jw-green: #4ade80;
  --jw-red: #fb7185;
  --jw-yellow: #fbbf24;
}

body {
  background:
    radial-gradient(circle at 18% -8%, rgba(214,173,92,.18), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(82,126,190,.20), transparent 32%),
    linear-gradient(135deg, #020304 0%, #07090d 42%, #05070b 100%) !important;
  color: var(--jw-white) !important;
}

/* Fundo cinematográfico sutil */
.app-bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .115;
  filter: brightness(.58) contrast(1.14) saturate(.92);
  pointer-events: none;
  z-index: -3;
}

.app-bg-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(4,6,10,.78) 42%, rgba(0,0,0,.94) 100%),
    radial-gradient(circle at 58% 8%, rgba(214,173,92,.10), transparent 36%),
    radial-gradient(circle at 82% 72%, rgba(68,96,138,.16), transparent 34%);
}

/* Sidebar refinado */
.sidebar {
  background:
    linear-gradient(180deg, rgba(5,7,10,.94), rgba(5,7,10,.84)),
    radial-gradient(circle at 50% 0%, rgba(214,173,92,.12), transparent 38%) !important;
  border-right: 1px solid rgba(214,173,92,.18) !important;
  box-shadow: 22px 0 80px rgba(0,0,0,.32);
}

.brand {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(214,173,92,.13);
  margin-bottom: 20px !important;
}

.brand-mark-premium {
  width: 50px !important;
  height: 50px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,232,166,.98), rgba(200,143,43,.96)) !important;
  color: #080807 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 14px 45px rgba(214,173,92,.23),
    0 0 70px rgba(214,173,92,.10);
}

.brand-mark-premium span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.08em;
}

.brand strong {
  font-size: 18px !important;
  letter-spacing: -.02em;
}

.brand span {
  color: rgba(247,242,232,.58) !important;
  letter-spacing: .04em;
}

nav a {
  position: relative;
  font-size: 13px;
  color: rgba(232,236,245,.72) !important;
  border-radius: 13px !important;
  padding: 10px 12px !important;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

nav a:hover {
  transform: translateX(2px);
}

nav a.active,
nav a:hover {
  background:
    linear-gradient(90deg, rgba(214,173,92,.16), rgba(214,173,92,.045)) !important;
  color: var(--jw-white) !important;
  border-color: rgba(214,173,92,.26) !important;
}

nav a.active::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 999px;
  background: var(--jw-gold);
  box-shadow: 0 0 20px rgba(214,173,92,.55);
}

/* Topbar */
.topbar {
  padding: 4px 0 2px;
}

.topbar h1 {
  font-size: clamp(28px, 2.4vw, 42px) !important;
  letter-spacing: -.055em !important;
  line-height: 1.02;
}

.topbar p {
  color: rgba(224,230,240,.62) !important;
  max-width: 720px;
}

.top-status {
  background:
    linear-gradient(180deg, rgba(17,21,31,.74), rgba(9,12,18,.72)) !important;
  border: 1px solid rgba(214,173,92,.19) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
}

/* Métricas com cara de cockpit refinado */
.metrics {
  gap: 12px !important;
}

.metric {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.82), rgba(9,12,18,.74)) !important;
  border: 1px solid rgba(214,173,92,.15) !important;
  box-shadow:
    0 18px 58px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.025) inset;
}

.metric::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,173,92,.18), transparent 68%);
}

.metric span {
  color: rgba(224,230,240,.58) !important;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.metric strong {
  color: var(--jw-white) !important;
  letter-spacing: -.045em;
}

.metric small {
  color: rgba(174,180,194,.70) !important;
}

/* Painéis */
.panel {
  background:
    linear-gradient(180deg, rgba(15,18,27,.78), rgba(8,11,17,.70)) !important;
  border: 1px solid rgba(214,173,92,.14) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.025) inset;
}

.section-head {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.section-head h2 {
  position: relative;
  padding-left: 13px;
  color: var(--jw-white) !important;
}

.section-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 999px;
  background: var(--jw-gold);
  box-shadow: 0 0 20px rgba(214,173,92,.34);
}

.section-head span {
  color: rgba(174,180,194,.68) !important;
}

/* Cards refinados */
.card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(21,25,36,.72), rgba(10,13,20,.72)) !important;
  border: 1px solid rgba(255,255,255,.072) !important;
  box-shadow:
    0 14px 44px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.018) inset;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(214,173,92,.075), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(214,173,92,.09), transparent 42%);
  opacity: 0;
  transition: opacity .24s ease;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(214,173,92,.30) !important;
  box-shadow:
    0 24px 74px rgba(0,0,0,.34),
    0 0 0 1px rgba(214,173,92,.08) inset !important;
}

.card:hover::before {
  opacity: 1;
}

.card .icon,
.icon {
  background:
    linear-gradient(145deg, rgba(214,173,92,.14), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(214,173,92,.16) !important;
  color: var(--jw-gold);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

.card h3 {
  color: var(--jw-white) !important;
  font-weight: 750;
}

.card p {
  color: rgba(203,213,225,.66) !important;
}

/* Badges com bolinha mais elegante */
.badge {
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.035);
}

.badge:before {
  box-shadow: 0 0 14px currentColor;
}

/* Mapeamento visual: verde online, vermelho offline, amarelo manutenção, azul em andamento */
.online {
  color: var(--jw-green) !important;
  background: rgba(74,222,128,.075) !important;
}

.building,
.progress {
  color: var(--jw-blue) !important;
  background: rgba(96,165,250,.08) !important;
}

.building:before,
.progress:before {
  background: var(--jw-blue) !important;
}

.maintenance {
  color: var(--jw-yellow) !important;
  background: rgba(251,191,36,.08) !important;
}

.offline,
.attention {
  color: var(--jw-red) !important;
  background: rgba(251,113,133,.08) !important;
}

.internal,
.restricted,
.planned {
  color: #b8bfd0 !important;
  background: rgba(184,191,208,.075) !important;
}

.internal:before,
.restricted:before,
.planned:before {
  background: #b8bfd0 !important;
}

/* Atenção agora mais executiva */
.attention-grid div {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022)) !important;
  border: 1px solid rgba(214,173,92,.12) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.18);
}

.attention-grid strong {
  color: var(--jw-white);
  letter-spacing: -.035em;
}

/* Links rápidos */
.quick-links a {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  transition: all .22s ease;
}

.quick-links a:hover {
  background: rgba(214,173,92,.10) !important;
  border-color: rgba(214,173,92,.24) !important;
  transform: translateY(-2px);
}

/* Mapa da Central refinado */
.map-hero {
  background:
    linear-gradient(135deg, rgba(214,173,92,.10), transparent 44%),
    linear-gradient(180deg, rgba(16,20,29,.78), rgba(8,11,17,.72)) !important;
}

.map-hero h2 {
  color: var(--jw-white);
}

.flow-line span {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(214,173,92,.16) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.18);
}

.legend-card,
.map-card,
.map-row,
.monitor-row {
  background:
    linear-gradient(180deg, rgba(21,25,36,.62), rgba(10,13,20,.62)) !important;
  border: 1px solid rgba(255,255,255,.072) !important;
}

.map-card:hover,
.legend-card:hover,
.map-row:hover,
.monitor-row:hover {
  background:
    linear-gradient(180deg, rgba(25,30,42,.76), rgba(12,15,22,.74)) !important;
}

/* Usuários e permissões */
.form-grid input,
.form-grid select,
.user-row input,
.user-row select,
.reset-row input {
  background: rgba(8,11,17,.86) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
}

.form-grid input:focus,
.form-grid select:focus,
.user-row input:focus,
.user-row select:focus,
.reset-row input:focus {
  border-color: rgba(214,173,92,.34) !important;
  box-shadow: 0 0 0 3px rgba(214,173,92,.08);
}

/* Scrollbar discreta */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(214,173,92,.35) rgba(255,255,255,.04);
}

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

::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
}

::-webkit-scrollbar-thumb {
  background: rgba(214,173,92,.28);
  border-radius: 999px;
}

/* Responsivo mantendo requinte */
@media(max-width: 1380px) {
  .metrics {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

@media(max-width: 920px) {
  .top-status {
    justify-content: flex-start;
  }

  .main {
    padding: 18px !important;
  }
}

/* ===== JW CENTRAL PREMIUM VISUAL UPGRADE END ===== */

/* ===== JW CENTRAL USABILITY CLEANUP START ===== */

/*
  Ajuste de usabilidade:
  - removeu Favoritos e Links rápidos
  - Visão Geral mais objetiva
  - primeira seção vira Operação Digital
  - mantém padrão refinado JW
*/

.main {
  padding-top: 24px !important;
}

.metrics {
  margin-bottom: 20px !important;
}

.attention {
  margin-bottom: 20px !important;
}

.panel + .panel {
  margin-top: 18px !important;
}

/* Deixa a primeira grade operacional mais elegante e menos cansativa */
#operação-digital .cards,
#operacao-digital .cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#operação-digital .card,
#operacao-digital .card {
  min-height: 112px !important;
}

/* Torna a visão geral menos “lista de links” e mais cockpit */
.topbar h1::after {
  content: "Cockpit operacional";
  display: inline-flex;
  margin-left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jw-gold);
  background: rgba(214,173,92,.09);
  border: 1px solid rgba(214,173,92,.18);
  vertical-align: middle;
}

/* Menu lateral com leitura mais institucional */
.sidebar nav a[href="#operação-digital"],
.sidebar nav a[href="#operacao-digital"] {
  color: rgba(247,242,232,.88) !important;
}

/* Ajuste responsivo */
@media(max-width: 1380px) {
  #operação-digital .cards,
  #operacao-digital .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 720px) {
  #operação-digital .cards,
  #operacao-digital .cards {
    grid-template-columns: 1fr !important;
  }

  .topbar h1::after {
    display: table;
    margin: 10px 0 0;
  }
}

/* ===== JW CENTRAL USABILITY CLEANUP END ===== */

/* ===== JW CENTRAL REAL APP ICONS START ===== */

.icon,
.monitor-icon {
  overflow: hidden;
}

.icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.icon span {
  font-size: 16px;
  line-height: 1;
  display: block;
}

.monitor-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(214,173,92,.14), rgba(255,255,255,.035));
  border: 1px solid rgba(214,173,92,.16);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

.monitor-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.monitor-icon span {
  font-size: 15px;
  line-height: 1;
  display: block;
}

/* fallback refinado para módulos JW sem logo */
.card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== JW CENTRAL REAL APP ICONS END ===== */

/* ===== JW CENTRAL PREMIUM APP LOGOS START ===== */

.icon,
.monitor-icon {
  overflow: hidden !important;
}

.icon img,
.monitor-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}

.icon span,
.monitor-icon span {
  font-size: 15px;
  line-height: 1;
  display: block;
}

.card .icon {
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(214,173,92,.08)) !important;
  border: 1px solid rgba(214,173,92,.14) !important;
}

.monitor-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(214,173,92,.08));
  border: 1px solid rgba(214,173,92,.14);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

/* Deixa o card mais limpo com logo real */
.card h3 {
  letter-spacing: -0.018em;
}

/* Caso algum PNG não exista, evita quebrar visual drasticamente */
.icon img[src$=".png"],
.monitor-icon img[src$=".png"] {
  max-width: 20px;
  max-height: 20px;
}

/* ===== JW CENTRAL PREMIUM APP LOGOS END ===== */

/* ===== JW CENTRAL MONITORAMENTO PREMIUM START ===== */

.monitor-premium .topbar h1::after {
  content: "Centro de saúde";
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.health-card {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 16px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.82), rgba(9,12,18,.74));
  border: 1px solid rgba(214,173,92,.15);
  box-shadow:
    0 18px 58px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.025) inset;
}

.health-card::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,173,92,.16), transparent 68%);
}

.health-card span {
  display: block;
  color: rgba(224,230,240,.58);
  font-size: 11px;
  letter-spacing: .045em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.health-card strong {
  display: block;
  color: var(--jw-white);
  font-size: 24px;
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: 9px;
}

.health-card small {
  color: rgba(174,180,194,.72);
  font-size: 11px;
}

.monitor-alert-panel {
  border-color: rgba(251,191,36,.16) !important;
}

.alert-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.alert-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  border: 1px solid rgba(214,173,92,.12);
}

.alert-item strong {
  display: block;
  font-size: 13px;
  color: var(--jw-white);
}

.alert-item p {
  margin: 4px 0 0;
  color: rgba(203,213,225,.68);
  font-size: 12px;
  line-height: 1.42;
}

.critical-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.critical-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(21,25,36,.70), rgba(10,13,20,.70));
  border: 1px solid rgba(255,255,255,.075);
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.critical-card:hover {
  transform: translateY(-2px);
  border-color: rgba(214,173,92,.30);
  box-shadow: 0 20px 64px rgba(0,0,0,.30);
}

.critical-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(214,173,92,.08));
  border: 1px solid rgba(214,173,92,.14);
}

.critical-icon img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  display: block;
}

.critical-icon span {
  font-size: 16px;
}

.critical-card strong {
  display: block;
  color: var(--jw-white);
  font-size: 13px;
  margin-bottom: 4px;
}

.critical-card p {
  margin: 0 0 8px;
  color: rgba(203,213,225,.64);
  font-size: 11px;
  line-height: 1.35;
}

.critical-card em,
.monitor-line em,
.domain-card em {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 999px;
}

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

.monitor-table {
  display: grid;
  gap: 8px;
}

.monitor-line {
  display: grid;
  grid-template-columns: 16px 1fr 1.45fr auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(21,25,36,.58), rgba(10,13,20,.58));
  border: 1px solid rgba(255,255,255,.065);
}

.monitor-line strong {
  color: var(--jw-white);
  font-size: 12px;
}

.monitor-line small {
  color: rgba(203,213,225,.62);
  font-size: 11px;
  line-height: 1.35;
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.domain-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(21,25,36,.58), rgba(10,13,20,.58));
  border: 1px solid rgba(255,255,255,.065);
}

.domain-card strong {
  display: block;
  color: var(--jw-white);
  font-size: 12px;
  margin-bottom: 4px;
}

.domain-card span {
  color: rgba(203,213,225,.62);
  font-size: 11px;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.quick-action-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(21,25,36,.58), rgba(10,13,20,.58));
  border: 1px solid rgba(255,255,255,.065);
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.quick-action-grid a:hover {
  transform: translateY(-2px);
  border-color: rgba(214,173,92,.30);
  box-shadow: 0 16px 50px rgba(0,0,0,.26);
}

.quick-action-grid span {
  color: var(--jw-white);
  font-size: 12px;
  font-weight: 800;
}

.quick-action-grid small {
  color: var(--jw-gold);
  font-size: 11px;
  font-weight: 800;
}

@media(max-width: 1380px) {
  .health-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .critical-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media(max-width: 980px) {
  .monitor-two-cols,
  .domain-grid,
  .alert-list {
    grid-template-columns: 1fr;
  }

  .monitor-line {
    grid-template-columns: 16px 1fr;
  }

  .monitor-line small,
  .monitor-line em {
    grid-column: 2;
  }
}

@media(max-width: 720px) {
  .health-grid,
  .critical-grid,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .domain-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===== JW CENTRAL MONITORAMENTO PREMIUM END ===== */

/* ===== JW CENTRAL LIVE MONITORING START ===== */

.live-monitor-panel {
  margin-bottom: 18px !important;
  border-color: rgba(214,173,92,.18) !important;
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.live-card {
  min-height: 104px;
  padding: 15px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.82), rgba(9,12,18,.74));
  border: 1px solid rgba(214,173,92,.13);
  box-shadow: 0 14px 44px rgba(0,0,0,.18);
}

.live-card span {
  display: block;
  color: rgba(224,230,240,.58);
  font-size: 11px;
  letter-spacing: .045em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.live-card strong {
  display: block;
  color: var(--jw-white);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.045em;
  margin-bottom: 9px;
}

.live-card small {
  color: rgba(174,180,194,.72);
  font-size: 11px;
  line-height: 1.35;
}

.live-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.live-two-cols h3 {
  margin: 0 0 10px;
  color: var(--jw-white);
  font-size: 14px;
  letter-spacing: -.02em;
}

.live-table {
  display: grid;
  gap: 8px;
}

.live-row {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(21,25,36,.58), rgba(10,13,20,.58));
  border: 1px solid rgba(255,255,255,.065);
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.live-row:hover {
  transform: translateY(-2px);
  border-color: rgba(214,173,92,.28);
  box-shadow: 0 16px 50px rgba(0,0,0,.22);
}

.live-row strong {
  color: var(--jw-white);
  font-size: 12px;
}

.live-row small {
  color: rgba(203,213,225,.62);
  font-size: 11px;
}

.live-row em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

.live-row.muted {
  grid-template-columns: 1fr;
  color: rgba(203,213,225,.62);
  font-size: 12px;
}

@media(max-width: 1380px) {
  .live-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

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

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

  .live-row {
    grid-template-columns: 16px 1fr;
  }

  .live-row small,
  .live-row em {
    grid-column: 2;
  }
}

/* ===== JW CENTRAL LIVE MONITORING END ===== */

/* ===== JW CENTRAL MONITORAMENTO PREMIUM FINAL START ===== */

.monitor-premium-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.refinado-chip {
  padding: 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.82), rgba(9,12,18,.74));
  border: 1px solid rgba(214,173,92,.14);
  box-shadow:
    0 14px 44px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.025) inset;
}

.refinado-chip strong {
  display: block;
  color: var(--jw-gold);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.refinado-chip span {
  display: block;
  color: var(--jw-white);
  font-size: 13px;
  letter-spacing: -.01em;
}

.monitor-premium .panel {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.monitor-premium .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(214,173,92,.03), transparent 32%);
  pointer-events: none;
}

.monitor-premium .section-head {
  margin-bottom: 14px !important;
  padding-bottom: 12px;
}

.monitor-premium .section-head h2 {
  font-size: 18px !important;
  letter-spacing: -.03em !important;
}

.monitor-premium .section-head span {
  font-size: 12px !important;
  color: rgba(203,213,225,.62) !important;
}

.monitor-premium .panel:hover {
  border-color: rgba(214,173,92,.20) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
}

.health-card,
.alert-item,
.critical-card,
.domain-card,
.monitor-line,
.live-card,
.live-row,
.container-card,
.ssl-card,
.checklist-card,
.mini-metric-card,
.timeline-item,
.risk-item {
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.health-card:hover,
.alert-item:hover,
.critical-card:hover,
.domain-card:hover,
.monitor-line:hover,
.live-card:hover,
.live-row:hover,
.container-card:hover,
.ssl-card:hover,
.checklist-card:hover,
.mini-metric-card:hover,
.timeline-item:hover,
.risk-item:hover {
  transform: translateY(-2px);
  border-color: rgba(214,173,92,.26) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.24);
}

.monitor-premium .critical-grid {
  gap: 13px !important;
}

.monitor-premium .critical-card {
  border-radius: 20px !important;
  padding: 15px !important;
}

.monitor-premium .critical-card strong {
  font-size: 13px !important;
  letter-spacing: -.01em;
}

.monitor-premium .critical-card p {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.monitor-premium .monitor-line {
  min-height: 52px !important;
  border-radius: 16px !important;
  padding: 11px 13px !important;
}

.monitor-premium .monitor-line strong {
  font-size: 12px !important;
}

.monitor-premium .monitor-line small {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.monitor-premium .domain-card {
  border-radius: 18px !important;
  padding: 14px !important;
}

.monitor-premium .domain-card strong {
  font-size: 12px !important;
}

.monitor-premium .domain-card span {
  font-size: 11px !important;
}

.monitor-premium .health-grid {
  gap: 13px !important;
}

.monitor-premium .health-card {
  border-radius: 20px !important;
}

.monitor-premium .alert-item {
  border-radius: 18px !important;
  padding: 15px !important;
}

.monitor-premium .quick-action-grid a {
  min-height: 54px;
  border-radius: 18px !important;
}

.monitor-premium .quick-action-grid a span {
  font-size: 12px !important;
  letter-spacing: -.01em;
}

.monitor-premium .quick-action-grid a small {
  font-size: 11px !important;
}

.live-monitor-panel {
  margin-top: 22px !important;
  border-color: rgba(214,173,92,.22) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
}

.live-monitor-panel::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,173,92,.35), transparent);
  opacity: .85;
}

.live-grid {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 12px !important;
}

.live-card {
  border-radius: 18px !important;
  min-height: 108px !important;
  position: relative;
  overflow: hidden;
}

.live-card::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,173,92,.12), transparent 70%);
}

.live-card strong {
  font-size: 24px !important;
}

.live-card small {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.live-monitor-note {
  margin: 0 0 16px;
  padding: 13px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(214,173,92,.10);
  color: rgba(203,213,225,.72);
  font-size: 12px;
  line-height: 1.45;
}

.live-monitor-note strong {
  color: var(--jw-gold);
}

.live-two-cols {
  gap: 18px !important;
}

.live-two-cols h3 {
  margin: 0 0 11px !important;
  font-size: 14px !important;
  letter-spacing: -.02em;
  color: var(--jw-white) !important;
}

.live-row {
  min-height: 46px !important;
  border-radius: 15px !important;
  padding: 11px 13px !important;
}

.live-row strong {
  font-size: 12px !important;
}

.live-row small {
  font-size: 11px !important;
}

.live-row em {
  text-transform: uppercase;
  letter-spacing: .04em;
}

.status-dot {
  box-shadow: 0 0 14px currentColor;
}

.top-status {
  gap: 10px !important;
}

.top-status strong {
  letter-spacing: -.01em;
}

@media(max-width: 1380px) {
  .monitor-premium-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width: 980px) {
  .live-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media(max-width: 720px) {
  .monitor-premium-bar,
  .live-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== JW CENTRAL MONITORAMENTO PREMIUM FINAL END ===== */

/* ===== JW CENTRAL MEMORY IMPACT START ===== */

.live-memory-impact {
  background:
    linear-gradient(135deg, rgba(214,173,92,.16), rgba(18,22,31,.86)) !important;
  border: 1px solid rgba(214,173,92,.26) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
}

.live-memory-impact::after {
  background: radial-gradient(circle, rgba(214,173,92,.22), transparent 70%) !important;
}

.live-memory-impact span {
  color: rgba(247,242,232,.72) !important;
}

.live-memory-impact strong {
  color: var(--jw-gold) !important;
  font-size: 26px !important;
  letter-spacing: -.05em;
}

.live-memory-impact small {
  color: rgba(247,242,232,.78) !important;
}

/* ===== JW CENTRAL MEMORY IMPACT END ===== */

/* ===== JW CENTRAL REFERENCE LIMITS START ===== */

.live-machine-impact {
  grid-column: span 2;
  min-height: 126px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.30), transparent 34%),
    linear-gradient(135deg, rgba(214,173,92,.22), rgba(18,22,31,.94) 56%, rgba(8,11,17,.90)) !important;
  border: 1px solid rgba(214,173,92,.36) !important;
  box-shadow:
    0 28px 86px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 90px rgba(214,173,92,.11) !important;
}

.live-machine-impact span {
  color: rgba(247,242,232,.78) !important;
  letter-spacing: .12em !important;
}

.live-machine-impact strong {
  color: var(--jw-gold) !important;
  font-size: clamp(28px, 2.1vw, 38px) !important;
  letter-spacing: -.075em !important;
  line-height: .95 !important;
  margin-bottom: 12px !important;
  text-shadow: 0 0 28px rgba(214,173,92,.18);
}

.live-machine-impact small {
  color: rgba(247,242,232,.82) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.live-machine-impact::before {
  content: "Referência";
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.live-machine-impact::after {
  width: 120px !important;
  height: 120px !important;
  right: -34px !important;
  top: -34px !important;
  background: radial-gradient(circle, rgba(214,173,92,.30), transparent 68%) !important;
}

@media(max-width: 980px) {
  .live-machine-impact {
    grid-column: span 2;
  }
}

@media(max-width: 720px) {
  .live-machine-impact {
    grid-column: span 1;
  }

  .live-machine-impact strong {
    font-size: 27px !important;
  }
}

/* ===== JW CENTRAL REFERENCE LIMITS END ===== */

/* ===== JW CENTRAL REFERENCE LIMITS START ===== */

.live-machine-impact {
  grid-column: span 2;
  min-height: 126px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.30), transparent 34%),
    linear-gradient(135deg, rgba(214,173,92,.22), rgba(18,22,31,.94) 56%, rgba(8,11,17,.90)) !important;
  border: 1px solid rgba(214,173,92,.36) !important;
  box-shadow:
    0 28px 86px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 90px rgba(214,173,92,.11) !important;
}

.live-machine-impact span {
  color: rgba(247,242,232,.78) !important;
  letter-spacing: .12em !important;
}

.live-machine-impact strong {
  color: var(--jw-gold) !important;
  font-size: clamp(28px, 2.1vw, 38px) !important;
  letter-spacing: -.075em !important;
  line-height: .95 !important;
  margin-bottom: 12px !important;
  text-shadow: 0 0 28px rgba(214,173,92,.18);
}

.live-machine-impact small {
  color: rgba(247,242,232,.82) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.live-machine-impact::before {
  content: "Referência";
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.live-machine-impact::after {
  width: 120px !important;
  height: 120px !important;
  right: -34px !important;
  top: -34px !important;
  background: radial-gradient(circle, rgba(214,173,92,.30), transparent 68%) !important;
}

@media(max-width: 980px) {
  .live-machine-impact {
    grid-column: span 2;
  }
}

@media(max-width: 720px) {
  .live-machine-impact {
    grid-column: span 1;
  }

  .live-machine-impact strong {
    font-size: 27px !important;
  }
}

/* ===== JW CENTRAL REFERENCE LIMITS END ===== */

/* ===== JW CENTRAL REFERENCE LIMITS START ===== */

.live-machine-impact {
  grid-column: span 2;
  min-height: 126px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.30), transparent 34%),
    linear-gradient(135deg, rgba(214,173,92,.22), rgba(18,22,31,.94) 56%, rgba(8,11,17,.90)) !important;
  border: 1px solid rgba(214,173,92,.36) !important;
  box-shadow:
    0 28px 86px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 90px rgba(214,173,92,.11) !important;
}

.live-machine-impact span {
  color: rgba(247,242,232,.78) !important;
  letter-spacing: .12em !important;
}

.live-machine-impact strong {
  color: var(--jw-gold) !important;
  font-size: clamp(28px, 2.1vw, 38px) !important;
  letter-spacing: -.075em !important;
  line-height: .95 !important;
  margin-bottom: 12px !important;
  text-shadow: 0 0 28px rgba(214,173,92,.18);
}

.live-machine-impact small {
  color: rgba(247,242,232,.82) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.live-machine-impact::before {
  content: "Referência";
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.live-machine-impact::after {
  width: 120px !important;
  height: 120px !important;
  right: -34px !important;
  top: -34px !important;
  background: radial-gradient(circle, rgba(214,173,92,.30), transparent 68%) !important;
}

@media(max-width: 980px) {
  .live-machine-impact {
    grid-column: span 2;
  }
}

@media(max-width: 720px) {
  .live-machine-impact {
    grid-column: span 1;
  }

  .live-machine-impact strong {
    font-size: 27px !important;
  }
}

/* ===== JW CENTRAL REFERENCE LIMITS END ===== */

/* ===== JW CENTRAL TOPBAR SEARCH PREMIUM START ===== */

.top-status {
  min-width: 280px;
  justify-content: flex-end;
}

.top-status span:first-child {
  color: #4ade80 !important;
  font-weight: 800;
}

.top-status span:nth-child(2) {
  color: rgba(203,213,225,.72) !important;
}

.top-status strong {
  color: var(--jw-white) !important;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(214,173,92,.09);
  border: 1px solid rgba(214,173,92,.16);
}

.jw-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: center;
  margin: 16px 0 20px;
}

.search-box {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.82), rgba(9,12,18,.74));
  border: 1px solid rgba(214,173,92,.16);
  box-shadow:
    0 18px 58px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.025) inset;
}

.search-box span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--jw-gold);
  background: rgba(214,173,92,.09);
  border: 1px solid rgba(214,173,92,.14);
  font-size: 18px;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--jw-white);
  font-size: 14px;
}

.search-box input::placeholder {
  color: rgba(203,213,225,.48);
}

.search-box:focus-within {
  border-color: rgba(214,173,92,.36);
  box-shadow:
    0 22px 70px rgba(0,0,0,.28),
    0 0 0 3px rgba(214,173,92,.07);
}

.search-status {
  min-height: 54px;
  padding: 10px 14px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.72), rgba(9,12,18,.68));
  border: 1px solid rgba(255,255,255,.07);
  display: grid;
  align-content: center;
}

.search-status strong {
  color: var(--jw-gold);
  font-size: 12px;
  letter-spacing: .02em;
}

.search-status span {
  color: rgba(203,213,225,.58);
  font-size: 11px;
  margin-top: 3px;
}

.jw-hidden-by-search {
  display: none !important;
}

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

  .top-status {
    min-width: 0;
    justify-content: flex-start;
  }
}

/* ===== JW CENTRAL TOPBAR SEARCH PREMIUM END ===== */

/* ===== JW CENTRAL INFRA IMPACT HERO START ===== */

.infra-impact-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
  gap: 18px;
  align-items: stretch;
  margin: 0 0 20px;
  padding: 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 12%, rgba(214,173,92,.26), transparent 34%),
    radial-gradient(circle at 12% 90%, rgba(96,165,250,.10), transparent 32%),
    linear-gradient(135deg, rgba(21,25,36,.88), rgba(8,11,17,.84));
  border: 1px solid rgba(214,173,92,.28);
  box-shadow:
    0 28px 90px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 90px rgba(214,173,92,.08);
}

.infra-impact-hero::before {
  content: "Capacidade de referência";
  position: absolute;
  top: 16px;
  right: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.infra-impact-main {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: 144px;
}

.infra-impact-main > span {
  display: block;
  color: rgba(247,242,232,.72);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.infra-impact-main h2 {
  margin: 0 0 12px;
  color: var(--jw-gold);
  font-size: clamp(30px, 3vw, 52px);
  line-height: .94;
  letter-spacing: -.075em;
  text-shadow: 0 0 32px rgba(214,173,92,.18);
}

.infra-impact-main p {
  margin: 0;
  max-width: 760px;
  color: rgba(247,242,232,.72);
  font-size: 13px;
  line-height: 1.48;
}

.infra-impact-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  align-content: end;
}

.infra-impact-stats div {
  min-height: 96px;
  display: grid;
  align-content: center;
  padding: 14px;
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.085);
}

.infra-impact-stats strong {
  display: block;
  color: var(--jw-white);
  font-size: 25px;
  letter-spacing: -.055em;
  line-height: 1;
  margin-bottom: 9px;
}

.infra-impact-stats span {
  display: block;
  color: rgba(203,213,225,.66);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.infra-impact-hero,
.infra-impact-stats div {
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.infra-impact-hero:hover {
  border-color: rgba(214,173,92,.38);
  box-shadow:
    0 34px 110px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 110px rgba(214,173,92,.10);
}

.infra-impact-stats div:hover {
  transform: translateY(-2px);
  border-color: rgba(214,173,92,.26);
}

@media(max-width: 1200px) {
  .infra-impact-hero {
    grid-template-columns: 1fr;
  }

  .infra-impact-hero::before {
    position: static;
    width: fit-content;
    order: -1;
    margin-bottom: 10px;
  }
}

@media(max-width: 720px) {
  .infra-impact-hero {
    padding: 16px;
    border-radius: 22px;
  }

  .infra-impact-stats {
    grid-template-columns: 1fr;
  }

  .infra-impact-main h2 {
    font-size: 32px;
  }
}

/* ===== JW CENTRAL INFRA IMPACT HERO END ===== */

/* ===== JW CENTRAL DYNAMIC REFERENCE CARDS START ===== */

.live-capacity-card {
  position: relative;
  min-height: 124px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.18), transparent 36%),
    linear-gradient(180deg, rgba(20,24,34,.86), rgba(9,12,18,.78)) !important;
  border: 1px solid rgba(214,173,92,.20) !important;
}

.live-capacity-card strong {
  color: var(--jw-gold) !important;
  font-size: clamp(22px, 1.5vw, 30px) !important;
  letter-spacing: -.06em !important;
}

.capacity-bar {
  position: relative;
  height: 7px;
  margin-top: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.06);
}

.capacity-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,173,92,.74), rgba(244,213,138,.96));
  box-shadow: 0 0 18px rgba(214,173,92,.28);
  transition: width .45s ease;
}

.live-capacity-card::before {
  content: "Real / Referência";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(214,173,92,.10);
  border: 1px solid rgba(214,173,92,.16);
  color: rgba(247,242,232,.78);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

@media(max-width: 720px) {
  .live-capacity-card strong {
    font-size: 24px !important;
  }
}

/* ===== JW CENTRAL DYNAMIC REFERENCE CARDS END ===== */

/* ===== JW CENTRAL SMART SEARCH START ===== */

.jw-search-bar {
  position: sticky;
  top: 14px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 12px;
  align-items: center;
  margin: 16px 0 20px;
}

.search-box {
  position: relative;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px 0 16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.90), rgba(9,12,18,.82));
  border: 1px solid rgba(214,173,92,.18);
  box-shadow:
    0 20px 64px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.028) inset;
  backdrop-filter: blur(10px);
}

.search-box span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--jw-gold);
  background: rgba(214,173,92,.10);
  border: 1px solid rgba(214,173,92,.16);
  font-size: 19px;
  flex: 0 0 auto;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--jw-white);
  font-size: 14px;
  letter-spacing: -.01em;
}

.search-box input::placeholder {
  color: rgba(203,213,225,.48);
}

.search-box button {
  display: none;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.search-box button.show {
  display: inline-flex;
}

.search-box:focus-within,
.jw-search-bar.is-searching .search-box {
  border-color: rgba(214,173,92,.46);
  box-shadow:
    0 26px 86px rgba(0,0,0,.34),
    0 0 0 3px rgba(214,173,92,.085),
    0 0 70px rgba(214,173,92,.10);
}

.jw-search-bar.is-searching .search-box::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,173,92,.70), transparent);
}

.search-status {
  min-height: 58px;
  padding: 10px 14px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.78), rgba(9,12,18,.72));
  border: 1px solid rgba(255,255,255,.075);
  display: grid;
  align-content: center;
  box-shadow: 0 16px 50px rgba(0,0,0,.22);
}

.search-status strong {
  color: var(--jw-gold);
  font-size: 12px;
  letter-spacing: .02em;
}

.search-status span {
  color: rgba(203,213,225,.58);
  font-size: 11px;
  margin-top: 3px;
}

.jw-search-empty {
  display: none;
  margin: -4px 0 18px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.82), rgba(9,12,18,.74));
  border: 1px solid rgba(251,191,36,.20);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

.jw-search-empty.show {
  display: grid;
  gap: 6px;
}

.jw-search-empty strong {
  color: var(--jw-white);
  font-size: 15px;
}

.jw-search-empty span {
  color: rgba(203,213,225,.66);
  font-size: 12px;
}

.jw-hidden-by-search {
  display: none !important;
}

.jw-search-active .jw-search-match {
  border-color: rgba(214,173,92,.42) !important;
  box-shadow:
    0 20px 70px rgba(0,0,0,.30),
    0 0 0 1px rgba(214,173,92,.09) inset,
    0 0 42px rgba(214,173,92,.08) !important;
  background:
    linear-gradient(180deg, rgba(27,31,42,.88), rgba(11,14,20,.78)) !important;
  animation: jwSearchPulse .34s ease both;
}

mark.jw-search-mark {
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
  padding: 1px 4px;
  border-radius: 6px;
  font-weight: 900;
}

@keyframes jwSearchPulse {
  from {
    transform: translateY(2px);
    opacity: .78;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media(max-width: 980px) {
  .jw-search-bar {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
  }
}

@media(max-width: 720px) {
  .search-box {
    height: 54px;
    border-radius: 18px;
  }

  .search-status {
    min-height: 50px;
    border-radius: 18px;
  }
}

/* ===== JW CENTRAL SMART SEARCH END ===== */

/* ===== JW CENTRAL SMART SEARCH START ===== */

.jw-search-bar {
  position: sticky;
  top: 14px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 12px;
  align-items: center;
  margin: 16px 0 20px;
}

.search-box {
  position: relative;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px 0 16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.90), rgba(9,12,18,.82));
  border: 1px solid rgba(214,173,92,.18);
  box-shadow:
    0 20px 64px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.028) inset;
  backdrop-filter: blur(10px);
}

.search-box span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--jw-gold);
  background: rgba(214,173,92,.10);
  border: 1px solid rgba(214,173,92,.16);
  font-size: 19px;
  flex: 0 0 auto;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--jw-white);
  font-size: 14px;
  letter-spacing: -.01em;
}

.search-box input::placeholder {
  color: rgba(203,213,225,.48);
}

.search-box button {
  display: none;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.search-box button.show {
  display: inline-flex;
}

.search-box:focus-within,
.jw-search-bar.is-searching .search-box {
  border-color: rgba(214,173,92,.46);
  box-shadow:
    0 26px 86px rgba(0,0,0,.34),
    0 0 0 3px rgba(214,173,92,.085),
    0 0 70px rgba(214,173,92,.10);
}

.jw-search-bar.is-searching .search-box::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,173,92,.70), transparent);
}

.search-status {
  min-height: 58px;
  padding: 10px 14px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.78), rgba(9,12,18,.72));
  border: 1px solid rgba(255,255,255,.075);
  display: grid;
  align-content: center;
  box-shadow: 0 16px 50px rgba(0,0,0,.22);
}

.search-status strong {
  color: var(--jw-gold);
  font-size: 12px;
  letter-spacing: .02em;
}

.search-status span {
  color: rgba(203,213,225,.58);
  font-size: 11px;
  margin-top: 3px;
}

.jw-search-empty {
  display: none;
  margin: -4px 0 18px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.82), rgba(9,12,18,.74));
  border: 1px solid rgba(251,191,36,.20);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

.jw-search-empty.show {
  display: grid;
  gap: 6px;
}

.jw-search-empty strong {
  color: var(--jw-white);
  font-size: 15px;
}

.jw-search-empty span {
  color: rgba(203,213,225,.66);
  font-size: 12px;
}

.jw-hidden-by-search {
  display: none !important;
}

.jw-search-active .jw-search-match {
  border-color: rgba(214,173,92,.42) !important;
  box-shadow:
    0 20px 70px rgba(0,0,0,.30),
    0 0 0 1px rgba(214,173,92,.09) inset,
    0 0 42px rgba(214,173,92,.08) !important;
  background:
    linear-gradient(180deg, rgba(27,31,42,.88), rgba(11,14,20,.78)) !important;
  animation: jwSearchPulse .34s ease both;
}

mark.jw-search-mark {
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
  padding: 1px 4px;
  border-radius: 6px;
  font-weight: 900;
}

@keyframes jwSearchPulse {
  from {
    transform: translateY(2px);
    opacity: .78;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media(max-width: 980px) {
  .jw-search-bar {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
  }
}

@media(max-width: 720px) {
  .search-box {
    height: 54px;
    border-radius: 18px;
  }

  .search-status {
    min-height: 50px;
    border-radius: 18px;
  }
}

/* ===== JW CENTRAL SMART SEARCH END ===== */

/* ===== JW CENTRAL VPS DYNAMIC CLEAN START ===== */

.live-monitor-panel .section-head h2 {
  font-size: 20px !important;
}

.vps-live-grid {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

.live-vps-card {
  position: relative;
  min-height: 124px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.14), transparent 34%),
    linear-gradient(180deg, rgba(20,24,34,.86), rgba(9,12,18,.78)) !important;
  border: 1px solid rgba(214,173,92,.18) !important;
}

.live-vps-card strong {
  color: var(--jw-gold) !important;
  font-size: clamp(22px, 1.45vw, 30px) !important;
  letter-spacing: -.06em !important;
}

.live-vps-card small {
  color: rgba(247,242,232,.68) !important;
}

.capacity-bar {
  position: relative;
  height: 7px;
  margin-top: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.06);
}

.capacity-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,173,92,.74), rgba(244,213,138,.96));
  box-shadow: 0 0 18px rgba(214,173,92,.28);
  transition: width .45s ease;
}

.live-vps-card::before,
.live-machine-impact::before,
.live-capacity-card::before {
  content: none !important;
}

@media(max-width: 1380px) {
  .vps-live-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

@media(max-width: 980px) {
  .vps-live-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media(max-width: 720px) {
  .vps-live-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== JW CENTRAL VPS DYNAMIC CLEAN END ===== */

/* ===== JW CENTRAL SEARCH STATIC + NVME 1TB START ===== */

/* A busca continua no topo da página, mas não acompanha a rolagem */
.jw-search-bar {
  position: relative !important;
  top: auto !important;
  z-index: 5 !important;
}

/* Mantém destaque ao pesquisar, sem ficar grudada na tela */
.jw-search-bar.is-searching {
  z-index: 6 !important;
}

/* Ajuste fino para a busca parecer parte do fluxo da página */
.search-box {
  backdrop-filter: blur(6px);
}

/* ===== JW CENTRAL SEARCH STATIC + NVME 1TB END ===== */

/* ===== JW CENTRAL VPS TOP PANEL START ===== */

.monitor-vps-panel {
  margin-bottom: 18px !important;
  border-color: rgba(214,173,92,.18) !important;
}

.monitor-vps-panel .section-head h2 {
  font-size: 20px !important;
}

.vps-top-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.vps-top-card {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.12), transparent 34%),
    linear-gradient(180deg, rgba(20,24,34,.82), rgba(9,12,18,.74));
  border: 1px solid rgba(214,173,92,.13);
  box-shadow:
    0 14px 44px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.025) inset;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.vps-top-card:hover {
  transform: translateY(-2px);
  border-color: rgba(214,173,92,.28);
  box-shadow: 0 20px 64px rgba(0,0,0,.26);
}

.vps-top-card span {
  display: block;
  color: rgba(224,230,240,.58);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.vps-top-card strong {
  display: block;
  color: var(--jw-gold);
  font-size: clamp(19px, 1.2vw, 25px);
  letter-spacing: -.055em;
  line-height: 1;
  margin-bottom: 9px;
}

.vps-top-card small {
  display: block;
  color: rgba(203,213,225,.66);
  font-size: 11px;
  line-height: 1.3;
}

@media(max-width: 1480px) {
  .vps-top-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width: 900px) {
  .vps-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ===== JW CENTRAL VPS TOP PANEL END ===== */

/* ===== JW CENTRAL TECHNICAL MONITORING BOTTOM START ===== */

.technical-monitor-panel {
  margin-top: 22px !important;
}

.technical-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.technical-summary-card {
  min-height: 104px;
  padding: 15px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.12), transparent 34%),
    linear-gradient(180deg, rgba(20,24,34,.82), rgba(9,12,18,.74));
  border: 1px solid rgba(214,173,92,.13);
  box-shadow:
    0 14px 44px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.025) inset;
}

.technical-summary-card span {
  display: block;
  color: rgba(224,230,240,.58);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.technical-summary-card strong {
  display: block;
  color: var(--jw-gold);
  font-size: 28px;
  letter-spacing: -.06em;
  line-height: 1;
  margin-bottom: 9px;
}

.technical-summary-card small {
  display: block;
  color: rgba(203,213,225,.66);
  font-size: 11px;
  line-height: 1.3;
}

.technical-three-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.technical-three-cols h3 {
  margin: 0 0 11px;
  font-size: 14px;
  letter-spacing: -.02em;
  color: var(--jw-white);
}

.technical-summary-card,
.technical-three-cols .live-row {
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.technical-summary-card:hover,
.technical-three-cols .live-row:hover {
  transform: translateY(-2px);
  border-color: rgba(214,173,92,.28);
  box-shadow: 0 20px 64px rgba(0,0,0,.26);
}

@media(max-width: 1280px) {
  .technical-three-cols {
    grid-template-columns: 1fr;
  }
}

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

/* ===== JW CENTRAL TECHNICAL MONITORING BOTTOM END ===== */

/* ===== JW CENTRAL SYSTEM ALERTS START ===== */

.technical-summary-grid {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

.technical-four-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}

.technical-four-cols h3 {
  margin: 0 0 11px;
  font-size: 14px;
  letter-spacing: -.02em;
  color: var(--jw-white);
}

.alert-live-row {
  grid-template-columns: 16px 1fr !important;
  align-items: flex-start !important;
}

.alert-live-row small,
.alert-live-row em {
  grid-column: 2 !important;
}

.alert-live-row em {
  width: fit-content;
  margin-top: 2px;
}

.alert-live-row strong {
  line-height: 1.25;
}

.alert-live-row small {
  line-height: 1.35;
}

@media(max-width: 1480px) {
  .technical-four-cols {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .technical-summary-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media(max-width: 860px) {
  .technical-four-cols,
  .technical-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== JW CENTRAL SYSTEM ALERTS END ===== */

/* ===== JW CENTRAL VPS TASK MANAGER STYLE START ===== */

.vps-top-card strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.065em !important;
}

.vps-top-card small {
  color: rgba(203,213,225,.72) !important;
}

/* Memória, Swap e NVMe com leitura de capacidade */
.vps-top-card:nth-child(1),
.vps-top-card:nth-child(2),
.vps-top-card:nth-child(3) {
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.16), transparent 36%),
    linear-gradient(180deg, rgba(20,24,34,.86), rgba(9,12,18,.76)) !important;
  border-color: rgba(214,173,92,.18) !important;
}

/* CPU com leitura limpa: Load + cores */
.vps-top-card:nth-child(4) strong {
  color: var(--jw-white) !important;
}

.vps-top-card:nth-child(4) small {
  color: var(--jw-gold) !important;
  font-weight: 800;
}

/* Atualização mais viva, sem exagero */
#vps-top-updated,
#live-updated {
  color: rgba(203,213,225,.72) !important;
}

/* ===== JW CENTRAL VPS TASK MANAGER STYLE END ===== */

/* ===== JW CENTRAL VPS TASK MANAGER STYLE START ===== */

.vps-top-card strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.065em !important;
}

.vps-top-card small {
  color: rgba(203,213,225,.72) !important;
}

/* Memória, Swap e NVMe com leitura de capacidade */
.vps-top-card:nth-child(1),
.vps-top-card:nth-child(2),
.vps-top-card:nth-child(3) {
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.16), transparent 36%),
    linear-gradient(180deg, rgba(20,24,34,.86), rgba(9,12,18,.76)) !important;
  border-color: rgba(214,173,92,.18) !important;
}

/* CPU com leitura limpa: Load + cores */
.vps-top-card:nth-child(4) strong {
  color: var(--jw-white) !important;
}

.vps-top-card:nth-child(4) small {
  color: var(--jw-gold) !important;
  font-weight: 800;
}

/* Atualização mais viva, sem exagero */
#vps-top-updated,
#live-updated {
  color: rgba(203,213,225,.72) !important;
}

/* ===== JW CENTRAL VPS TASK MANAGER STYLE END ===== */

/* ===== JW CENTRAL VPS CLEAN VALUES START ===== */

.vps-top-card strong {
  font-variant-numeric: tabular-nums;
}

.vps-top-card:nth-child(4) strong {
  color: var(--jw-gold) !important;
}

.vps-top-card:nth-child(4) small {
  color: rgba(203,213,225,.72) !important;
  font-weight: 700;
}

.vps-top-card small {
  letter-spacing: .01em;
}

/* ===== JW CENTRAL VPS CLEAN VALUES END ===== */

/* ===== JW CENTRAL HIDE VPS SMALL USAGE START ===== */

/* Oculta apenas as linhas pequenas de Memória, Swap e NVMe */
.vps-top-card:nth-child(1) small,
.vps-top-card:nth-child(2) small,
.vps-top-card:nth-child(3) small {
  display: none !important;
}

/* Reequilibra o alinhamento dos três primeiros cards sem o texto pequeno */
.vps-top-card:nth-child(1),
.vps-top-card:nth-child(2),
.vps-top-card:nth-child(3) {
  display: grid;
  align-content: center;
}

/* Mantém CPU, Uptime e Containers com detalhe normal */
.vps-top-card:nth-child(4) small,
.vps-top-card:nth-child(5) small,
.vps-top-card:nth-child(6) small {
  display: block !important;
}

/* ===== JW CENTRAL HIDE VPS SMALL USAGE END ===== */

/* ===== JW CENTRAL VPS REAL VS REFERENCE COLORS START ===== */

/* Valor real dinâmico: branco */
.vps-real-value {
  color: var(--jw-white) !important;
  font-weight: 900;
}

/* Separador */
.vps-separator {
  color: rgba(203,213,225,.38) !important;
  font-weight: 700;
}

/* Referência JW: dourado */
.vps-reference-value {
  color: var(--jw-gold) !important;
  font-weight: 900;
}

/* Detalhe pequeno da CPU */
.vps-real-small {
  color: rgba(247,242,232,.88) !important;
  font-weight: 800;
}

.vps-reference-small {
  color: var(--jw-gold) !important;
  font-weight: 900;
}

/* Garante que o strong aceite os spans sem perder o layout */
.vps-top-card strong {
  display: block;
  white-space: nowrap;
}

/* ===== JW CENTRAL VPS REAL VS REFERENCE COLORS END ===== */

/* ===== JW CENTRAL VPS REAL VS REFERENCE COLORS START ===== */

/* Valor real dinâmico: branco */
.vps-real-value {
  color: var(--jw-white) !important;
  font-weight: 900;
}

/* Separador */
.vps-separator {
  color: rgba(203,213,225,.38) !important;
  font-weight: 700;
}

/* Referência JW: dourado */
.vps-reference-value {
  color: var(--jw-gold) !important;
  font-weight: 900;
}

/* Detalhe pequeno da CPU */
.vps-real-small {
  color: rgba(247,242,232,.88) !important;
  font-weight: 800;
}

.vps-reference-small {
  color: var(--jw-gold) !important;
  font-weight: 900;
}

/* Garante que o strong aceite os spans sem perder o layout */
.vps-top-card strong {
  display: block;
  white-space: nowrap;
}

/* ===== JW CENTRAL VPS REAL VS REFERENCE COLORS END ===== */

/* ===== JW CENTRAL VPS COLORS FORCE FINAL START ===== */

/* Remove a cor dourada herdada do strong quando houver spans internos */
.vps-top-card strong .vps-real-value,
.vps-real-value {
  color: #ffffff !important;
  font-weight: 950 !important;
  text-shadow: 0 0 22px rgba(255,255,255,.08);
}

.vps-top-card strong .vps-reference-value,
.vps-reference-value {
  color: var(--jw-gold) !important;
  font-weight: 950 !important;
  text-shadow: 0 0 22px rgba(214,173,92,.12);
}

.vps-top-card strong .vps-separator,
.vps-separator {
  color: rgba(203,213,225,.38) !important;
  font-weight: 800 !important;
}

.vps-real-small {
  color: rgba(255,255,255,.92) !important;
  font-weight: 850 !important;
}

.vps-reference-small {
  color: var(--jw-gold) !important;
  font-weight: 950 !important;
}

/* Garante que o strong não pinte tudo de dourado por herança */
.vps-top-card strong {
  color: inherit !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* CPU: valor principal branco; referência de cores dourada no detalhe */
.vps-top-card:nth-child(4) strong .vps-real-value {
  color: #ffffff !important;
}

.vps-top-card:nth-child(4) small .vps-reference-small {
  color: var(--jw-gold) !important;
}

/* ===== JW CENTRAL VPS COLORS FORCE FINAL END ===== */

/* ===== JW CENTRAL VPS COLORS FORCE FINAL START ===== */

/* Remove a cor dourada herdada do strong quando houver spans internos */
.vps-top-card strong .vps-real-value,
.vps-real-value {
  color: #ffffff !important;
  font-weight: 950 !important;
  text-shadow: 0 0 22px rgba(255,255,255,.08);
}

.vps-top-card strong .vps-reference-value,
.vps-reference-value {
  color: var(--jw-gold) !important;
  font-weight: 950 !important;
  text-shadow: 0 0 22px rgba(214,173,92,.12);
}

.vps-top-card strong .vps-separator,
.vps-separator {
  color: rgba(203,213,225,.38) !important;
  font-weight: 800 !important;
}

.vps-real-small {
  color: rgba(255,255,255,.92) !important;
  font-weight: 850 !important;
}

.vps-reference-small {
  color: var(--jw-gold) !important;
  font-weight: 950 !important;
}

/* Garante que o strong não pinte tudo de dourado por herança */
.vps-top-card strong {
  color: inherit !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* CPU: valor principal branco; referência de cores dourada no detalhe */
.vps-top-card:nth-child(4) strong .vps-real-value {
  color: #ffffff !important;
}

.vps-top-card:nth-child(4) small .vps-reference-small {
  color: var(--jw-gold) !important;
}

/* ===== JW CENTRAL VPS COLORS FORCE FINAL END ===== */

/* ===== JW CENTRAL VPS CARDS COMPACT 20 START ===== */

/* Redução fina dos cards da linha VPS */
.monitor-vps-panel {
  margin-bottom: 16px !important;
}

.monitor-vps-panel .section-head {
  margin-bottom: 12px !important;
}

.vps-top-grid {
  gap: 9px !important;
}

/* Cards aproximadamente 20% menores */
.vps-top-card {
  min-height: 82px !important;
  padding: 11px 12px !important;
  border-radius: 15px !important;
}

/* Label superior menor */
.vps-top-card span:first-child {
  font-size: 9px !important;
  margin-bottom: 7px !important;
  letter-spacing: .075em !important;
}

/* Valor principal menor, mantendo presença */
.vps-top-card strong {
  font-size: clamp(17px, .98vw, 21px) !important;
  line-height: 1.02 !important;
  margin-bottom: 5px !important;
}

/* Detalhe inferior menor */
.vps-top-card small {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* Uptime tende a ser mais comprido; compacta sem quebrar o painel */
.vps-top-card:nth-child(5) strong {
  font-size: clamp(14px, .82vw, 18px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

/* Containers também pode ficar mais compacto */
.vps-top-card:nth-child(6) strong {
  font-size: clamp(16px, .92vw, 20px) !important;
}

/* Mantém leitura boa em telas menores */
@media(max-width: 1480px) {
  .vps-top-card {
    min-height: 86px !important;
  }
}

@media(max-width: 720px) {
  .vps-top-card {
    min-height: 92px !important;
    padding: 12px !important;
  }

  .vps-top-card strong {
    font-size: 21px !important;
  }
}

/* ===== JW CENTRAL VPS CARDS COMPACT 20 END ===== */

/* ===== JW CENTRAL VPS CARDS COMPACT 20 START ===== */

/* Redução fina dos cards da linha VPS */
.monitor-vps-panel {
  margin-bottom: 16px !important;
}

.monitor-vps-panel .section-head {
  margin-bottom: 12px !important;
}

.vps-top-grid {
  gap: 9px !important;
}

/* Cards aproximadamente 20% menores */
.vps-top-card {
  min-height: 82px !important;
  padding: 11px 12px !important;
  border-radius: 15px !important;
}

/* Label superior menor */
.vps-top-card span:first-child {
  font-size: 9px !important;
  margin-bottom: 7px !important;
  letter-spacing: .075em !important;
}

/* Valor principal menor, mantendo presença */
.vps-top-card strong {
  font-size: clamp(17px, .98vw, 21px) !important;
  line-height: 1.02 !important;
  margin-bottom: 5px !important;
}

/* Detalhe inferior menor */
.vps-top-card small {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* Uptime tende a ser mais comprido; compacta sem quebrar o painel */
.vps-top-card:nth-child(5) strong {
  font-size: clamp(14px, .82vw, 18px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

/* Containers também pode ficar mais compacto */
.vps-top-card:nth-child(6) strong {
  font-size: clamp(16px, .92vw, 20px) !important;
}

/* Mantém leitura boa em telas menores */
@media(max-width: 1480px) {
  .vps-top-card {
    min-height: 86px !important;
  }
}

@media(max-width: 720px) {
  .vps-top-card {
    min-height: 92px !important;
    padding: 12px !important;
  }

  .vps-top-card strong {
    font-size: 21px !important;
  }
}

/* ===== JW CENTRAL VPS CARDS COMPACT 20 END ===== */

/* ===== JW CENTRAL MOVE ATTENTION CARD TO NOTIFICATION START ===== */

/* Oculta somente o card que contém “Todos os serviços / Atenção” */
.jw-attention-card-hidden {
  display: none !important;
}

/* Notificação no topo */
.jw-attention-notification {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  z-index: 80;
}

.jw-attention-trigger {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  cursor: pointer;
  color: var(--jw-white, #fff);
  background: rgba(8, 13, 24, .62);
  border: 1px solid rgba(214, 173, 92, .20);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

.jw-attention-trigger strong {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f6c65b, #d6ad5c);
  font-size: 10px;
  font-weight: 950;
}

.jw-attention-panel {
  position: absolute;
  top: 52px;
  right: 0;
  width: 350px;
  padding: 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.13), transparent 34%),
    linear-gradient(180deg, rgba(13,18,30,.98), rgba(6,10,18,.96));
  border: 1px solid rgba(214,173,92,.20);
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: .18s ease;
}

.jw-attention-notification:hover .jw-attention-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.jw-attention-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.jw-attention-head strong {
  display: block;
  color: var(--jw-white, #fff);
  font-size: 13px;
}

.jw-attention-head span {
  display: block;
  margin-top: 4px;
  color: rgba(203,213,225,.58);
  font-size: 11px;
}

.jw-attention-head em {
  color: var(--jw-gold, #d6ad5c);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.jw-attention-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  margin-top: 12px;
  padding: 11px;
  border-radius: 15px;
  background: rgba(255,255,255,.038);
  border: 1px solid rgba(255,255,255,.07);
}

.jw-attention-item > span {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 18px rgba(245,158,11,.22);
}

.jw-attention-item strong {
  display: block;
  color: var(--jw-white, #fff);
  font-size: 12px;
  line-height: 1.25;
}

.jw-attention-item small {
  display: block;
  margin-top: 4px;
  color: rgba(203,213,225,.64);
  font-size: 11px;
  line-height: 1.35;
}

.jw-attention-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.065);
}

.jw-attention-footer small {
  color: rgba(203,213,225,.52);
  font-size: 10px;
}

.jw-attention-floating {
  position: fixed;
  top: 18px;
  right: 88px;
}

@media(max-width: 720px) {
  .jw-attention-panel {
    right: -120px;
    width: min(320px, calc(100vw - 28px));
  }
}

/* ===== JW CENTRAL MOVE ATTENTION CARD TO NOTIFICATION END ===== */

/* ===== JW CENTRAL MOVE ATTENTION CARD TO NOTIFICATION START ===== */

/* Oculta somente o card que contém “Todos os serviços / Atenção” */
.jw-attention-card-hidden {
  display: none !important;
}

/* Notificação no topo */
.jw-attention-notification {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  z-index: 80;
}

.jw-attention-trigger {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  cursor: pointer;
  color: var(--jw-white, #fff);
  background: rgba(8, 13, 24, .62);
  border: 1px solid rgba(214, 173, 92, .20);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

.jw-attention-trigger strong {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f6c65b, #d6ad5c);
  font-size: 10px;
  font-weight: 950;
}

.jw-attention-panel {
  position: absolute;
  top: 52px;
  right: 0;
  width: 350px;
  padding: 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.13), transparent 34%),
    linear-gradient(180deg, rgba(13,18,30,.98), rgba(6,10,18,.96));
  border: 1px solid rgba(214,173,92,.20);
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: .18s ease;
}

.jw-attention-notification:hover .jw-attention-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.jw-attention-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.jw-attention-head strong {
  display: block;
  color: var(--jw-white, #fff);
  font-size: 13px;
}

.jw-attention-head span {
  display: block;
  margin-top: 4px;
  color: rgba(203,213,225,.58);
  font-size: 11px;
}

.jw-attention-head em {
  color: var(--jw-gold, #d6ad5c);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.jw-attention-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  margin-top: 12px;
  padding: 11px;
  border-radius: 15px;
  background: rgba(255,255,255,.038);
  border: 1px solid rgba(255,255,255,.07);
}

.jw-attention-item > span {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 18px rgba(245,158,11,.22);
}

.jw-attention-item strong {
  display: block;
  color: var(--jw-white, #fff);
  font-size: 12px;
  line-height: 1.25;
}

.jw-attention-item small {
  display: block;
  margin-top: 4px;
  color: rgba(203,213,225,.64);
  font-size: 11px;
  line-height: 1.35;
}

.jw-attention-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.065);
}

.jw-attention-footer small {
  color: rgba(203,213,225,.52);
  font-size: 10px;
}

.jw-attention-floating {
  position: fixed;
  top: 18px;
  right: 88px;
}

@media(max-width: 720px) {
  .jw-attention-panel {
    right: -120px;
    width: min(320px, calc(100vw - 28px));
  }
}

/* ===== JW CENTRAL MOVE ATTENTION CARD TO NOTIFICATION END ===== */

/* ===== JW CENTRAL NOTIFICACOES START ===== */

.jw-hide-attention-now {
  display: none !important;
}

.jw-central-bell {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  margin-left: 10px;
  border-radius: 15px;
  text-decoration: none;
  color: var(--jw-white, #fff);
  background: rgba(8, 13, 24, .62);
  border: 1px solid rgba(214, 173, 92, .22);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  transition: .18s ease;
}

.jw-central-bell:hover {
  transform: translateY(-1px);
  border-color: rgba(214,173,92,.42);
  box-shadow: 0 20px 58px rgba(0,0,0,.30);
}

.jw-central-bell strong {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f6c65b, #d6ad5c);
  font-size: 10px;
  font-weight: 950;
}

.jw-central-bell.has-alert strong {
  background: linear-gradient(145deg, #f59e0b, #d6ad5c);
}

.jw-central-bell.is-floating {
  position: fixed;
  top: 18px;
  right: 94px;
  z-index: 90;
}

.notifications-shell {
  min-height: 100vh;
  padding: 34px;
  background:
    radial-gradient(circle at 85% 8%, rgba(214,173,92,.12), transparent 32%),
    radial-gradient(circle at 8% 90%, rgba(59,130,246,.08), transparent 28%),
    linear-gradient(135deg, #070b13, #0b1020 48%, #05070c);
  color: #f8fafc;
}

.notifications-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: end;
  max-width: 1320px;
  margin: 0 auto 22px;
}

.notifications-back {
  display: inline-flex;
  margin-bottom: 18px;
  color: #d6ad5c;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.notifications-kicker {
  display: block;
  color: rgba(214,173,92,.86);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.notifications-hero h1 {
  margin: 0;
  font-size: clamp(34px, 3.5vw, 58px);
  letter-spacing: -.075em;
  line-height: .95;
}

.notifications-hero p {
  max-width: 740px;
  margin: 14px 0 0;
  color: rgba(203,213,225,.72);
  font-size: 15px;
  line-height: 1.55;
}

.notifications-status-card,
.notifications-summary-card,
.notifications-panel {
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.12), transparent 34%),
    linear-gradient(180deg, rgba(20,24,34,.86), rgba(9,12,18,.78));
  border: 1px solid rgba(214,173,92,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.notifications-status-card {
  padding: 20px;
}

.notifications-status-card span,
.notifications-summary-card span {
  display: block;
  color: rgba(224,230,240,.60);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.notifications-status-card strong,
.notifications-summary-card strong {
  display: block;
  color: #d6ad5c;
  font-size: 36px;
  letter-spacing: -.06em;
  line-height: 1;
}

.notifications-status-card small,
.notifications-summary-card small {
  display: block;
  margin-top: 9px;
  color: rgba(203,213,225,.64);
  font-size: 11px;
}

.notifications-summary-grid {
  max-width: 1320px;
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.notifications-summary-card {
  padding: 16px;
}

.notifications-panel {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px;
}

.notifications-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  margin-bottom: 16px;
}

.notifications-panel-head h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}

.notifications-panel-head p {
  margin: 6px 0 0;
  color: rgba(203,213,225,.62);
  font-size: 13px;
}

.notifications-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notifications-filters span {
  padding: 8px 10px;
  border-radius: 999px;
  color: rgba(247,242,232,.76);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 11px;
  font-weight: 800;
}

.notifications-filters span:first-child {
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
}

.notifications-timeline {
  display: grid;
  gap: 11px;
}

.notification-event {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 13px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}

.notification-event-icon {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 18px rgba(96,165,250,.20);
}

.notification-event.success .notification-event-icon {
  background: #22c55e;
  box-shadow: 0 0 18px rgba(34,197,94,.20);
}

.notification-event.warning .notification-event-icon {
  background: #f59e0b;
  box-shadow: 0 0 18px rgba(245,158,11,.22);
}

.notification-event.danger .notification-event-icon {
  background: #ef4444;
  box-shadow: 0 0 18px rgba(239,68,68,.22);
}

.notification-event-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.notification-event-top strong {
  color: #f8fafc;
  font-size: 14px;
}

.notification-event-top span {
  color: rgba(203,213,225,.50);
  font-size: 11px;
  white-space: nowrap;
}

.notification-event p {
  margin: 6px 0 10px;
  color: rgba(203,213,225,.68);
  font-size: 13px;
  line-height: 1.45;
}

.notification-event-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notification-event-meta em {
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(247,242,232,.72);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.notification-empty-state {
  padding: 18px;
  border-radius: 18px;
  color: rgba(203,213,225,.70);
  background: rgba(255,255,255,.035);
  border: 1px dashed rgba(255,255,255,.10);
}

.notification-empty-state strong {
  display: block;
  color: #f8fafc;
  margin-bottom: 5px;
}

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

  .notifications-panel-head {
    display: grid;
  }
}

@media(max-width: 720px) {
  .notifications-shell {
    padding: 20px;
  }

  .notification-event-top {
    display: grid;
  }
}

/* ===== JW CENTRAL NOTIFICACOES END ===== */

/* ===== JW CENTRAL UNIFIED NOTIFICATIONS START ===== */

.jw-hide-attention-now {
  display: none !important;
}

.jw-central-bell {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  margin-left: 10px;
  border-radius: 15px;
  text-decoration: none;
  color: var(--jw-white, #fff);
  background: rgba(8, 13, 24, .62);
  border: 1px solid rgba(214, 173, 92, .22);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  transition: .18s ease;
}

.jw-central-bell:hover {
  transform: translateY(-1px);
  border-color: rgba(214,173,92,.42);
  box-shadow: 0 20px 58px rgba(0,0,0,.30);
}

.jw-central-bell strong {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #0b0d12;
  background: linear-gradient(145deg, #f6c65b, #d6ad5c);
  font-size: 10px;
  font-weight: 950;
}

.jw-central-bell.has-alert strong {
  background: linear-gradient(145deg, #f59e0b, #d6ad5c);
}

.jw-central-bell.is-floating {
  position: fixed;
  top: 18px;
  right: 94px;
  z-index: 90;
}

.notifications-shell {
  min-height: 100vh;
  padding: 34px;
  background:
    radial-gradient(circle at 85% 8%, rgba(214,173,92,.12), transparent 32%),
    radial-gradient(circle at 8% 90%, rgba(59,130,246,.08), transparent 28%),
    linear-gradient(135deg, #070b13, #0b1020 48%, #05070c);
  color: #f8fafc;
}

.notifications-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: end;
  max-width: 1320px;
  margin: 0 auto 22px;
}

.notifications-back {
  display: inline-flex;
  margin-bottom: 18px;
  color: #d6ad5c;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.notifications-kicker {
  display: block;
  color: rgba(214,173,92,.86);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.notifications-hero h1 {
  margin: 0;
  font-size: clamp(34px, 3.5vw, 58px);
  letter-spacing: -.075em;
  line-height: .95;
}

.notifications-hero p {
  max-width: 740px;
  margin: 14px 0 0;
  color: rgba(203,213,225,.72);
  font-size: 15px;
  line-height: 1.55;
}

.notifications-status-card,
.notifications-summary-card,
.notifications-panel {
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(214,173,92,.12), transparent 34%),
    linear-gradient(180deg, rgba(20,24,34,.86), rgba(9,12,18,.78));
  border: 1px solid rgba(214,173,92,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.notifications-status-card {
  padding: 20px;
}

.notifications-status-card span,
.notifications-summary-card span {
  display: block;
  color: rgba(224,230,240,.60);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.notifications-status-card strong,
.notifications-summary-card strong {
  display: block;
  color: #d6ad5c;
  font-size: 36px;
  letter-spacing: -.06em;
  line-height: 1;
}

.notifications-status-card small,
.notifications-summary-card small {
  display: block;
  margin-top: 9px;
  color: rgba(203,213,225,.64);
  font-size: 11px;
}

.notifications-summary-grid {
  max-width: 1320px;
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.notifications-summary-card {
  padding: 16px;
}

.notifications-panel {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px;
}

.notifications-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  margin-bottom: 16px;
}

.notifications-panel-head h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}

.notifications-panel-head p {
  margin: 6px 0 0;
  color: rgba(203,213,225,.62);
  font-size: 13px;
}

.notifications-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notifications-filters span {
  padding: 8px 10px;
  border-radius: 999px;
  color: rgba(247,242,232,.76);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 11px;
  font-weight: 800;
}

.notifications-filters span:first-child {
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
}

.notifications-timeline {
  display: grid;
  gap: 11px;
}

.notification-event {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 13px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}

.notification-event-icon {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 18px rgba(96,165,250,.20);
}

.notification-event.success .notification-event-icon {
  background: #22c55e;
  box-shadow: 0 0 18px rgba(34,197,94,.20);
}

.notification-event.warning .notification-event-icon {
  background: #f59e0b;
  box-shadow: 0 0 18px rgba(245,158,11,.22);
}

.notification-event.danger .notification-event-icon {
  background: #ef4444;
  box-shadow: 0 0 18px rgba(239,68,68,.22);
}

.notification-event-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.notification-event-top strong {
  color: #f8fafc;
  font-size: 14px;
}

.notification-event-top span {
  color: rgba(203,213,225,.50);
  font-size: 11px;
  white-space: nowrap;
}

.notification-event p {
  margin: 6px 0 10px;
  color: rgba(203,213,225,.68);
  font-size: 13px;
  line-height: 1.45;
}

.notification-event-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notification-event-meta em {
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(247,242,232,.72);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.notification-empty-state {
  padding: 18px;
  border-radius: 18px;
  color: rgba(203,213,225,.70);
  background: rgba(255,255,255,.035);
  border: 1px dashed rgba(255,255,255,.10);
}

.notification-empty-state strong {
  display: block;
  color: #f8fafc;
  margin-bottom: 5px;
}

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

  .notifications-panel-head {
    display: grid;
  }
}

@media(max-width: 720px) {
  .notifications-shell {
    padding: 20px;
  }

  .notification-event-top {
    display: grid;
  }
}

/* ===== JW CENTRAL UNIFIED NOTIFICATIONS END ===== */

/* ===== JW CENTRAL NOTIFICATION FILTERS FUNCTIONAL START ===== */

.notifications-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.notifications-filters button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  color: rgba(247,242,232,.76);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 850;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

.notifications-filters button:hover {
  transform: translateY(-1px);
  border-color: rgba(214,173,92,.28);
  background: rgba(214,173,92,.075);
}

.notifications-filters button.active {
  color: #0b0d12;
  background: linear-gradient(145deg, #f4d58a, #d6ad5c);
  border-color: rgba(214,173,92,.60);
}

.notifications-filters button small {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: rgba(247,242,232,.82);
  background: rgba(255,255,255,.08);
  font-size: 10px;
  font-weight: 950;
}

.notifications-filters button.active small {
  color: #0b0d12;
  background: rgba(11,13,18,.12);
}

.notifications-live-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -4px 0 15px;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}

.notifications-live-status span {
  color: rgba(203,213,225,.66);
  font-size: 12px;
}

.notifications-live-status strong {
  color: #d6ad5c;
  font-size: 12px;
}

.notification-event {
  animation: notificationFadeIn .18s ease both;
}

@keyframes notificationFadeIn {
  from {
    opacity: .72;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media(max-width: 720px) {
  .notifications-live-status {
    display: grid;
  }

  .notifications-filters {
    justify-content: flex-start;
  }
}

/* ===== JW CENTRAL NOTIFICATION FILTERS FUNCTIONAL END ===== */