/* ============================================================
   360 — HOME.CSS
   Home page specific styles only.
   Universal styles live in main.css
   ============================================================ */

/* ============================================================
   HOME LAYOUT
   ============================================================ */
.home-inner {
  max-width: 720px;
  margin: auto;
  text-align: center;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ============================================================
   CLOCK + WEATHER CHIPS
   ============================================================ */
.clock-pill,
.weather-chip {
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--br);
}

body.dark .clock-pill,
body.dark .weather-chip {
  background: rgba(15, 23, 42, .92);
}

/* ============================================================
   LOGO
   ============================================================ */
.logo-main {
  font-size: 54px;
  font-weight: 900;
  letter-spacing: .13em;
  padding: 8px 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 54px rgba(15, 23, 42, .22);
}

.logo-main span {
  background: linear-gradient(120deg, var(--a), var(--a2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   SEARCH SHELL
   ============================================================ */
.search-shell {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.gcse-search {
  flex: 1 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  border: 1px solid var(--br) !important;
  background: rgba(255, 255, 255, .15) !important;
  backdrop-filter: blur(6px) !important;
  color: var(--txt) !important;
  font-size: 16px !important;
  outline: none !important;
  transition: 0.2s !important;
}

/* ============================================================
   TOP-RIGHT AUTH BUTTONS
   ============================================================ */
.auth-top-right {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 10px;
  z-index: 50;
}

.auth-btn {
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: .2s;
  background: rgba(148, 163, 184, .15);
  border: 1px solid var(--br);
  font-size: 14px;
  color: var(--txt);
}

.auth-btn:hover {
  background: linear-gradient(120deg, var(--a), var(--a2));
  color: #050816;
}

body.dark .auth-btn {
  color: var(--txtd);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
}

body.dark .auth-btn:hover {
  color: #050816;
}

/* ============================================================
   TEMP UNIT SWITCHER
   ============================================================ */
.temp-unit-box {
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  border: 1px solid var(--br);
}

body.dark .temp-unit-box {
  background: rgba(15, 23, 42, .92);
}

#tempUnitBtn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--br);
  background: linear-gradient(110deg, var(--a), var(--a2));
  color: #050816;
  cursor: pointer;
  font-weight: 600;
  transition: .2s;
}

#tempUnitBtn:hover {
  opacity: 0.85;
}

/* ============================================================
   MUSIC TOGGLE
   ============================================================ */
#musicToggle {
  background: rgba(148, 163, 184, .15);
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--br);
  cursor: pointer;
  transition: .2s;
  color: var(--txt);
  font-size: 14px;
}

body.dark #musicToggle {
  color: var(--txtd);
}

#musicToggle:hover {
  background: linear-gradient(120deg, var(--a), var(--a2));
  color: #050816;
}

/* ============================================================
   OAUTH BUTTONS
   ============================================================ */
.oauth-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid var(--br);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  font-size: 14px;
  transition: .2s;
}

.oauth-btn:hover {
  background: rgba(148, 163, 184, .2);
}

.oauth-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ============================================================
   LEGAL LINKS + ABOUT DROPDOWN
   ============================================================ */
.legal-link {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: var(--a);
  text-decoration: none;
}

.legal-link:hover {
  text-decoration: underline;
}

.about-dropdown {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--br);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt);
}

body.dark .about-dropdown {
  color: var(--txtd);
}

.about-dropdown summary {
  font-size: 15px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.about-dropdown p {
  margin-top: 10px;
}

/* ============================================================
   INSTALL BANNER
   ============================================================ */
.install-banner {
  position: fixed;
  bottom: 16px;
  right: 16px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--a), var(--a2));
  color: #050816;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  z-index: 80;
}

/* ============================================================
   SETTINGS BOX
   ============================================================ */
.settings-box {
  margin-top: 10px;
}

