:root {
  --linen: #f8f5f0;
  --soft-beige: #e7d7c3;
  --ivory: #faf8f4;
  --cyan: #2dd4bf;
  --teal: #16a8c9;
  --ink: #1d2730;
  --saddle: #6e4a2c;
  --graph-dot: #b37a43;
  --dark-leather: #3f2a1c;
  --ivory-deep: #f2ece4;
  --site-bg-solid: #f8f5f0;
  --site-bg: linear-gradient(145deg, var(--linen) 0%, #faf5ef 45%, #eddac7 66%, #e0c7ab 90%);
  --header-bg: var(--linen);
  --header-border: rgba(55, 34, 22, 0.25);
  --contact-bg: rgba(255, 255, 255, 0.9);
  --contact-shadow: 0 -10px 25px rgba(13, 21, 23, 0.1);
  --contact-btn-bg: rgba(240, 232, 224, 0.8);
  --contact-btn-border: rgba(45, 212, 191, 0.6);
  --theme-eye: #6e4a2c;
  --theme-toast-bg: rgba(255, 255, 255, 0.65);
  --theme-toast-fg: var(--ink);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
  color: var(--ink);
  letter-spacing: 0.02em;
  background-color: var(--site-bg-solid);
  background-image: var(--site-bg);
}

html {
  background-color: #f8f5f0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 5vw;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--header-border);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
}

.logo {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  letter-spacing: 0.4em;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.nav-links a:hover {
  color: var(--saddle);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

body.page-hub .nav-links a[data-page="hub"],
body.page-business .nav-links a[data-page="business"],
body.page-games .nav-links a[data-page="games"],
body.page-tools .nav-links a[data-page="tools"],
body.page-photos .nav-links a[data-page="photos"],
body.page-shop .nav-links a[data-page="shop"],
body.page-account .nav-links a[data-page="account"] {
  color: var(--cyan);
}

.contact-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--contact-bg);
  backdrop-filter: blur(8px);
  padding: 0.6rem 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--contact-shadow);
}

.contact-button {
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--contact-btn-border);
  background: var(--contact-btn-bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}

.contact-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(29, 39, 48, 0.2);
  border-color: var(--cyan);
}

.theme-toggle {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--theme-eye) 50%, transparent);
  background: color-mix(in srgb, var(--contact-btn-bg) 78%, transparent);
  color: var(--theme-eye);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.theme-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(29, 39, 48, 0.16);
}

.theme-toast {
  position: fixed;
  left: 50%;
  bottom: 3.2rem;
  transform: translateX(-50%) translateY(8px);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--theme-toast-fg);
  background: var(--theme-toast-bg);
  border: 1px solid color-mix(in srgb, var(--theme-toast-fg) 18%, transparent);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.theme-toast.is-visible {
  opacity: 0.65;
  transform: translateX(-50%) translateY(0);
}

