/* Reset (tiny) */
*,*::before,*::after{box-sizing:border-box}
:where(html){-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(body){margin:0;line-height:1.5}
:where(img,svg){display:block;max-width:100%}
:where(p,h1,h2){margin:0}

/* Background gradient */
body{
  min-height:100dvh;
  display:grid;place-items:center;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#0b0b0f;
  background: radial-gradient(1200px 800px at 20% 10%, #a7c5fd 0%, transparent 60%),
              radial-gradient(1000px 600px at 80% 90%, #fdb7d6 0%, transparent 60%),
              linear-gradient(180deg, #eef2f7 0%, #f6f8fb 100%);
}
@media (prefers-color-scheme: dark){
  body{ color:#e5e7eb; background:
    radial-gradient(1200px 800px at 20% 10%, rgba(99,102,241,.25) 0%, transparent 60%),
    radial-gradient(1000px 600px at 80% 90%, rgba(236,72,153,.25) 0%, transparent 60%),
    linear-gradient(180deg, #0b0b10 0%, #0e1117 100%);
  }
}

/* Glass card centered */
.glass{
  width:min(92vw,720px);
  padding: clamp(1.2rem, 3vw, 2rem);
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
@media (prefers-color-scheme: light){
  .glass{
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 40px rgba(16,24,40,.06);
  }
}

.title {
    font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: center;
    opacity:.75;
}

.sub{ text-align:center; opacity:.6; margin-top:.4rem }

/* Search row */
.row{
  display:flex; align-items:center; gap:.6rem;
  margin-top:clamp(1rem, 2vh, 1.5rem);
}
.row input[type="text"]{
  flex:1; padding:.9rem 1rem;
  font-size:1rem; border:none; outline:none;
  background: rgba(255,255,255,0.5);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
@media (prefers-color-scheme: dark){
  .row input[type="text"]{ background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
}
.row input::placeholder{ opacity:.6 }

.btn{
  padding:.9rem 1rem; border:none; border-radius:14px; cursor:pointer;
  background: rgba(255,255,255,0.5); color:inherit;
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (prefers-color-scheme: dark){
  .btn{ background: rgba(255,255,255,0.08); }
}
.btn:where(:hover,:focus-visible){ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.btn:focus-visible{ outline: 2px solid rgba(99,102,241,.7); outline-offset:2px }

.result{
  margin-top:1rem; min-height:2.2rem;
  padding: .8rem 1rem; border-radius:14px;
  opacity: .6;
  display:flex; align-items:center; justify-content:center; text-align:center;
  word-break: break-word;
}

.hint{ text-align:center; opacity:.6; font-size:.9rem; margin-top:.75rem }