:root{
  --bg:#1f2024; --panel:#25272c; --card:#2b2e34; --text:#e9edf1; --muted:#9aa6b2; --accent:#ff6a00; --line:#3a3d44;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--text);text-decoration:none} a:hover{opacity:.9}
.topbar{position:sticky;top:0;z-index:20;background:#17181b;border-bottom:1px solid #000}
.topbar-inner{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--accent);font-size:20px;white-space:nowrap}
.brand .dot{width:18px;height:18px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px #0002}
.search{flex:1;display:flex;min-width:280px;max-width:720px;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.search input{flex:1;border:0;background:transparent;color:var(--text);padding:10px 14px;font-size:14px;outline:none}
.search button{background:var(--accent);border:0;color:#fff;padding:8px 14px;margin:6px;border-radius:10px;cursor:pointer}
.top-actions{display:flex;align-items:center;gap:16px;color:var(--muted);white-space:nowrap;position:relative}
.container{display:grid;grid-template-columns:300px minmax(0,720px) 330px;gap:20px;max-width:1240px;margin:18px auto;padding:0 16px}
.desktop-only{display:block} .mobile-only{display:none !important}
.card{background:var(--card);border-radius:16px;padding:16px;border:1px solid #000;box-shadow:0 2px 0 #0005}
.card h3,.card h2{margin:0 0 10px 0} .card + .card{margin-top:16px}
.left-menu .item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#eaeef3}
.left-menu .item:hover{background:var(--panel)}
.left-menu .item .icon{width:18px;text-align:center;color:#cdd3dc}
.profile-card .avatar{width:46px;height:46px;border-radius:999px;background:#3a3d44;display:inline-block;vertical-align:middle;margin-right:10px}
.profile-card .handle{color:#cfd6de;font-size:13px;margin-top:2px}
.progress{height:8px;background:#16171a;border-radius:8px;overflow:hidden}
.progress > i{display:block;height:100%;width:45%;background:var(--accent)}
.btn{background:var(--accent);border:0;color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.btn.block{width:100%}
.composer{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:12px;display:flex;gap:10px;align-items:center}
.composer .input{flex:1;display:flex;align-items:center;background:#1b1c20;border-radius:18px;border:1px solid var(--line);padding:6px 10px;color:#bac3cd}
.composer input[type=text]{flex:1;background:transparent;border:0;color:#dfe5ec;outline:none}
.icon-btn{background:transparent;border:0;color:#cfd6de;padding:6px 8px;cursor:pointer;border-radius:10px}
.icon-btn:hover{background:#262a31}
.composer .hidden{display:none}
.post{background:var(--card);border-radius:18px;padding:14px 16px;border:1px solid #000;box-shadow:0 2px 0 #0005;margin:16px 0}
.post .top{display:flex;gap:10px;align-items:center}
.post .avatar{width:36px;height:36px;border-radius:999px;background:#3a3d44}
.post .user{font-weight:700}
.post .meta{color:var(--muted);font-size:12px}
.post .tag{background:#2f3238;border:1px solid var(--line);color:#dfe5ec;border-radius:16px;padding:2px 8px;font-size:12px;margin-left:6px}
.post .body{margin:10px 0 8px 0;color:#e9edf1}
.post .img{background:#2a2c31;border-radius:14px;border:1px solid var(--line);height:320px}
.post .counts{display:flex;gap:22px;color:#cbd2db;font-size:14px;margin-top:8px}
.post .counts span{display:flex;align-items:center;gap:6px}
.sidebar .card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.sidebar .card .subtle{color:var(--muted);font-size:13px;margin-bottom:6px}
.sidebar .trending .tag{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;margin:6px 0;border-radius:10px;background:#26292f;border:1px solid var(--line);color:#ffb377}
.sidebar .trending .tag:hover{background:#2a2e35}
.sidebar .trending .tag .count{color:var(--muted);font-size:12px}
.sidebar .leaderboard ol{list-style:none;margin:0;padding:0}
.sidebar .leaderboard li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px dashed #333}
.sidebar .leaderboard li:first-child{border-top:0}
.sidebar .leaderboard .name{display:flex;align-items:center;gap:10px;color:#e9edf1}
.sidebar .leaderboard .rank{width:22px;height:22px;border-radius:50%;background:#1b1d21;border:1px solid #343741;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#cfd6de}
.sidebar .leaderboard .score{color:#cbd2db}
.mobile-nav{position:fixed;left:0;right:0;bottom:0;background:#17181b;border-top:1px solid #000;display:flex;justify-content:space-around;padding:12px 0;z-index:15}
.fab{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:999px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:24px;box-shadow:0 6px 0 #0007;z-index:16}
@media (max-width: 1024px){
  .container{grid-template-columns:1fr;max-width:860px}
  .desktop-only{display:none !important}
  .mobile-only{display:flex !important}
  .composer{margin:8px 0}
  .top-actions{display:none}
  .search{max-width:none}
}