#search{
    width:100%;
    max-width:600px;
    display:block;
    margin:auto;
    margin-bottom:14px;

    padding:14px 22px;

    font-size:17px;
    color:var(--text);

    background:var(--card);
    border:1px solid var(--border);
    border-radius:999px;
    outline:none;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 0 rgba(139,92,246,0),
        0 10px 25px rgba(0,0,0,.45);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

#search::placeholder{
    color:var(--muted);
    letter-spacing:.4px;
}

#search:focus{
    border-color:rgba(139,92,246,.45);

    box-shadow:
        0 0 18px rgba(139,92,246,.18),
        0 0 45px rgba(139,92,246,.08),
        0 10px 25px rgba(0,0,0,.55);

    transform:scale(1.01);
}

#loader{
    display:block;

    width:70px;
    height:70px;

    margin:auto;
    margin-top:1rem;

    border-radius:50%;

    border:6px solid rgba(255,255,255,.08);
    border-top:6px solid var(--accent);

    box-shadow:
        0 0 20px rgba(139,92,246,.35);

    animation:spin .6s linear infinite;
}

@keyframes spin{
    100%{
        transform:rotate(360deg);
    }
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none;
}

.overlay-bar {
  height: 45px;
  background: #111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  color: white;
  font-family: system-ui;
}

.overlay-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

#overlayIcon {
  width: 35px;
  height: 35px;
  border-radius: 4px;
}

.overlay-buttons {
  display: flex;
  gap: 6px;
}

.overlay-buttons button {
  background: #8b5cf6;
  border: none;
  color: white;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  margin: 0;
  transition: 0.2s ease-in-out;
}

.overlay-buttons button:hover {
  filter: brightness(1.1);
}

#overlayFrame {
  flex: 1;
  width: 100%;
  border: none;
}