@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&display=swap');

:root{
  --gold:#d4af37;
  --text:#e6e6e6;
  --accent:#0d2a5a;
  --ring:#0f2e63;
  --gt-bg-image:none;
  --bar-bg: rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#0b0b0d var(--gt-bg-image) center/cover fixed no-repeat;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh;
}

.glassbar{position:fixed; left:0; right:0; z-index:1000; background:var(--bar-bg); backdrop-filter: blur(4px);}
.topbar{top:0}
.bottombar{bottom:0}
.bar-inner{height:56px; display:flex; align-items:center; justify-content:flex-end; padding:10px 16px; gap:14px;}

.flagbox{--box: 36px; width:var(--box); height:var(--box); border-radius:10px; background:rgba(0,0,0,.25); box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; display:inline-flex; align-items:center; justify-content:center; position:relative; text-decoration:none}
.flagbox .flag{font-size:calc(var(--box) * .9); line-height:1}
.flagbox:hover::after{content: attr(data-tip); position:absolute; top:120%; right:0; background:rgba(0,0,0,.85); color:#f5f5f5; padding:6px 10px; border-radius:8px; white-space:nowrap;}

.login-btn{display:inline-block; padding:10px 16px; border-radius:14px; background:var(--accent); color:var(--gold); text-decoration:none; font-family:'Kalam', cursive; font-weight:400; text-transform:lowercase; box-shadow:0 0 0 2px var(--ring) inset;}

.profile{position:relative}
.profile-btn{display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:12px; background:rgba(0,0,0,.35); color:var(--gold); border:0; cursor:pointer}
.profile .avatar img{border-radius:999px}
.profile .names{display:flex; flex-direction:column; line-height:1; text-align:left}
.profile .names b, .profile .names i{color:var(--gold); font-style:normal; font-size:12px; font-weight:400}
.profile:hover .profile-menu{display:block}
.profile-menu{display:none; position:absolute; right:0; top:110%; background:#141418; border:1px solid #26262d; border-radius:10px; min-width:180px; box-shadow:0 6px 24px rgba(0,0,0,.4);}
.profile-menu a{display:block; padding:10px 12px; color:#ddd; text-decoration:none}
.profile-menu a:hover{background:#1b1b22; color:var(--gold)}

.foot-inner{padding:8px 12px; text-align:center; color:#cfcfcf; font-size:14px}

.content{min-height:100vh; padding-top:56px; padding-bottom:32px;} /* compensate fixed bars */

.visually-hidden{position:absolute !important; width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}