:root {
  --bg: #070a08;
  --panel: #101512;
  --panel2: #151c17;
  --line: #29332d;
  --text: #f2f7f3;
  --muted: #93a199;
  --green: #69f20b;
  --green2: #00b85a;
  --blue: #35b9a5;
  --orange: #f4a340;
  --purple: #9a80e8;
}

body {
  background:
    radial-gradient(circle at 88% -5%, rgba(105, 242, 11, .15), transparent 25%),
    radial-gradient(circle at 60% 105%, rgba(0, 184, 90, .08), transparent 28%),
    var(--bg);
}

.sidebar {
  background: linear-gradient(180deg, #090d0a 0%, #070a08 70%);
  box-shadow: 18px 0 60px rgba(0, 0, 0, .2);
}

.brand {
  min-height: 130px;
  justify-content: center;
  padding: 0 12px 22px;
  overflow: hidden;
}

.brand-logo {
  display: block;
  width: 112px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(105, 242, 11, .22));
}

.login-brand {
  padding-bottom: 12px;
}

.login-logo {
  display: block;
  width: 155px;
  height: 205px;
  object-fit: contain;
  margin: -25px auto -14px;
  filter: drop-shadow(0 0 24px rgba(105, 242, 11, .25));
}

.sidebar nav a:hover,
.sidebar nav a.active {
  background: linear-gradient(90deg, rgba(105, 242, 11, .16), rgba(0, 184, 90, .05));
  box-shadow: inset 3px 0 #69f20b;
}

.btn-primary {
  background: linear-gradient(135deg, #76ff12 0%, #20d65f 48%, #00a950 100%);
  color: #081008;
  box-shadow: 0 10px 26px rgba(0, 184, 90, .18);
}

.metric.accent {
  border-color: rgba(105, 242, 11, .35);
  background: linear-gradient(145deg, rgba(24, 58, 31, .92), var(--panel));
}

.metric::after {
  background: rgba(105, 242, 11, .055);
}

.metric-icon.green,
.quality.verde {
  background: rgba(105, 242, 11, .12);
}

.entity-icon,
.file-icon,
.avatar {
  background: linear-gradient(145deg, rgba(105, 242, 11, .13), rgba(0, 184, 90, .1));
}

.login-card {
  border-color: rgba(105, 242, 11, .18);
  background: linear-gradient(150deg, rgba(18, 25, 20, .98), rgba(8, 12, 9, .98));
}

.auth-shell {
  background:
    radial-gradient(circle at 50% -10%, rgba(105, 242, 11, .24), transparent 36%),
    radial-gradient(circle at 80% 100%, rgba(0, 184, 90, .13), transparent 30%),
    #070a08;
}

@media (max-width: 800px) {
  .brand { min-height: 115px; }
  .brand-logo { width: 98px; height: 112px; }
}

.report-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.energy-flow-panel {
  overflow: hidden;
}

.energy-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(125px, 1fr) auto) minmax(155px, 1.15fr);
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.energy-flow > div {
  min-height: 108px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(105, 242, 11, .07), rgba(0, 184, 90, .03));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.energy-flow > div span {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 8px;
}

.energy-flow > div small {
  color: var(--muted);
  margin-bottom: 7px;
}

.energy-flow > div strong { white-space: nowrap; }
.energy-flow > div.result { border-color: rgba(105, 242, 11, .4); }
.energy-flow > i { color: var(--green); font-style: normal; font-size: 18px; }

@media (max-width: 1150px) {
  .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.brand-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(105, 242, 11, .16), transparent 29%),
    linear-gradient(145deg, #050806, #0a100c 58%, #07120a);
  opacity: 1;
  visibility: visible;
  transition: opacity .65s ease, visibility .65s ease;
}

.brand-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.brand-splash img {
  position: relative;
  z-index: 2;
  width: 176px;
  height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 0 32px rgba(105, 242, 11, .32));
  animation: splash-logo 1.4s cubic-bezier(.2,.8,.2,1) both;
}

.brand-splash p {
  margin: -16px 0 22px;
  color: #b8c7bd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
  animation: splash-copy .8s .55s ease both;
}

.splash-orbit {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(105, 242, 11, .12);
  border-top-color: rgba(105, 242, 11, .75);
  border-radius: 50%;
  animation: splash-spin 2s linear infinite;
}

.splash-loader {
  width: 190px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
}

.splash-loader span {
  display: block;
  width: 48%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #69f20b, #00b85a);
  animation: splash-progress 1.55s ease-in-out both;
}

@keyframes splash-logo {
  0% { opacity: 0; transform: scale(.7) translateY(20px); filter: blur(8px); }
  55% { opacity: 1; transform: scale(1.06) translateY(0); filter: blur(0) drop-shadow(0 0 42px rgba(105, 242, 11, .46)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 32px rgba(105, 242, 11, .32)); }
}

@keyframes splash-copy { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-progress { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

@media (prefers-reduced-motion: reduce) {
  .brand-splash *, .brand-splash { animation-duration: .01ms !important; }
}