[dir="rtl"] .btns { direction: rtl; }
[dir="rtl"] .hint { text-align: right; }
:focus { outline: 2px solid #7aa2ff; outline-offset: 2px; }
.no-focus-outline :focus { outline: none; outline-offset: 0; }

/* Ensure any element with the HTML hidden attribute never displays,
   regardless of component styles. Prevents accidental overlays at load. */
[hidden] { display: none !important; }

/* Subtle galaxy background and warp pulse */
html, body { min-height: 100svh; height: auto; overflow: auto; }
body {
  background: none !important;
  background-color: var(--bg-color, #161617) !important;
  color: #e6e7e9;
}
@keyframes warpPulse { 0% { filter:none; } 50% { filter:saturate(1.25) brightness(1.08); } 100% { filter:none; } }
body.warp { animation: warpPulse .6s ease-out; }

/* Header left pseudo-links (About / How search works) */
.header { display:flex; justify-content: space-between; align-items:center; padding:.6rem 1rem; }
.header::before { content: "About  A�  How search works"; color:#c7cad1; opacity:.9; font-size:.95rem; }

/* Centered main: logo via pseudo-element */
.wrap { width:min(680px,92vw); text-align:center; margin-inline:auto; }
.use-text-logo .wrap::before {
  content: "instawarp.";
  display:block;
  font-weight:700; letter-spacing:-0.02em;
  font-size: clamp(2.2rem, 6vw, 4rem);
  margin: clamp(1rem, 4vh, 2rem) auto 1.4rem;
  /* Pronounced, brighter blue�+'purple with a subtle reflective sheen */
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,.26) 58%, rgba(255,255,255,0) 78%),
    linear-gradient(92deg,
      #3fe0ff 0%,   /* brighter aqua/blue for "insta" */
      #5fb9ff 28%,  /* vivid blue */
      #7a8bff 52%,  /* luminous indigo */
      #a066ff 76%,  /* bright purple */
      #d05cff 100%  /* vibrant purple end for "-warp." */
    );
  background-blend-mode: screen;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  /* Light top-edge highlight and soft depth for reflectivity */
  text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 10px 28px rgba(0,0,0,.40);
}

/* Search input container and icon button */
.box { position: relative; padding-right: 3rem !important; background:#171a20 !important; cursor:text; }
/* Make search bar a bit thinner */
.box { padding: .7rem 3rem .7rem 1.1rem !important; }
/* Focus ring around the entire search bar when input is focused */
.box { border: 1px solid #242a33; border-radius: 999px; transition: background-color .12s ease; will-change: background-color; }
.box:focus-within { border-color: #7aa2ff; box-shadow: 0 0 0 2px #7aa2ff33; background-color: #1b2030 !important; }
.box.keep-focus { border-color: #7aa2ff; box-shadow: 0 0 0 2px #7aa2ff33; background-color: #1b2030 !important; }
.box.has-text { background-color: #1b2030 !important; }
.box:focus-within #searchIconBtn { background-color:#556a90; }
/* Disable transitions temporarily to avoid flicker during tab switches */
.box.no-trans { transition: none !important; }
input#q { color:inherit; background:transparent; border:0; outline:none; font:inherit; }
#searchIconBtn {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 0;
  background: #3f4d6a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/1.1rem 1.1rem no-repeat;
  color:#ffffff; cursor:pointer;
}
#searchIconBtn:hover { background-color:#4b5d7f; }
#searchIconBtn:active { transform: translateY(-50%) scale(0.98); }

/* Disable icon interactivity when input empty */
#searchIconBtn[disabled] { opacity:.55; cursor: default; pointer-events: none; background-color:#3f4d6a; }
#searchIconBtn[disabled]:hover { background-color:#3f4d6a; }

/* Suggestion row: hint left, copy right; hide cleanly when empty */
.suggest { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:min(680px,92vw); margin:.5rem auto 0; }
.suggest:has(#hint[hidden]):has(#copySuggest[hidden]) { display:none; }
#hint { margin:.2rem 0 0; opacity:.9; font-size:.95rem; text-align:left; }
#hint strong em { font-style: italic; font-weight:700; }

/* Buttons and layout spacing */
.btns { display:flex; gap:.5rem; justify-content:center; margin:2rem 0 0; }
.btn { padding:.45rem .8rem; border-radius:999px; background:#202226; cursor:pointer; user-select:none; border:0; color:inherit }
.btn, button, .iconbtn { -webkit-tap-highlight-color: transparent; }
.btn:hover { background:#2a2d33; }
.btns .btn, #btnAll { padding: .58rem 1.05rem; font-size: 1.05rem; }
.iconbtn{ touch-action: manipulation; }
@media (pointer: coarse){
  /* Prevent double-tap zoom on mobile for interactive controls */
  .btn, button, .iconbtn { touch-action: manipulation; }
  /* Avoid lingering focus ring on engine buttons after tap */
  #buttons .btn:focus { outline: none; outline-offset: 0; box-shadow: none; }
}
.sub { margin-top:1.4rem; }
.sel-count { font-size:.9rem; opacity:.9; margin-top:.8rem; text-align:center; text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 0 6px rgba(122,162,255,.22);
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.sel-count .num { display:inline-block; font-weight:800; min-width:1ch; }
.sel-count .num.tick { animation: dialRotate .45s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 55%; }
@keyframes dialRotate { 0% { transform: rotate(-200deg) scale(.9); opacity:.7; filter:brightness(.95); } 65% { transform: rotate(18deg) scale(1.05); opacity:1; } 100% { transform: rotate(0deg) scale(1); } }

/* Remove blue focus outline from header/footer links/buttons */
.header .left .btn:focus, .header .left a:focus, .header .right .iconbtn:focus,
.footer .btn:focus, .footer a:focus { outline:none; box-shadow:none; }

/* Override: remove legacy header pseudo-content creating ghost text */
.header::before { content: none !important; }

/* Keep I-beam cursor across the whole input region */
.box * { cursor: text; }


.sel-count .tag{ font-style: italic; font-size: .92em; opacity:.9; margin-left:.25ch }

/* Header center image logo sizing */
.header .center img.site-logo{ max-height:44px; width:auto; height:auto; display:block; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; pointer-events:none }

/* Body logo placement above the search box */
.wrap .logo-wrap{ display:block; margin: clamp(1rem, 4vh, 1.6rem) auto 1.0rem; pointer-events:none; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none }
.wrap .logo-wrap img.site-logo{ display:block; max-height: clamp(34px, 10vw, 72px); width:auto; height:auto; margin: 0 auto; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; pointer-events:none }

/* Subtle logo zoom-in on load (image and text variants) */
@keyframes logoZoomIn { from { opacity: 0; transform: scale(0.965); } to { opacity: 1; transform: scale(1); } }
.wrap .logo-wrap img.site-logo.logo-zoom-in{ animation: logoZoomIn 520ms cubic-bezier(.2,.7,.2,1); will-change: transform, opacity }
.use-text-logo .wrap::before{ animation: logoZoomIn 520ms cubic-bezier(.2,.7,.2,1) }

/* Mobile: slightly larger logo for better visibility */
@media (max-width: 640px){
  .wrap .logo-wrap img.site-logo{ max-height: clamp(38px, 12vw, 86px); }
  .header .center img.site-logo{ max-height: 40px; }
}