:root{
  --nav-h: 56px;
  --sidebar-w: 300px;
}

.glass{
  background: rgba(15,17,22,0.55);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.10);
}

#siteNavbar{ z-index:1100; }

#main{ padding-top: var(--nav-h); }
@media (min-width:768px){
  #app{ display:flex; align-items:stretch; }
  #main{ flex:1 1 auto; min-width:0; }
}

.offcanvas-backdrop{
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
}
.brand-icon{ width:28px; height:28px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.brand-icon svg{ width:24px; height:24px; display:block; }
.spin{ animation: api01-spin 6s linear infinite; transform-origin:50% 50%; }
@keyframes api01-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spin{ animation:none; } }

#navSearchInput::placeholder,
#mobileSearchInput::placeholder { color: rgba(255,255,255,0.6); }
#navSearchInput:focus,
#mobileSearchInput:focus { outline: none; box-shadow: none; border-color: rgba(255,255,255,0.25); }




/* Navbar */
#siteNavbar.glass { background: rgba(15, 15, 20, 0.55); }

/* Desktop search input */
#toolSearchRoot input.form-control {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: .6rem;
  padding-inline: .75rem;
}

/* Desktop dropdown results */
#searchResults {
  background: rgba(15, 15, 20, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: .75rem;
  overflow: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#searchResults .dropdown-item {
  color: #e7e7e7;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  white-space: normal;
  padding: .65rem .8rem;
}
#searchResults .dropdown-item:hover,
#searchResults .dropdown-item.active {
  background: rgba(255,255,255,0.08);
}
#searchResults .result-title { font-weight:600; line-height:1.2; }
#searchResults .result-desc  { opacity:.9; font-size:.9rem; }

/* Mobile offcanvas (sheet) */
#mobileSearch.offcanvas-top {
  background: rgba(15, 15, 20, 0.70);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#mobileSearchInput.form-control {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: .8rem;
}
#mobileResults .list-group-item {
  color: #e7e7e7;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  white-space: normal;
  border-color: rgba(255,255,255,0.08) !important;
}
#mobileResults .result-title { font-weight:600; }
#mobileResults .result-desc  { opacity:.9; font-size:.95rem; }


/* Search width control */
#toolSearchRoot {
  min-width: 200px;
  max-width: 400px;
  flex: 0 0 33%;
}
@media (max-width: 767.98px) {
  #toolSearchRoot {
    flex: 1 1 auto;
    max-width: 100%;
  }
  #toolSearchRoot input.form-control {
    width: 100%;
  }
}

/* Glass input styling (same as glass navbar) */
#toolSearchRoot input.form-control.glass {
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  background: rgba(255,255,255,0.08);
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
}
#toolSearchRoot input.form-control.glass::placeholder {
  color: rgba(255,255,255,0.75);
}


/* ---------- HOME PAGE ---------- */

.tool-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.tool-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.tool-card i {
  color: #0dcaf0; /* Bootstrap info color or your theme color */
  transition: color 0.3s ease;
}

.tool-card:hover i {
  color: #ffc107;
}

/* ---------- FOOTER ---------- */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
}

.footer-inner .links a {
  font-size: 0.9rem;
}

.footer-inner .copy {
  font-size: 0.9rem;
}

/* mobile layout */
@media (max-width: 576px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .footer-inner .links {
    justify-content: center;
  }

  .footer-inner .copy {
    margin-left: 0 !important;
  }
}



/* =========================
   SEARCH (single input)
   ========================= */

/* Base wrapper */
.search-wrapper{
  position: relative;
  display: flex;
  align-items: center;
  max-width: 400px;          /* cap width next to brand */
  transition: all .2s ease;
}

/* Input look */
.search-wrapper .form-control{
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  color: #fff;
  padding-right: 2rem;       /* space for X */
  transition: all .15s ease;
}
.search-wrapper .form-control::placeholder{
  color: rgba(255,255,255,.8);
}



/* Dropdown (desktop) */
.search-menu{
  position: absolute;
  top: calc(100% + .375rem);
  left: 0;
  min-width: 100%;
  max-height: 60vh;
  overflow: auto;
  z-index: 1080;
  display: none;
  border-radius: 12px;
  background: rgba(15,15,20,.7);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: searchFadeIn .15s ease;
}
.search-menu.show{ display:block; }

@keyframes searchFadeIn{
  from{ opacity:0; transform:translateY(-3px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Items */
.search-menu .dropdown-item,
.search-menu .result-item{
  color:#e7e7e7;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  white-space:normal;
  padding:.65rem .8rem;
  transition:all .15s ease;
}
.search-menu .dropdown-item:hover,
.search-menu .result-item:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
  transform:translateX(2px);
}
.search-menu .result-title{ font-weight:600; line-height:1.2; }
.search-menu .result-desc{ opacity:.9; font-size:.9rem; }




@media (max-width:420px){
.brand-title {
  display: none;
}   
}

/*