/* QXONI Search — glassy motion and home-page polish. */
:root{
  --qx-ease-out:cubic-bezier(.22,1,.36,1);
  --qx-ease-in-out:cubic-bezier(.45,0,.15,1);
}
body{
  background:
    radial-gradient(56rem 34rem at 50% 38%,rgba(111,87,209,.10),transparent 68%),
    radial-gradient(46rem 28rem at 8% 88%,rgba(44,142,244,.075),transparent 70%),
    #fbfbfe;
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.28),transparent 34%,rgba(255,255,255,.18));
}
#topbar{
  background:rgba(35,35,40,.92)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 10px 30px rgba(18,17,29,.14);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
#hero{position:relative;isolation:isolate}
#hero::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:min(60vw,760px);
  aspect-ratio:1;
  top:50%;
  left:50%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(125,95,224,.13),rgba(125,95,224,.035) 42%,transparent 70%);
  transform:translate(-50%,-54%);
  filter:blur(3px);
}
#hero .hero-mark{animation:qx-hero-arrive .5s var(--qx-ease-out) both}
#hero .home-mode{animation:qx-hero-arrive .52s 60ms var(--qx-ease-out) both}
#hero .hero-srch{animation:qx-hero-arrive .56s 120ms var(--qx-ease-out) both}
@keyframes qx-hero-arrive{from{opacity:0;transform:translateY(13px) scale(.985)}to{opacity:1;transform:none}}
#hero .home-mode{
  padding:4px!important;
  border:1px solid rgba(95,76,147,.16)!important;
  background:rgba(255,255,255,.68)!important;
  box-shadow:0 12px 28px rgba(49,38,82,.10),inset 0 1px 0 rgba(255,255,255,.76)!important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
#hero .home-mode-btn{
  transition:transform .22s var(--qx-ease-out),background-color .22s var(--qx-ease-out),box-shadow .22s var(--qx-ease-out),color .2s var(--qx-ease-out)!important;
}
#hero .home-mode-btn:hover{transform:translateY(-1px)}
#hero .home-mode-btn.on,#hero .home-mode-btn.active{
  box-shadow:0 6px 14px rgba(50,38,81,.14),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
#hero .hero-srch{
  overflow:visible!important;
  background:rgba(255,255,255,.74)!important;
  border-color:rgba(91,72,140,.15)!important;
  box-shadow:0 18px 42px rgba(39,29,70,.13),inset 0 1px 0 rgba(255,255,255,.84)!important;
  backdrop-filter:blur(24px) saturate(155%);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
  transition:transform .32s var(--qx-ease-out),border-color .32s var(--qx-ease-out),box-shadow .32s var(--qx-ease-out),background-color .32s var(--qx-ease-out)!important;
}
#hero .hero-srch:hover{transform:translateX(-50%) translateY(-1px)!important}
#hero .hero-srch:focus-within{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(122,84,206,.42)!important;
  box-shadow:0 0 0 5px rgba(130,90,215,.11),0 22px 48px rgba(42,30,79,.17)!important;
  transform:translateX(-50%) translateY(-2px)!important;
}
#hero .hero-go{
  background:linear-gradient(135deg,#7255c2,#a05e9b)!important;
  box-shadow:0 9px 19px rgba(110,73,170,.30),inset 0 1px 0 rgba(255,255,255,.27)!important;
  transition:transform .22s var(--qx-ease-out),box-shadow .22s var(--qx-ease-out),filter .22s var(--qx-ease-out)!important;
}
#hero .hero-go:hover{transform:scale(1.06)!important;filter:brightness(1.06);box-shadow:0 13px 25px rgba(110,73,170,.38),inset 0 1px 0 rgba(255,255,255,.32)!important}
.nav-srch,.result-card,.related-box,.qx-celeb,.qx-company,.tab-btn,.icon-btn,.acc-btn{
  transition:transform .22s var(--qx-ease-out),box-shadow .26s var(--qx-ease-out),border-color .22s var(--qx-ease-out),background-color .22s var(--qx-ease-out),color .2s var(--qx-ease-out)!important;
}
.icon-btn:hover,.acc-btn:hover{transform:translateY(-1px) scale(1.035)}
.result-card:hover,.related-box:hover,.qx-company:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(37,28,65,.10)!important}
.tab-btn:active,.icon-btn:active,.acc-btn:active,#hero .hero-go:active{transform:scale(.96)!important}
[data-theme="dark"] body{
  background:
    radial-gradient(56rem 34rem at 50% 38%,rgba(125,94,226,.13),transparent 68%),
    radial-gradient(46rem 28rem at 8% 88%,rgba(47,129,232,.08),transparent 70%),
    #121218;
}
[data-theme="dark"] #topbar{background:rgba(20,20,25,.88)!important}
[data-theme="dark"] #hero .home-mode,[data-theme="dark"] #hero .hero-srch{background:rgba(37,36,46,.72)!important;border-color:rgba(255,255,255,.12)!important}
[data-theme="dark"] #hero .hero-srch:focus-within{background:rgba(43,42,53,.90)!important}

