:root{
  --bg-gradient:    linear-gradient(145deg,#0c1118,#0e141c);
  --sidebar-bg:     rgba(20,25,34,0.85);
  --card-bg:        rgba(22,28,38,0.8);
  --border-color:   rgba(60,70,90,0.3);
  --hover-glow:     rgba(47,129,247,0.35);
  --accent:         #2f81f7;
  --text:           #e0e6ef;
  --text-subtle:    #8a93a5;
  --transition:     all .25s ease;
  --blur:           8px;
  --radius:         12px;
  --shadow:         0 4px 20px rgba(0,0,0,.35);
}

/* BASE RESET */
*{
  box-sizing:border-box;
  transition:var(--transition);
}

/* GLOBAL BODY */
body{
  margin:0;
  height:100vh;
  display:flex;
  overflow:hidden;
  background:var(--bg-gradient);
  color:var(--text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji";
}

/* LAYOUT */
.container{
  display:flex;
  width:100%;
  overflow:hidden;
}

/* SIDEBAR */
aside{
  width:220px;
  padding:.8rem .9rem;
  background:var(--sidebar-bg);
  backdrop-filter:blur(var(--blur));
  height:100vh;
  border-right:1px solid var(--border-color);
  display:flex;
  flex-direction:column;
  border-radius:0 var(--radius) var(--radius) 0;
}

/* RIGHT SIDEBAR */
.right-sidebar{
  width:280px;
  padding:.8rem;
  background:var(--sidebar-bg);
  backdrop-filter:blur(var(--blur));
  height:100vh;
  border-left:1px solid var(--border-color);
  border-radius:var(--radius) 0 0 var(--radius);
}

/* SECTION TITLES */
.section{
  margin-bottom:0.9rem;
}

.section-title{
  font-size:.9rem;
  font-weight:600;
  color:var(--text-subtle);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:.8rem;
}

/* TABS */
.tab{
  display:flex;
  align-items:center;
  padding:.45rem .6rem;
  font-size: 1rem;
  border-radius:6px;
  margin-bottom:.2rem;
  color:var(--text);
  cursor:pointer;
}

.tab i{
  margin-right:10px;
  width:16px;
  font-size:.9rem;
  color:var(--accent);
}

.tab:hover{
  background: rgba(47,129,247,0.08);
}

.tab.active{
  background: rgba(47,129,247,0.14);
  border-left:3px solid var(--accent);
  padding-left:.45rem;
}

/* TAB COUNTS */
.tab-count{
  margin-left:auto;
  font-size:.65rem;
  padding:.05rem .4rem;
  border-radius:20px;
  background: rgba(47,129,247,0.12);
  color:var(--text-subtle);
}

/* MAIN CONTENT — FIXED ALIGNMENT */
main{
  flex:1;
  overflow-y:auto;
  padding:1.2rem 1.5rem;
  backdrop-filter: blur(var(--blur));
}

/* SEARCH BAR */
.search-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:1.2rem;
}

.search-bar{
  flex:1;
  height:42px;
  padding-left:2.5rem;
  border-radius:6px;
  border:1px solid var(--border-color);
  background:var(--card-bg);
  color:var(--text);
  font-size:.9rem;
}

.search-wrapper i{
  position:absolute;
  top:50%;
  left:16px;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--text-subtle);
}

.search-inner{
  display:flex;
  align-items:center;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:10px;
  height:44px;
  width:100%;
  overflow:hidden;
}

.search-inner input{
  flex:1;
  border:none;
  background:transparent;
  padding-left:42px;
  padding-right:6px;
  font-size:.9rem;
  color:var(--text);
}

.search-inner input:focus{
  outline:none;
}

/* SIDEBAR FOOTER TITLE */
.sidebar-title {
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  padding: .6rem .5rem;
  margin-top: auto;
  margin-bottom: .6rem;
  background: rgba(22, 28, 38, 0.55);
  border: 1px solid rgba(60, 70, 90, 0.35);
  border-radius: 8px;
  color: var(--text);
  letter-spacing: .05em;
  backdrop-filter: blur(8px);
}

/* REPO BOXES */
.repo-box{
  display:flex;
  flex-direction:column;
  padding:.9rem 1rem;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:7px;
  margin-bottom:.2rem;
  color:var(--text);
  text-decoration:none;
}

/* HOVER EFFECT */
.repo-box:hover{
  border-color: rgba(47,129,247,0.45);
  background: rgba(47,129,247,0.10);
  box-shadow: 0 0 10px rgba(47,129,247,0.25);
  transform: translateY(-2px);
}

.repo-box .title{
  font-size:.95rem;
  font-weight:600;
  margin:0 0 .3rem 0;
}

.repo-box .description{
  font-size:.8rem;
  color:var(--text-subtle);
  margin:0 0 .6rem 0;
  line-height:1.35;
}

.repo-box .tag-container{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-wrap:wrap;
  font-size:.75rem;
}

.platform-tag{
  padding:.15rem .45rem;
  border-radius:12px;
  font-size:.65rem;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.03);
  color:var(--text);
}

.platform-tag.steam{
  background:#1b2838;
  border-color:#1b2838;
  color:#fff;
}

.platform-tag.xbox{
  background:#107C10;
  border-color:#107C10;
  color:#fff;
}

.platform-tag.both{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.repo-box .last-updated{
  margin-left:auto;
  font-size:.7rem;
  color:var(--text-subtle);
  white-space:nowrap;
}

/* TAB CONTENT */
.tab-box{
  display:none;
  flex-direction:column;
  gap:.6rem;
}

.tab-box.active{
  display:flex;
}

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* DIVIDER */
.divider{
  height:1px;
  background:var(--border-color);
  margin:1rem 0;
}

/* HIDE SCROLLBARS */
main::-webkit-scrollbar{ width:0; }
main{ scrollbar-width:none; -ms-overflow-style:none; }

/* RESPONSIVE FIXES — MAIN ALWAYS ALIGNED */
@media (max-width:1200px){
  .right-sidebar{ display:none; }
  main{ padding:1.2rem 1.5rem; }
}

@media (max-width:900px){
  aside{
    width:65px;
    padding:.6rem;
  }

  .tab span,
  .section-title{
    display:none;
  }

  .tab i{
    margin:0 auto;
  }

  main{ padding:1rem; }
}

@media (max-width:600px){
  aside{ display:none; }
  main{ width:100%; padding:1rem; }
}

/* REMOVE ALL UNDERLINES */
a,
.tab,
.repo-box{
  text-decoration:none !important;
}

/* MAIN CONTENT INNER WRAPPER */
.content-inner {
  width: 100%;
  max-width: 860px;   /* you can adjust this */
  margin: 0 auto;     /* keeps it centered in the middle pane */
  padding: 0;         /* ensures perfect alignment to CONTENT title */
}