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

:root{
  --bg:#101216;
  --bg2:#171a21;
  --border:#2a475e;
  --text:#c7d5e0;
  --muted:#97a6b2;
  --accent1:#66c0f4;
  --accent2:#2a475e;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Ubuntu',sans-serif;}

a{color:var(--accent1);text-decoration:none}
a:hover{color:#8ac9f8}

/* Header */
.steam-nav{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--bg2);color:var(--text);
  padding:10px 16px;border-bottom:2px solid var(--border);
}
.nav-left{display:flex;gap:14px;align-items:center}
.nav-logo{width:36px}
.nav-title{font-weight:700;color:#fff}
.nav-link{color:#cfe7f8;opacity:.9}
.nav-right{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%}
.nav-btn{
  background:linear-gradient(to bottom,var(--accent1),var(--accent2));
  padding:6px 12px;border-radius:3px;color:#fff;font-weight:600;border:none
}
.username{color:#fff}

/* Container + footer */
.steam-container{max-width:1000px;margin:1.2rem auto 5rem;padding:0 1rem}
.steam-footer{margin:2rem 0 6rem;text-align:center;color:var(--muted)}

/* Buttons */
.btn-primary{
  background:linear-gradient(to bottom,var(--accent1),var(--accent2));
  color:#fff;border:none;border-radius:3px;padding:.6rem 1.1rem;font-weight:700;cursor:pointer
}
.btn-secondary{
  background:var(--accent2);color:#c7d5e0;border:none;border-radius:3px;padding:.6rem 1rem;cursor:pointer
}
.btn-small{background:var(--accent1);color:#001921;padding:.35rem .7rem;border-radius:3px}

/* Cards + grids */
.steam-card{background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:1rem;margin:.8rem 0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.event-card{background:var(--bg2);border:1px solid var(--border);border-radius:4px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.event-cover{height:140px;background-size:cover;background-position:center}
.event-body{padding:.8rem}

/* Sections */
.section-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);margin:1rem 0 1rem}

/* Forms & Friends */
label{display:block;margin:.8rem 0 .3rem;font-weight:600}
input, textarea{width:100%;padding:.6rem;background:#0d1117;border:1px solid var(--border);color:var(--text);border-radius:3px}
textarea{min-height:80px}
.friend-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.friend-row img{width:36px;height:36px;border-radius:50%}
.loading{color:var(--accent1)}
.list{list-style:none;padding:0;margin:0}
.list li{padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.friends-section-title{margin:1.2rem 0 .4rem;color:#e4f1fb}

/* Hero */
.hero{padding:2rem;background:linear-gradient(180deg,#111826 0%,#0f141b 100%);border:1px solid var(--border);border-radius:6px}

/* Library */
.library-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);margin:1rem 0 1rem}
.pill{background:#0d1117;border:1px solid var(--border);border-radius:999px;padding:.3rem .7rem;color:var(--muted)}
.pill-accent{color:#fff;background:var(--accent2);padding:.15rem .4rem;border-radius:6px;margin-left:.3rem}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.library-item{background:#1b1d23;border-radius:6px;overflow:hidden;position:relative;border:1px solid #222b36}
.library-item img{width:100%;height:160px;object-fit:cover;display:block}
.library-title{position:absolute;bottom:0;width:100%;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));color:#fff;font-size:.78rem;padding:.4rem}

/* Mobile tab bar */
.mobile-tabbar{
  position:fixed;bottom:0;left:0;right:0;height:56px;background:#151821;border-top:1px solid #222c39;
  display:flex;justify-content:space-around;align-items:center;z-index:50
}
.mobile-tabbar a{color:#c7d5e0;font-size:20px}
@media(min-width:900px){.mobile-tabbar{display:none}}