/*
  The home page has its own deliberately bright canvas in search.css.  A saved
  dark-mode preference used to darken only the controls, leaving a white page
  with an unreadable grey search field.  Keep this one surface coherent.
*/
html[data-theme="dark"] body.search-home #hero .home-mode{
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(95,76,147,.16)!important;
  box-shadow:0 12px 28px rgba(49,38,82,.10),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
html[data-theme="dark"] body.search-home #hero .home-mode-btn,
html[data-theme="dark"] body.search-home #hero .home-mode-btn:hover{
  background:transparent!important;
  color:#51515b!important;
  -webkit-text-fill-color:#51515b!important;
  opacity:1!important;
}
html[data-theme="dark"] body.search-home #hero .home-mode-btn.on,
html[data-theme="dark"] body.search-home #hero .home-mode-btn.on:hover{
  background:linear-gradient(135deg,#7255c2,#975b9c)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 6px 14px rgba(82,53,139,.24)!important;
}
html[data-theme="dark"] body.search-home #hero .hero-srch,
html[data-theme="dark"] body.search-home #hero .hero-srch:focus-within{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(91,72,140,.18)!important;
  box-shadow:0 18px 42px rgba(39,29,70,.13),inset 0 1px 0 rgba(255,255,255,.84)!important;
}
html[data-theme="dark"] body.search-home #hero .hero-srch input,
html[data-theme="dark"] body.search-home #hero .hero-srch input::placeholder,
html[data-theme="dark"] body.search-home #hero .hero-srch .mic-btn{
  color:#16141d!important;
  -webkit-text-fill-color:#16141d!important;
}
html[data-theme="dark"] body.search-home #hero .hero-srch input::placeholder{
  color:#74717e!important;
  -webkit-text-fill-color:#74717e!important;
}
html[data-theme="dark"] body.search-home #hero .hero-go,
html[data-theme="dark"] body.search-home #hero .hero-go:hover{
  background:linear-gradient(135deg,#7255c2,#a05e9b)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:transparent!important;
}
body.search-home #topbar{display:block!important;position:sticky!important;top:0!important;z-index:200!important}
body.search-home #topbar .nav-main{display:flex!important;min-height:var(--nav-h)!important}
@media(max-width:640px){
  #hero .hero-srch:hover,#hero .hero-srch:focus-within{transform:none!important}
  #hero::before{width:105vw}
}
@media(prefers-reduced-motion:reduce){
  #hero .hero-mark,#hero .home-mode,#hero .hero-srch{animation:none!important}
  #hero .home-mode-btn,#hero .hero-srch,.nav-srch,.result-card,.related-box,.qx-celeb,.qx-company,.tab-btn,.icon-btn,.acc-btn,#hero .hero-go{transition:none!important}
  #hero .home-mode-btn:hover,.result-card:hover,.related-box:hover,.qx-company:hover,.icon-btn:hover,.acc-btn:hover{transform:none!important}
}

/* Familiar, distraction-free search layout — QXONI branded, not a Google clone. */
body.search-home,
html[data-theme="dark"] body.search-home,
body.search-home #main-content,
body.search-home #hero{
  background:#fff!important;
  color:#202124!important;
}
body.search-home::after,
body.search-home #hero::before,
body.search-home #hero::after{display:none!important}
body.search-home #topbar,
html[data-theme="dark"] body.search-home #topbar{
  background:#fff!important;
  border-bottom:1px solid #ebebeb!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
body.search-home #topbar .nav-main{
  height:64px!important;
  min-height:64px!important;
  padding:0 18px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body.search-home #topbar .icon-btn,
