:root { color-scheme: dark; }

    body {
      background:
        radial-gradient(circle at 18% 8%, rgba(124, 58, 237, 0.30), transparent 32rem),
        radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.18), transparent 28rem),
        linear-gradient(180deg, #070A12 0%, #0B1020 52%, #070A12 100%);
    }

    .glass {
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(20px);
    }

    .bento {
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(20px);
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }

    .bento:hover {
      border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.07);
    }

    .field {
      width: 100%;
      border-radius: 0.75rem;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.06);
      color: #F8FAFC;
      outline: none;
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .field::placeholder { color: #64748B; }

    .field:focus {
      border-color: rgba(103, 232, 249, 0.55);
      background: rgba(255, 255, 255, 0.09);
      box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.10);
    }

    input[type="date"].field {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      height: calc(1.25rem + 1.5rem + 2px);
      min-height: calc(1.25rem + 1.5rem + 2px);
      line-height: 1.25rem;
      box-sizing: border-box;
      -webkit-appearance: none;
      appearance: none;
    }

    input[type="date"]::-webkit-date-and-time-value {
      min-width: 0;
      line-height: 1.25rem;
      text-align: left;
    }

    input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }

    @media (max-width: 480px) {
      input[type="date"].field {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
        font-size: 16px;
      }
    }

    option { color: #0F172A; }

:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.85);
  outline-offset: 3px;
}

.query-url {
  overflow-wrap: anywhere;
}

.explanation-item {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
}

.history-actions button {
  min-width: 3.75rem;
}


.main-container {
  padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .main-container {
    padding-bottom: 5rem;
  }
}

.mobile-jump-nav {
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

html {
  scroll-behavior: smooth;
}