.settings-input {
  width: 100%;
  padding: 8px 10px;
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid var(--br);
  background: transparent;
  color: var(--txt);
  font-size: 13px;
}

body.dark .settings-input {
  color: var(--txtd);
}

.settings-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--br);
  background: linear-gradient(110deg, var(--a), var(--a2));
  color: #050816;
  cursor: pointer;
  font-weight: 600;
  transition: .2s;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .home-inner {
    padding: 20px;
    gap: 16px;
  }

  .auth-top-right {
    top: 8px;
    right: 8px;
    gap: 6px;
  }

  .auth-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}


/* ============================================================ 
   SEARCH BAR CSS
   ============================================================ */
.gsc-control-cse{background:transparent!important;border:none!important;padding:0!important;box-shadow:none!important;font-family:inherit!important}.gsc-search-box{width:100%!important;padding:0!important;margin:0 auto!important;border-radius:999px!important;background:rgba(255,255,255,0.15)!important;backdrop-filter:blur(12px)!important;border:1px solid var(--br)!important;box-shadow:0 8px 24px rgba(0,0,0,0.08)!important;overflow:hidden!important}body.dark .gsc-search-box{background:rgba(15,23,42,0.6)!important;border-color:rgba(255,255,255,0.15)!important}.gsc-search-box table{width:100%!important;border-collapse:collapse!important}.gsc-search-box td{padding:0!important}.gsc-input-box{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;display:flex!important;align-items:center!important}.gsib_a{flex:1!important;display:flex!important;align-items:center!important}.gsib_b{flex:0 0 auto!important;margin-left:6px!important}.gsc-search-button-v2{flex:0 0 auto!important;background:linear-gradient(120deg,var(--a),var(--a2))!important;border:none!important;border-radius:999px!important;padding:10px 20px!important;margin-right:10px!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important}.gsc-search-button-v2 svg{fill:#050816!important}input.gsc-input{background:transparent!important;border:none!important;outline:none!important;font-size:16px!important;color:var(--txt)!important;padding:14px 50px!important;width:100%!important}body.dark input.gsc-input{color:var(--txtd)!important}input.gsc-input::placeholder{color:var(--mut)!important}body.dark input.gsc-input::placeholder{color:var(--mutd)!important}input.gsc-input:focus{outline:none!important;box-shadow:none!important;border:none!important}.gsc-completion-container{backdrop-filter:blur(12px)!important;background:rgba(255,255,255,0.8)!important;border-radius:12px!important;border:1px solid var(--br)!important}body.dark .gsc-completion-container{background:rgba(15,23,42,0.85)!important;border-color:rgba(255,255,255,0.15)!important}.gsc-completion-title,.gsc-completion-snippet{color:var(--txt)!important}body.dark .gsc-completion-title,body.dark .gsc-completion-snippet,body.dark .gsc-completion-title *,body.dark .gsc-completion-snippet *{color:var(--txtd)!important}.gsc-webResult.gsc-result{background:rgba(255,255,255,0.6)!important;backdrop-filter:blur(10px)!important;border-radius:16px!important;padding:16px!important;margin-bottom:16px!important;border:1px solid var(--br)!important}body.dark .gsc-webResult.gsc-result{background:rgba(15,23,42,0.7)!important;border-color:rgba(255,255,255,0.15)!important}.gs-title,.gs-title *{color:var(--txt)!important}body.dark .gs-title,body.dark .gs-title *{color:var(--txtd)!important}.gs-snippet{color:var(--mut)!important}body.dark .gs-snippet{color:var(--mutd)!important}.gsc-cursor-page{border-radius:999px!important;padding:6px 12px!important;border:1px solid var(--br)!important;background:rgba(255,255,255,0.4)!important}body.dark .gsc-cursor-page{background:rgba(15,23,42,0.6)!important;border-color:rgba(255,255,255,0.15)!important;color:var(--txtd)!important}.gsc-cursor-current-page{background:linear-gradient(120deg,var(--a),var(--a2))!important;color:#fff!important;border-color:transparent!important}body.dark .gsc-cursor-current-page{background:linear-gradient(120deg,var(--a),var(--a2))!important;color:#fff!important;border-color:transparent!important}.gsc-tabHeader,.gsc-refinementHeader,.gsc-tabHeader.gsc-tabhInactive,.gsc-refinementHeader.gsc-refinementhInactive{background:transparent!important;border:none!important;box-shadow:none!important}.gsc-tabHeader.gsc-tabhActive,.gsc-refinementHeader.gsc-refinementhActive{background:transparent!important;border:none!important;border-bottom:2px solid var(--a)!important}.gsc-tabHeader,.gsc-refinementHeader{transition:color .25s ease,border-color .25s ease,transform .25s ease!important}.gsc-tabHeader.gsc-tabhActive,.gsc-refinementHeader.gsc-refinementhActive{transform:translateY(-2px)!important;color:var(--a2)!important;border-bottom:2px solid var(--a2)!important}body.dark .gsc-refinementHeader,body.dark .gsc-refinementHeader *{color:var(--txtd)!important}body.dark .gsc-tabHeader.gsc-tabhInactive,body.dark .gsc-tabHeader.gsc-tabhInactive *{color:var(--txtd)!important}.gsc-branding,.gcsc-branding,.gcsc-more-maybe-branding,.gcsc-more-maybe-branding-root,.gcsc-find-more-on-google-root,.gsc-results .gcsc-more-maybe-branding,.gsc-results .gcsc-find-more-on-google-root{display:none!important}input.gsc-input{caret-color:var(--txt)!important;animation:caretBlink .5s step-end infinite!important}body.dark input.gsc-input{caret-color:var(--txtd)!important}@keyframes caretBlink{50%{caret-color:transparent}}body.dark .gs-title,body.dark .gs-title *,body.dark .gs-snippet,body.dark .gs-snippet *,body.dark .gs-visibleUrl,body.dark .gs-visibleUrl *,body.dark .gsc-url-top,body.dark .gsc-url-top *,body.dark .gsc-url-bottom,body.dark .gsc-url-bottom *,body.dark .gsc-result-info,body.dark .gsc-result-info *,body.dark .gsc-table-result *,body.dark .gs-per-result-labels *,body.dark .gsc-above-wrapper-area *,body.dark .gsc-thumbnail-inside *,body.dark .gsc-option-menu-item *,body.dark .gsc-option *,body.dark .gsc-selected-option-container *{color:var(--bg)!important}.gsc-imageResult img{max-width:100%!important;height:auto!important}body.dark .gsib_b svg{fill:var(--txtd)!important}body.dark .gsc-clear-button{filter:invert(1)!important;opacity:1!important}body.dark .gsc-completion-container *{color:var(--txtd)!important} body.dark .gsst_a,body.dark .gsst_a *{filter:invert(1)!important} body.dark .gscb_a,body.dark .gscb_a *{filter:invert(1)!important}body.dark .gsib_b svg{fill:var(--txtd)!important} body.dark .gscb_a,body.dark .gscb_a *{filter:invert(1) brightness(1.4)!important;opacity:1!important}body.dark .gsst_b,body.dark .gsst_b *{filter:invert(1) brightness(1.6)!important} input.gsc-input::-webkit-search-decoration, input.gsc-input::-webkit-search-cancel-button, input.gsc-input::-webkit-search-results-button, input.gsc-input::-webkit-search-results-decoration { filter: invert(1) brightness(1.6) !important; } input.gsc-input::-moz-search-decoration { filter: invert(1) brightness(1.6) !important; } input.gsc-input::-webkit-search-decoration { filter: invert(1) brightness(1.6) !important; }input.gsc-input{background-image:none!important}body.dark .gsst_a,body.dark .gsst_a *{filter:invert(1)!important}