body.search-home #topbar .acc-btn{
  background:transparent!important;
  border-color:transparent!important;
  color:#5f6368!important;
  box-shadow:none!important;
}
body.search-home #topbar .icon-btn:hover,
body.search-home #topbar .acc-btn:hover{background:#f1f3f4!important;transform:none!important}
body.search-home #hero{
  min-height:calc(100dvh - 64px)!important;
  padding:clamp(44px,11vh,128px) 20px calc(var(--bnav-h) + 36px)!important;
  justify-content:center!important;
}
body.search-home .hero-mark{
  margin:0 0 26px!important;
  gap:0!important;
  animation:none!important;
}
body.search-home .hero-doodle{display:none!important}
body.search-home .hero-favicon{
  width:68px!important;
  height:68px!important;
  border-radius:18px!important;
  box-shadow:0 1px 4px rgba(60,64,67,.22)!important;
}
body.search-home .hero-mark::after{
  content:'QXONI Search';
  display:block;
  margin-top:12px;
  color:#202124;
  font:650 27px/1.1 Arial,sans-serif;
  letter-spacing:-.9px;
}
body.search-home .hero-wrap{
  width:min(680px,100%)!important;
  max-width:680px!important;
  animation:none!important;
}
body.search-home #hero .home-mode{
  display:flex!important;
  width:max-content!important;
  min-height:40px!important;
  margin:0 auto 18px!important;
  padding:3px!important;
  gap:2px!important;
  border:1px solid #dadce0!important;
  border-radius:999px!important;
  background:#f8f9fa!important;
  box-shadow:none!important;
}
body.search-home #hero .home-mode-btn,
body.search-home #hero .home-mode-btn:hover{
  min-height:32px!important;
  height:32px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#5f6368!important;
  -webkit-text-fill-color:#5f6368!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:600!important;
  transform:none!important;
}
body.search-home #hero .home-mode-btn svg{width:15px!important;height:15px!important}
body.search-home #hero .home-mode-btn.on,
body.search-home #hero .home-mode-btn.on:hover{
  background:#e8f0fe!important;
  color:#1967d2!important;
  -webkit-text-fill-color:#1967d2!important;
  box-shadow:none!important;
}
body.search-home #hero .hero-srch,
body.search-home #hero .hero-srch:hover,
body.search-home #hero .hero-srch:focus-within{
  position:relative!important;
  left:auto!important;
  width:100%!important;
  max-width:680px!important;
  min-height:58px!important;
  height:58px!important;
  margin:0!important;
  padding:0 9px 0 19px!important;
  gap:3px!important;
  transform:none!important;
  border:1px solid #dfe1e5!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 1px 3px rgba(60,64,67,.18)!important;
  backdrop-filter:none!important;
}
body.search-home #hero .hero-srch:hover,
body.search-home #hero .hero-srch:focus-within{
  border-color:transparent!important;
  box-shadow:0 1px 6px rgba(32,33,36,.28)!important;
}
body.search-home #hero .hero-srch input,
html[data-theme="dark"] body.search-home #hero .hero-srch input{
  min-height:54px!important;
  padding:0 8px!important;
  color:#202124!important;
  -webkit-text-fill-color:#202124!important;
  font-size:16px!important;
  font-weight:400!important;
}
body.search-home #hero .hero-srch input::placeholder{color:#70757a!important;-webkit-text-fill-color:#70757a!important}
body.search-home #hero .hero-srch .mic-btn{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  color:#5f6368!important;
  -webkit-text-fill-color:#5f6368!important;
  background:transparent!important;
}
body.search-home #hero .hero-srch .mic-btn:hover{background:#f1f3f4!important;color:#202124!important}
body.search-home #hero .hero-srch .hero-go,
body.search-home #hero .hero-srch .hero-go:hover{
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  flex-basis:40px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#1a73e8!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
  transform:none!important;
}
body.search-home #hero .hero-srch .hero-go:hover{background:#1967d2!important}
@media(max-width:640px){
  body.search-home #hero{padding:54px 14px calc(var(--bnav-h) + 30px)!important}
  body.search-home .hero-favicon{width:58px!important;height:58px!important;border-radius:16px!important}
  body.search-home .hero-mark::after{font-size:24px!important}
  body.search-home #hero .home-mode{margin-bottom:15px!important}
  body.search-home #hero .hero-srch{min-height:54px!important;height:54px!important;padding-left:15px!important}
  body.search-home #hero .hero-srch input{min-height:50px!important;font-size:15px!important}
  body.search-home #hero .hero-srch .mic-btn{width:34px!important;min-width:34px!important;height:34px!important}
  body.search-home #hero .hero-srch .hero-go{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;flex-basis:36px!important}
}

