/* ======= Base ======= */
:root{
  --bg:#050915;
  --bg2:#07122a;
  --glass-bg:rgba(15,35,80,.35);
  --glass-brd:rgba(120,170,255,.35);
  --text:#e8f1ff;
  --muted:#9fb8ff;
  --accent:#4aa3ff;
  --accent-2:#1e6bff;
  --shadow:0 10px 30px rgba(0, 65, 255, .25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* ======= Background image ======= */
#backdrop{
  position:fixed; inset:0; z-index:-2;
  background-image: url('assets/background.jpg');
  background-size:cover; background-position:center;
  filter: brightness(.8) saturate(1.1);
}
/* soft overlay for readability */
#backdrop::after{
  content:''; position:absolute; inset:0; 
  background: rgba(0,0,0,.45);
}

/* ======= Layout ======= */
.container{
  min-height:100dvh;
  width:min(920px, 92vw);
  margin:0 auto;
  padding:24px clamp(12px, 3vw, 32px) 32px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:22px;
}
.header{
  display:flex; align-items:center; gap:18px;
  padding:18px 18px;
}
.header .title-wrap{line-height:1.05}
.header h1{
  font-size: clamp(26px, 5.5vw, 40px);
  margin:0;
  letter-spacing:.5px;
}
.header .accent{color:var(--accent)}
.subtitle{margin:6px 0 0; color:var(--muted)}

.avatar{
  width:80px; height:80px; border-radius:20px; object-fit:cover;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.15);
}

/* ======= Glass elements ======= */
.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-brd);
  border-radius:20px;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: var(--shadow);
}

/* ======= Buttons ======= */
.links{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:4px;
}
@media (min-width:680px){
  .links{ grid-template-columns: 1fr 1fr; }
}
.button{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  text-decoration:none; color:var(--text);
  font-weight:600; letter-spacing:.2px;
  font-size:15px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button .icon{font-size: 18px}
.button:hover{
  transform: translateY(-2px);
  background: linear-gradient(120deg, rgba(50,120,255,.45), rgba(20,70,200,.35));
  border-color: rgba(130,190,255,.7);
}
.button:active{transform: translateY(0) scale(.99)}

.footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
}
.footer .tiny{font-size:12px; color:var(--muted)}
.footer .mini{
  border:none; color:var(--text);
  padding:8px 12px; border-radius:12px; cursor:pointer;
  background: linear-gradient(160deg, rgba(40,120,255,.5), rgba(40,80,200,.35));
  border:1px solid var(--glass-brd);
  box-shadow: var(--shadow);
  font-size:14px;
}
.footer .mini:hover{opacity:.95; transform: translateY(-1px)}
.footer .mini:active{transform:none}

/* ======= Reduced motion ======= */
@media (prefers-reduced-motion: reduce) {
  .button, .footer .mini { transition:none }
}