body[data-theme="white-glass"] {
  --linen: #f7faff;
  --soft-beige: #e8eff8;
  --ivory: #f8fcff;
  --cyan: #4fc3f7;
  --teal: #7cc7ff;
  --ink: #1d2730;
  --saddle: #3f5669;
  --dark-leather: #22303f;
  --ivory-deep: #edf5ff;
  --site-bg-solid: #f9fcff;
  --site-bg: linear-gradient(145deg, #f9fcff 0%, #f2f8ff 45%, #e9f1fb 72%, #dde8f6 100%);
  --header-bg: rgba(250, 253, 255, 0.72);
  --header-border: rgba(140, 166, 192, 0.34);
  --contact-bg: rgba(248, 252, 255, 0.72);
  --contact-shadow: 0 -12px 26px rgba(53, 78, 109, 0.1);
  --contact-btn-bg: rgba(255, 255, 255, 0.58);
  --contact-btn-border: rgba(79, 195, 247, 0.58);
  --theme-eye: #4fc3f7;
  --theme-toast-bg: rgba(255, 255, 255, 0.58);
}

body[data-theme="dark-glass"] {
  --linen: #10151c;
  --soft-beige: #151f2b;
  --ivory: #0f1720;
  --cyan: #2dd4bf;
  --teal: #4a90e2;
  --ink: #e6eef7;
  --saddle: #8ab5d8;
  --dark-leather: #d2e1ef;
  --ivory-deep: #182532;
  --site-bg-solid: #0d131a;
  --site-bg: linear-gradient(145deg, #0d131a 0%, #111b25 46%, #162532 72%, #10202c 100%);
  --header-bg: rgba(13, 20, 29, 0.78);
  --header-border: rgba(133, 168, 205, 0.22);
  --contact-bg: rgba(13, 20, 29, 0.74);
  --contact-shadow: 0 -14px 28px rgba(2, 8, 14, 0.42);
  --contact-btn-bg: rgba(22, 33, 46, 0.72);
  --contact-btn-border: rgba(74, 144, 226, 0.52);
  --theme-eye: #4a90e2;
  --theme-toast-bg: rgba(16, 27, 39, 0.72);
  --theme-toast-fg: #e6eef7;
}

body[data-theme="cyan-portal"] {
  --linen: #071a24;
  --soft-beige: #0c2732;
  --ivory: #0f2c3a;
  --cyan: #00d1ff;
  --teal: #00afaf;
  --ink: #e8fbff;
  --saddle: #57bfd1;
  --dark-leather: #e8fbff;
  --ivory-deep: #173644;
  --site-bg-solid: #071a24;
  --site-bg: linear-gradient(145deg, #071a24 0%, #0a2230 44%, #103447 72%, #0b2c3a 100%);
  --header-bg: rgba(9, 29, 40, 0.82);
  --header-border: rgba(0, 209, 255, 0.26);
  --contact-bg: rgba(8, 30, 41, 0.78);
  --contact-shadow: 0 -14px 30px rgba(2, 11, 16, 0.45);
  --contact-btn-bg: rgba(16, 48, 64, 0.74);
  --contact-btn-border: rgba(0, 209, 255, 0.58);
  --theme-eye: #00d1ff;
  --theme-toast-bg: rgba(8, 36, 49, 0.76);
  --theme-toast-fg: #e8fbff;
}

body[data-theme="onyx-black"] {
  --linen: #07090d;
  --soft-beige: #10141b;
  --ivory: #121821;
  --cyan: #b5c5d8;
  --teal: #7f98b4;
  --ink: #f1f5fb;
  --saddle: #9fb2c9;
  --dark-leather: #f1f5fb;
  --ivory-deep: #171f2b;
  --site-bg-solid: #06090d;
  --site-bg: linear-gradient(145deg, #06090d 0%, #0b1017 45%, #101723 72%, #121b28 100%);
  --header-bg: rgba(7, 11, 16, 0.86);
  --header-border: rgba(164, 182, 205, 0.22);
  --contact-bg: rgba(8, 12, 18, 0.84);
  --contact-shadow: 0 -14px 30px rgba(0, 0, 0, 0.5);
  --contact-btn-bg: rgba(20, 28, 40, 0.8);
  --contact-btn-border: rgba(165, 185, 209, 0.5);
  --theme-eye: #d6e2f1;
  --theme-toast-bg: rgba(15, 22, 32, 0.84);
  --theme-toast-fg: #f1f5fb;
}

body[data-theme="jungle-green"] {
  --linen: #0c1c14;
  --soft-beige: #153224;
  --ivory: #183b2a;
  --cyan: #61e0a1;
  --teal: #4ac47f;
  --ink: #e8fff2;
  --saddle: #8ccda9;
  --dark-leather: #d8ffea;
  --ivory-deep: #1f4732;
  --site-bg-solid: #0a1a13;
  --site-bg: linear-gradient(145deg, #0a1a13 0%, #0f271c 44%, #173926 72%, #214b34 100%);
  --header-bg: rgba(10, 30, 20, 0.84);
  --header-border: rgba(115, 204, 156, 0.24);
  --contact-bg: rgba(11, 32, 22, 0.82);
  --contact-shadow: 0 -14px 30px rgba(2, 12, 8, 0.45);
  --contact-btn-bg: rgba(24, 62, 43, 0.8);
  --contact-btn-border: rgba(97, 224, 161, 0.55);
  --theme-eye: #74efb2;
  --theme-toast-bg: rgba(16, 44, 30, 0.84);
  --theme-toast-fg: #e8fff2;
}

body[data-theme="sunset-glow"] {
  --linen: #fff3eb;
  --soft-beige: #ffd9c3;
  --ivory: #fff7f0;
  --cyan: #ff8a5b;
  --teal: #f8b453;
  --ink: #2d1e18;
  --saddle: #a65533;
  --dark-leather: #4a2719;
  --ivory-deep: #ffe8da;
  --site-bg-solid: #fff7ef;
  --site-bg: linear-gradient(145deg, #fff7ef 0%, #ffeedd 44%, #ffd8c1 70%, #ffc39f 100%);
  --header-bg: rgba(255, 244, 235, 0.8);
  --header-border: rgba(182, 98, 58, 0.28);
  --contact-bg: rgba(255, 245, 237, 0.84);
  --contact-shadow: 0 -12px 26px rgba(108, 47, 20, 0.16);
  --contact-btn-bg: rgba(255, 234, 220, 0.88);
  --contact-btn-border: rgba(255, 138, 91, 0.62);
  --theme-eye: #ba5f33;
  --theme-toast-bg: rgba(255, 244, 237, 0.9);
  --theme-toast-fg: #3a2319;
}

@media (max-width: 700px) {
  header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}