:root {
  --bg-gradient: linear-gradient(120deg, #0f2027, #203a43, #2c5364);
  --header-bg: rgba(255, 255, 255, 0.05);
  --footer-bg: rgba(255, 255, 255, 0.05);
  --border-main: 1px solid rgba(255, 255, 255, 0.1);
  --text-color: #fff;
  --logo-shadow: 0 0 4px #00f7ff;
  --link-main: #2c1818;
  --link-hover: #00f7ff;
  --link-bg: linear-gradient(90deg, #00f7ff 0%, #0b75aa 100%);
  --glass-blur: blur(10px);
}

html.light {
  --bg-gradient: linear-gradient(120deg, #f5f8fb 10%, #e3eaf2 70%, #e9f3fa 100%);
  --header-bg: rgba(255,255,255,0.90);
  --footer-bg: rgba(255,255,255,0.88);
  --border-main: 1px solid #d1dde7;
  --text-color: #243344;
  --logo-shadow: 0 0 7px #4bc9e5;
  --link-main: #1576a6;
  --link-hover: #109bce;
  --link-bg: linear-gradient(90deg, #c6f4fe 0%, #96c7e6 100%);
  --glass-blur: blur(1.2px);
}


html.light .glass-card,
html.light .place-details,
html.light .form-card {
  background: rgba(255,255,255,0.84);
  box-shadow: 0 4px 28px #90d1f719, 0 1.5px 4px #0001;
  border: 1.1px solid #dbe7f1;
  color: var(--text-color);
}


html.light .header-glass,
html.light .footer-glass {
  background: rgba(245,250,254,0.92);
  border-color: #d1dde7;
}


body,
.header-glass,
.footer-glass,
.glass-card,
.login-card,
.place-details,
.form-card,
.review-card {
  transition:
    background 0.46s cubic-bezier(0.39,0.58,0.57,1),
    color 0.42s cubic-bezier(0.39,0.58,0.57,1),
    box-shadow 0.40s cubic-bezier(0.39,0.58,0.57,1),
    border 0.40s cubic-bezier(0.39,0.58,0.57,1);
}

html {
  background: var(--bg-gradient);
  min-height: 100vh;
  
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family:'sans-serif';
  color: var(--text-color);
  margin: 0;
  padding: 0;
  background: transparent;
}

.header-glass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  backdrop-filter: var(--glass-blur);
  background: var(--header-bg);
  border-bottom: var(--border-main);
}

.footer-glass {
  flex-shrink: 0;
  text-align: center;
  padding: 20px;
  background: var(--footer-bg);
  border-top: var(--border-main);
  backdrop-filter: var(--glass-blur);
  font-size: 0.9rem;
  color: var(--text-color);
  position: relative;
  z-index: 2;
}

.logo-image {
  height: 50px;
  filter: drop-shadow(var(--logo-shadow));
  transition: transform 0.3s, filter 0.38s;
  border-radius: 8px;
  vertical-align: middle;
}
.logo-image:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 7px #00f7ff) drop-shadow(0 0 18px #00f7ff66);
}


main {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}

.login-link {
  display: inline-block;
  background: var(--link-bg);
  color: var(--link-main);
  font-weight: bold;
  border: none;
  border-radius: 24px;
  padding: 11px 30px;
  text-decoration: none;
  box-shadow: 0 0 16px #00f7ff90, 0 0 32px #00e7ff55;
  transition: background 0.22s, color 0.19s, box-shadow 0.22s;
  font-size: 1.08rem;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.login-link:hover {
  background: linear-gradient(90deg, #000 0%, #000 100%);
  color: var(--link-hover);
  box-shadow: 0 0 24px #00f7ff, 0 0 42px #00f7ff99;
  filter: brightness(1.10);
}

#user-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.08rem;
  color: var(--text-color);
}

#user-nav b {
  font-weight: 700;
  margin: 0 2px 0 4px;
}

#user-nav a:not(.login-link) {
  color: var(--text-color);
  text-decoration: none;
  margin-left: 6px;
  transition: color 0.2s, text-shadow 0.2s;
}

#user-nav a:hover {
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--link-hover);
}

#user-nav i {
  font-style: italic;
  opacity: 0.8;
}


#theme-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  font-size: 2rem;
  border: none;
  background: none;
  cursor: pointer;
  box-shadow: 0 2px 12px #0003;
  border-radius: 50%;
  transition: background 0.25s, box-shadow 0.32s, transform 0.19s;
  outline: none;
  padding: 7px 10px;
  color: #f7c243;
  background: #203a43bb;
}
#theme-toggle:hover {
  background: #e2f8fdc2;
  box-shadow: 0 2px 24px #00f7ff77;
  transform: scale(1.10);
}
html.light #theme-toggle {
  background: #fffbe6e8;
  color: #ffb300;
}

#theme-toggle:focus {
  outline: 2px solid #00f7ff44;
}

@media (max-width: 700px) {
  .header-glass,
  .footer-glass {
    padding: 10px 8px;
  }
  #theme-toggle {
    font-size: 1.4rem;
    padding: 5px 7px;
    right: 10px;
    bottom: 12px;
  }
}



#token-timer {
  margin-left: 12px;
  color: #00f7ff;
  font-weight: 600;
  font-family: monospace;
  text-shadow: 0 0 8px #00f7ff77;
}