@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

:root {
  --bg: #0a0a0a;
  --bg-2: #0d0d0d;
  --panel: #111111;
  --panel-2: #161616;
  --text: #e9e9f2;
  --muted: #a8a8a8;
  --line: #262626;
  --accent: #a55cff;
  --accent-strong: #6d32ff;
}

html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; color: var(--text);
  font-family: 'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment: fixed; /* ensure continuous background on long pages */
  min-height: 100vh; /* sticky footer baseline */
  min-height: 100dvh; /* modern viewport units for mobile */
}
/* subtle neutral vignette */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 100px rgba(0,0,0,.35), inset 0 0 260px rgba(0,0,0,.20);
}
/* static accent splash (no animation) */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 700px at 85% 8%, rgba(165,92,255,.045), transparent 60%),
    radial-gradient(600px 500px at 10% 92%, rgba(165,92,255,.025), transparent 65%);
}

main { flex: 1 0 auto; padding: 72px 24px 24px; }

/* Ensure form controls inherit the font */
button, input, select, textarea { font-family: inherit; }

/* Navbar */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 56px; display: flex; align-items: center; gap: 16px;
  padding: 0 18px; box-sizing: border-box;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--panel), transparent 30%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-family: 'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.navbar-logo { display: flex; align-items: center; }
.navbar-logo img { height: 36px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.navbar-left-links { display: flex; gap: 12px; margin-left: 8px; }
.navbar-left-links a { display:inline-flex; align-items:center; gap:8px; color: #a55cff; text-decoration:none; border: 1px solid transparent; padding: 6px 10px; border-radius: 10px; }
.navbar-left-links a .material-symbols-outlined { font-size:20px; line-height:1; }
.navbar-left-links a.active, .navbar-left-links a:hover { color: #a55cff; border-color: #2a2a2a; background: #1a1a1a; box-shadow: 0 8px 18px rgba(0,0,0,.25) inset; }

.navbar-right-links { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.buy-btn { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 10px; color: #ffffff; text-decoration: none; font-weight: 800; letter-spacing:.4px; border: 1px solid #8f49ff; background: linear-gradient(135deg, #b77bff, #7d4aff); box-shadow: 0 8px 16px rgba(0,0,0,.35), 0 8px 18px rgba(165,92,255,.22); position: relative; overflow: hidden; animation: pulse 2600ms ease-in-out infinite; }
.buy-btn .material-symbols-outlined { font-size: 20px; line-height: 1; }
.buy-btn .label { position: relative; z-index: 1; }
.buy-btn::after { content:""; position:absolute; top:-20%; bottom:-20%; width: 40%; left:-50%; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0)); filter: blur(2px); opacity:.55; animation: shine 2800ms ease-in-out infinite; }
@keyframes shine { 0% { left: -50%; } 55% { left: 120%; } 100% { left: 120%; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 8px 16px rgba(0,0,0,.35), 0 8px 18px rgba(165,92,255,.18); } 50% { box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 14px 28px rgba(165,92,255,.35); } }
.buy-btn:hover { background: linear-gradient(135deg, #c18cff, #8b5bff); border-color: #a55cff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 16px 36px rgba(165,92,255,.38); }
.buy-btn:focus-visible { outline: 2px solid #a55cff; outline-offset: 3px; }

 .navbar-right-links button { background: #12121a; border: 1px solid var(--line); color: #d0d0d0; cursor: pointer; padding: 6px 10px; border-radius: 10px; display:flex; align-items:center; position: relative; width: 42px; height: 36px; justify-content: center; transition: border-color .2s ease, box-shadow .2s ease, background-size .28s ease; 
  background-image: linear-gradient(#d0d0d0, #d0d0d0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(100% - 20px) 2px; /* middle bar */ }
.navbar-right-links button .material-symbols-outlined { display:none; }
.navbar-right-links button::before,
.navbar-right-links button::after { content:""; position:absolute; left:10px; right:10px; height:2px; background:#d0d0d0; border-radius:2px; transition: transform .28s cubic-bezier(.2,.8,.2,1), background .2s ease; }
.navbar-right-links button::before { transform: translateY(-6px); }
.navbar-right-links button::after { transform: translateY(6px); }
.navbar-right-links button:hover { border-color: #3a3a3a; box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.profile-dropdown:has(#profile-menu[style*="display: block"]) #profile-button { background-size: 0 2px; }
.profile-dropdown:has(#profile-menu[style*="display: block"]) #profile-button::before { transform: translateY(0) rotate(45deg); }
.profile-dropdown:has(#profile-menu[style*="display: block"]) #profile-button::after { transform: translateY(0) rotate(-45deg); }
.material-symbols-outlined { font-size: 20px; }

/* Dropdown */
.profile-dropdown { position: relative; display: inline-block; }
.dropdown-menu { display: none; position: absolute; right: 0; top: 44px; background: #12121a; border: 1px solid var(--line); border-radius: 12px; padding: 8px 0; min-width: 200px; box-shadow: 0 20px 40px rgba(0,0,0,.45); opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1); transform-origin: top right; }
.dropdown-menu[style*="display: block"] { display: block !important; opacity: 1; transform: translateY(0) scale(1); }
.dropdown-menu a { display: block; padding: 10px 14px; color: #d0d0d0; text-decoration: none; }
.dropdown-menu a:hover { background: #1a1a1a; color: #fff; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 24px 0; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--panel), transparent 30%); box-shadow: 0 -10px 30px rgba(0,0,0,.35); margin-top: auto; flex-shrink: 0; }
.footer-inner { width: min(1200px, 92vw); margin: 0 auto; display:flex; flex-direction:column; gap: 10px; align-items:center; }
.footer-links { display:flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color:#cecece; text-decoration:none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset:3px; font-weight:700; }
.copy { color: #a0a0a0; font-size: 14px; }