:root{
  /* Finobe-inspired purple theme (Crapblox purple) */
  --bg:#0f0f12;        /* deep background */
  --bg-soft:#17171a;   /* slightly lighter panel bg */
  --card:#1b1b1e;      /* card background */
  --muted:#9a9a9a;
  --accent:#7d3aa6;    /* your Crapblox purple */
  --accent-2:#5a2a7a;  /* darker purple for gradients */
  --border:#262626;
  --text:#eaeaea;
  --navbar-bg:linear-gradient(180deg,var(--accent),var(--accent-2));
  --success:#5cb85c;
  --warning:#f0ad4e;
  --danger:#d9534f;
}

/* reset simples */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Segoe UI", Roboto, Arial, sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

/* HEADER */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 18px;
  background:var(--navbar-bg);
  border-bottom:1px solid rgba(0,0,0,0.35);
  box-shadow:0 2px 0 rgba(0,0,0,0.45);
  position:sticky; top:0; z-index:10;
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  max-width: 400px;
  margin: 40px auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  
}

.login-card input
{
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #121212;
    color: var(--text);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:36px;height:36px;border-radius:4px;object-fit:cover;border:1px solid rgba(0,0,0,0.25)}
.brand-title{font-weight:700;font-size:18px;letter-spacing:0.6px;color:#ffe8ff}
.top-nav{display:flex;gap:12px;margin-left:14px}
.top-nav .nav-item{color:#ffffffaa;text-decoration:none;padding:6px 8px;border-radius:3px;font-size:14px}
.top-nav .nav-item:hover{background:rgba(255,255,255,0.03)}

/* header right */
.header-right{display:flex;align-items:center;gap:12px}
.coins{font-size:14px;color:#fff;opacity:0.95}
.profile{display:flex;align-items:center;gap:8px}
.avatar-sm{width:30px;height:30px;border-radius:4px}

/* PAGE LAYOUT */
.page{
  display:grid;
  grid-template-columns:260px 1fr 310px;
  gap:18px;
  padding:18px;
  max-width:1280px;
  margin:20px auto;
}

/* CARDS */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  padding:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,0.02) inset;
}

/* Finobe-style components */
.finobe-carousel{position:relative;overflow:hidden;border-radius:6px;border:1px solid var(--border);background:linear-gradient(180deg,var(--bg-soft),var(--card));}
.finobe-carousel .slides{display:flex;transition:transform .45s cubic-bezier(.2,.9,.2,1);}
.finobe-carousel .slide{min-width:100%;display:block}
.finobe-carousel img{width:100%;height:220px;object-fit:cover;display:block}
.carousel-controls{position:absolute;left:12px;right:12px;top:0;bottom:0;pointer-events:none;display:flex;align-items:center;justify-content:space-between}
.carousel-controls button{pointer-events:auto;background:rgba(0,0,0,0.35);border:0;color:var(--text);padding:8px;border-radius:6px;cursor:pointer}

.tabs{display:flex;gap:6px;border-bottom:1px solid rgba(255,255,255,0.03);margin-bottom:12px}
.tabs button{background:transparent;border:0;padding:8px 12px;color:var(--muted);cursor:pointer;border-radius:4px}
.tabs button.active{color:var(--text);background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 6px 18px rgba(125,58,166,0.08)}

.vote-bar{height:10px;background:#0c0c0c;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.vote-bar .up{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));display:inline-block}
.vote-bar .down{height:100%;background:#2a2a2a;display:inline-block}

.badge{display:inline-block;padding:6px 8px;border-radius:12px;font-size:12px;background:rgba(125,58,166,0.14);color:var(--accent);border:1px solid rgba(125,58,166,0.12)}

.game:hover{background:linear-gradient(90deg, rgba(125,58,166,0.04), rgba(125,58,166,0.02)); border-color:rgba(125,58,166,0.12); transform:translateY(-3px); transition:all 0.14s ease}

/* carousel overlay */
.slide-overlay{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.slide-overlay .slide-title{font-size:18px;font-weight:700;color:var(--text);text-shadow:0 2px 10px rgba(0,0,0,0.6)}
.slide-overlay .play-btn{background:var(--accent);color:white;padding:8px 12px;border-radius:4px;text-decoration:none;font-weight:700;border:1px solid rgba(0,0,0,0.12)}
.finobe-carousel .slide{position:relative}
.tab-content{padding:8px 0}


/* LEFT SIDEBAR */
.left-sidebar .user-card .user-top{display:flex;gap:12px;align-items:center}
.avatar-lg{width:84px;height:84px;border-radius:4px;object-fit:cover}
.user-name{font-size:16px}
.news-list{list-style:none;padding:8px 0;margin:8px 0 0 0}
.news-list li{padding:8px 0;border-top:1px solid rgba(255,255,255,0.02)}
.news-list a{color:var(--text);text-decoration:none;font-weight:600}
.news-list .meta{font-size:12px;color:var(--muted);margin-top:4px}



/* FRIENDS (main) */
.friends{padding-bottom:12px}
.friends-list{display:flex;gap:12px;align-items:center;overflow:hidden}
.friend{width:72px;text-align:center}
.friend img{width:72px;height:72px;border-radius:4px;object-fit:cover;border:1px solid var(--border)}
.friend-name{font-size:13px;margin-top:6px}
.friend.more{display:flex;align-items:center;justify-content:center;background:#232323;border:1px dashed var(--border);width:72px;height:72px;border-radius:4px;color:var(--muted)}

/* FEED */
.feed-card form{display:flex;gap:8px;align-items:center}
.feed-card input[type="text"]{
  flex:1;padding:10px;border:1px solid var(--border);background:#121212;border-radius:4px;color:var(--text)
}
button.submit{background:var(--accent);border:none;padding:10px 12px;border-radius:4px;color:white;font-weight:600;cursor:pointer}
button.submit:hover{opacity:0.95}
.feed-items{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.feed-item{display:flex;gap:12px;align-items:flex-start;padding:8px;border-top:1px solid rgba(255,255,255,0.02)}
.feed-avatar{width:44px;height:44px;border-radius:4px;object-fit:cover}
.feed-author{font-weight:700}
.feed-text{margin-top:4px;color:#e8e8e8}
.muted{color:var(--muted)}
.small{font-size:12px}

/* RIGHT SIDEBAR */
.recommended h3{margin-top:0}
.games-list{list-style:none;padding:8px;margin:0;display:flex;flex-direction:column;gap:8px}
.game{display:flex;gap:10px;align-items:center;padding:6px;border-radius:4px;cursor:pointer;border:1px solid transparent}
.game img{width:48px;height:48px;border-radius:3px;object-fit:cover}
.game .game-title{font-weight:600}
.game:hover{background:#222; border-color:var(--border); transform:translateY(-1px); transition:all 0.12s ease}

/* small cards */
.card.small{padding:12px}
.btn{display:inline-block;padding:8px 10px;border-radius:3px;background:#242424;color:var(--text);text-decoration:none;margin-right:8px;border:1px solid var(--border)}
.btn.ghost{background:transparent;border:1px dashed var(--border)}

/* RESPONSIVE */
@media (max-width:1000px){
  .page{grid-template-columns:1fr; padding:12px}
  .right-sidebar{order:3}
  .left-sidebar{order:1}
  .main-column{order:2}
}