/* The compact home layout intentionally stays light even when the app uses dark mode elsewhere. */
html[data-theme="dark"] body.search-home #hero .home-mode{
  background:#f8f9fa!important;
  border-color:#dadce0!important;
  box-shadow:none!important;
}
html[data-theme="dark"] body.search-home #hero .home-mode-btn,
html[data-theme="dark"] body.search-home #hero .home-mode-btn:hover{
  background:transparent!important;
  color:#5f6368!important;
  -webkit-text-fill-color:#5f6368!important;
}
html[data-theme="dark"] body.search-home #hero .home-mode-btn.on,
html[data-theme="dark"] body.search-home #hero .home-mode-btn.on:hover{
  background:#e8f0fe!important;
  color:#1967d2!important;
  -webkit-text-fill-color:#1967d2!important;
  box-shadow:none!important;
}
html[data-theme="dark"] body.search-home #hero .hero-srch,
html[data-theme="dark"] body.search-home #hero .hero-srch:hover,
html[data-theme="dark"] body.search-home #hero .hero-srch:focus-within{
  background:#fff!important;
  border-color:#dfe1e5!important;
  box-shadow:0 1px 3px rgba(60,64,67,.18)!important;
}
html[data-theme="dark"] body.search-home #hero .hero-srch:hover,
html[data-theme="dark"] body.search-home #hero .hero-srch:focus-within{box-shadow:0 1px 6px rgba(32,33,36,.28)!important}
html[data-theme="dark"] body.search-home #hero .hero-srch .hero-go,
html[data-theme="dark"] body.search-home #hero .hero-srch .hero-go:hover{
  background:#1a73e8!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html[data-theme="dark"] body.search-home #hero .hero-srch .hero-go:hover{background:#1967d2!important}

/* Larger desktop composition with a more confident, product-quality presence. */
@media(min-width:641px){
  body.search-home #hero{
    min-height:calc(100dvh - 66px)!important;
    padding:clamp(54px,10vh,132px) 32px calc(var(--bnav-h) + 44px)!important;
    background:
      radial-gradient(42rem 23rem at 50% 48%,rgba(26,115,232,.055),transparent 70%),
      #fff!important;
  }
  body.search-home #topbar .nav-main{height:66px!important;min-height:66px!important;padding:0 24px!important}
  body.search-home #topbar .nav-logo{width:40px!important;height:40px!important;border-radius:12px!important}
  body.search-home #topbar .icon-btn,
  body.search-home #topbar .acc-btn{width:42px!important;height:42px!important}
  body.search-home .hero-mark{margin-bottom:32px!important}
  body.search-home .hero-favicon{width:94px!important;height:94px!important;border-radius:25px!important;box-shadow:0 8px 22px rgba(60,64,67,.16)!important}
  body.search-home .hero-mark::after{margin-top:16px!important;font-size:39px!important;letter-spacing:-1.5px!important}
  body.search-home .hero-wrap{width:min(920px,calc(100vw - 96px))!important;max-width:920px!important}
  body.search-home #hero .home-mode{min-height:50px!important;margin-bottom:24px!important;padding:4px!important}
  body.search-home #hero .home-mode-btn,
  body.search-home #hero .home-mode-btn:hover{min-height:40px!important;height:40px!important;padding:0 19px!important;font-size:14px!important}
  body.search-home #hero .home-mode-btn svg{width:17px!important;height:17px!important}
  body.search-home #hero .hero-srch,
  body.search-home #hero .hero-srch:hover,
  body.search-home #hero .hero-srch:focus-within{
    min-height:76px!important;
    height:76px!important;
    padding:0 12px 0 28px!important;
    border-radius:38px!important;
    box-shadow:0 5px 18px rgba(60,64,67,.16)!important;
  }
  body.search-home #hero .hero-srch:hover,
  body.search-home #hero .hero-srch:focus-within{box-shadow:0 9px 28px rgba(60,64,67,.22)!important}
  body.search-home #hero .hero-srch input{min-height:70px!important;font-size:19px!important;padding:0 12px!important}
  body.search-home #hero .hero-srch .mic-btn{width:48px!important;min-width:48px!important;height:48px!important}
  body.search-home #hero .hero-srch .hero-go,
  body.search-home #hero .hero-srch .hero-go:hover{width:54px!important;min-width:54px!important;height:54px!important;min-height:54px!important;flex-basis:54px!important;box-shadow:0 3px 8px rgba(26,115,232,.30)!important}
}