*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#01040c; --fg:#e8eefc; --dim:#8fa2c4; --line:rgba(140,175,235,.18);
  --field:rgba(255,255,255,.05); --accent:#C9A84C;
}
body[data-theme="light"]{
  --bg:#eef3fa; --fg:#0e2242; --dim:#5c6f8f;
  --line:rgba(20,45,90,.12); --field:rgba(255,255,255,.85); --accent:#8a6d1f;
}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg); overflow:hidden;
  font-family:"Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease;
}

/* ---------- sahne ---------- */
#stage{position:fixed;inset:0;z-index:0}
#ehm-cube{position:absolute;inset:0;width:100%;height:100%;display:block}
#bg{position:absolute;inset:0;transition:opacity .6s,background .6s}
/* dərin okean mavisi — bioluminesent kütləyə uyğun */
body[data-theme="dark"] #bg{
  background:
    radial-gradient(42% 27% at 50% 40%, rgba(46,132,255,.24) 0%, rgba(22,74,175,.10) 46%, rgba(0,0,0,0) 74%),
    radial-gradient(125% 80% at 50% 16%, rgba(15,58,131,.60) 0%, rgba(7,24,58,.33) 46%, rgba(0,0,0,0) 80%),
    linear-gradient(180deg,#08172f 0%,#091b37 24%,#050f22 54%,#01050e 82%,#000104 100%);
}
body[data-theme="light"] #bg{
  background:radial-gradient(95% 75% at 50% 34%, #e7eef9 0%, #cfdcef 44%, #b3c6e0 80%, #9db3d2 100%);
}
/* altdakı yazıların oxunması üçün yumşaq qaralma */
#veil{position:absolute;left:0;right:0;bottom:0;height:34vh;pointer-events:none}
body[data-theme="dark"] #veil{
  background:linear-gradient(180deg,rgba(0,3,10,0) 0%,rgba(0,3,10,.55) 55%,rgba(0,3,10,.92) 100%);
}
body[data-theme="light"] #veil{
  background:linear-gradient(180deg,rgba(238,243,250,0) 0%,rgba(238,243,250,.7) 55%,rgba(238,243,250,.96) 100%);
}

/* ---------- üst ---------- */
#top{
  position:fixed;z-index:3;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 30px;
}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:.2px;
  color:var(--fg);text-decoration:none}
.brand:hover .name b{filter:brightness(1.15)}
.brand .name{font-weight:400}
.brand .name b{font-weight:700;color:var(--accent)}
.brand .mark{
  width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 14px var(--accent);
}
#login{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:.2px;
  color:var(--fg);background:var(--field);
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  backdrop-filter:blur(14px);
  transition:border-color .2s,background .2s,transform .18s,box-shadow .2s;
}
#login svg{opacity:.8}
#login:hover{
  border-color:var(--accent);transform:translateY(-1px);
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}
#login:active{transform:translateY(0)}

/* ---------- alt ---------- */
#credit{
  position:fixed;z-index:3;left:0;right:0;bottom:34px;
  text-align:center;font-size:13px;letter-spacing:.35px;color:var(--dim);
  pointer-events:none;padding:0 24px;
}
#legal{
  position:fixed;z-index:3;right:30px;bottom:30px;
  display:flex;align-items:center;gap:9px;font-size:12px;color:var(--dim);
}
#legal a{color:var(--dim);text-decoration:none;transition:color .2s}
#legal a:hover{color:var(--accent)}
#legal span{opacity:.45}

@media(max-width:860px){
  #top{padding:16px 18px}
  #credit{bottom:62px;font-size:12px}
  #legal{right:0;left:0;bottom:28px;justify-content:center}
}

/* ---------- üst naviqasiya (ana bağlantılar) ---------- */
#top .nav{display:flex;align-items:center;gap:22px}
#top .nav a{color:var(--dim);text-decoration:none;font-size:13.5px;transition:color .2s;white-space:nowrap}
#top .nav a:hover{color:var(--fg)}
@media(max-width:720px){
  #top .nav a:not(#login){display:none}
}

/* giriş düyməsi */
#top .btn-login{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--fg);background:var(--field);
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:13.5px;font-weight:600;letter-spacing:.2px;
  backdrop-filter:blur(14px);
  transition:border-color .2s,background .2s,transform .18s,box-shadow .2s;
}
#top .btn-login svg{opacity:.8}
#top .btn-login:hover{
  color:var(--fg);border-color:var(--accent);transform:translateY(-1px);
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}