/* ElectriSense Liquid Glass UI — one real footer, no pseudo-footer. */
:root {
  --es-primary: #38e8cf;
  --es-blue: #60a5fa;
  --es-green: #86efac;
  --es-gold: #fbbf24;
  --es-ink: #e8fff9;
  --es-muted: #a8bfd0;
  --es-bg: #04131c;
  --es-glass: rgba(10, 31, 43, .66);
  --es-glass-strong: rgba(7, 24, 36, .86);
  --es-border: rgba(164, 241, 229, .28);
  --es-radius: 24px;
  --es-shadow: 0 24px 80px rgba(0, 0, 0, .34);
  --es-font: 'Vazirmatn', system-ui, sans-serif;
}

html { min-height: 100%; background: #04131c !important; }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--es-ink) !important;
  font-family: var(--es-font) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(56, 232, 207, .28), transparent 25rem),
    radial-gradient(circle at 88% 8%, rgba(96, 165, 250, .26), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(134, 239, 172, .16), transparent 32rem),
    linear-gradient(145deg, #031018 0%, #08202b 48%, #071622 100%) !important;
}

/* Local abstract transmission grid and renewable-energy glow. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .72;
  background:
    linear-gradient(118deg, transparent 0 24%, rgba(56, 232, 207, .3) 24.1% 24.22%, transparent 24.34% 55%, rgba(96, 165, 250, .25) 55.1% 55.22%, transparent 55.34%),
    linear-gradient(28deg, transparent 0 37%, rgba(134, 239, 172, .24) 37.1% 37.22%, transparent 37.34% 72%, rgba(56, 232, 207, .2) 72.1% 72.22%, transparent 72.34%),
    radial-gradient(circle at 18% 76%, rgba(56, 232, 207, .7) 0 3px, transparent 4px),
    radial-gradient(circle at 42% 31%, rgba(96, 165, 250, .7) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 64%, rgba(251, 191, 36, .62) 0 3px, transparent 4px),
    repeating-linear-gradient(90deg, transparent 0 104px, rgba(157, 236, 226, .06) 105px 106px),
    repeating-linear-gradient(0deg, transparent 0 104px, rgba(157, 236, 226, .05) 105px 106px);
  background-size: auto, auto, 180px 180px, 240px 240px, 260px 260px, auto, auto;
  animation: es-grid-drift 22s linear infinite;
}

@keyframes es-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(24px, 16px, 0); }
}

.container { position: relative; z-index: 1; }

.header,
.samples-bar,
.upload-zone,
.input-grid > div,
.processing-banner,
.headline-card,
.kpi-card,
.tabs-nav,
.card-box {
  border: 1px solid var(--es-border) !important;
  border-radius: var(--es-radius) !important;
  background: linear-gradient(135deg, rgba(22, 58, 70, .76), var(--es-glass)) !important;
  box-shadow: var(--es-shadow), inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.header,
.headline-card,
.kpi-card,
.card-box,
.upload-zone {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.header:hover,
.headline-card:hover,
.kpi-card:hover,
.card-box:hover,
.upload-zone:hover {
  transform: translateY(-5px) rotateX(.5deg);
  border-color: rgba(56, 232, 207, .62) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42), 0 0 28px rgba(56, 232, 207, .14) !important;
}

.upload-zone:hover,
.upload-zone.dragover {
  background: linear-gradient(135deg, rgba(13, 148, 136, .42), rgba(30, 64, 75, .8)) !important;
}

.header h1 { text-shadow: 0 0 30px rgba(56, 232, 207, .35); }
.kpi-card .val { text-shadow: 0 0 22px currentColor; }

button,
.btn,
input[type='submit'] {
  border-radius: 14px !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

button:hover,
.btn:hover,
input[type='submit']:hover {
  transform: translateY(-3px) scale(1.015);
  filter: brightness(1.12);
  box-shadow: 0 12px 30px rgba(56, 232, 207, .28) !important;
}

.btn.primary {
  background: linear-gradient(135deg, #0f9f93, #38e8cf) !important;
  border-color: rgba(172, 255, 244, .55) !important;
  color: #03211f !important;
}

.card,
.panel,
.result-card,
.upload-card,
.feature-card,
.finding-item,
.rec-item {
  background: var(--es-glass) !important;
  border-color: var(--es-border) !important;
  box-shadow: 0 14px 45px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

input,
select,
textarea {
  border-color: rgba(164, 241, 229, .3) !important;
  background: rgba(3, 18, 28, .72) !important;
  color: var(--es-ink) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(56, 232, 207, .2);
  border-color: var(--es-primary) !important;
  box-shadow: 0 0 22px rgba(56, 232, 207, .15);
}

table.data-table th { background: rgba(13, 148, 136, .3) !important; }
table.data-table tr:hover { background: rgba(56, 232, 207, .1) !important; }

/* Keep only the semantic footer in public/index.html. */
.site-footer {
  display: flex;
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 36px auto 0;
  padding: 24px;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  flex-wrap: wrap;
  text-align: center;
  direction: rtl;
  border: 1px solid var(--es-border);
  border-radius: 24px 24px 0 0;
  background: var(--es-glass-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.site-footer a { color: var(--es-primary); font-weight: 700; }

@media (max-width: 720px) {
  .container, main { padding-inline: 16px; }
  .grid, .features, .results { grid-template-columns: 1fr !important; }
  h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .site-footer { margin-inline: 16px; padding: 18px 14px; }
}

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