/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  padding: 0; margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

/* ===== Background ===== */
.bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-image: url('background.webp'), url('background.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  z-index: -1000;
}
.bg-mask {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: -100; background: rgba(0, 0, 0, 0.35);
}

/* ===== Header / Navigation ===== */
.header-container {
  background: rgba(0, 0, 0, 0.75); position: fixed; top: 0; left: 0; right: 0;
  height: 60px; display: flex; align-items: center; padding: 0 40px;
  z-index: 100; backdrop-filter: blur(10px);
}
.header-logo { height: 30px; width: auto; margin-right: 100px; display: block; }
.header-title {
  font-weight: 400; font-size: 14px; line-height: 22px; color: #fff;
  margin-left: 40px; cursor: pointer; transition: color 0.2s ease;
}
.header-title:hover { color: rgba(255, 255, 255, 0.75); }
.header-publish {
  cursor: pointer; width: 90px; height: 32px; position: absolute; top: 14px; right: 40px;
  display: flex; justify-content: center; align-items: center;
  background: rgba(255, 255, 255, 0.85); border-radius: 8px;
  font-weight: 500; font-size: 14px; color: #121212; transition: background 0.2s ease;
}
.header-publish:hover { background: #fff; }

/* ===== Footer ===== */
.footer-container {
  position: fixed; bottom: 20px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 50; padding: 0 40px;
}
.footer-container > div { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 2px; }
.footer-text {
  font-weight: 400; font-size: 11px; line-height: 170%; letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5); white-space: nowrap;
}
.footer-text + .footer-text::before { content: "|"; margin: 0 10px; color: rgba(255, 255, 255, 0.35); }
.footer-text-clickable { cursor: pointer; transition: color 0.2s ease; }
.footer-text-clickable:hover { color: rgba(255, 255, 255, 0.85); }
.gov-img { width: 10px; height: 10px; vertical-align: middle; }
.footer-friend-link {
  font-weight: 400; font-size: 11px; line-height: 170%; letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5); margin-right: 12px;
}
.footer-friend-link:last-child { margin-right: 0; }
.footer-friend-link-clickable { cursor: pointer; transition: color 0.2s ease; }
.footer-friend-link-clickable:hover { color: rgba(255, 255, 255, 0.85); }