:root{
  --bg:#000; --panel:#16181c; --panel2:#1d1f23; --border:#2f3336;
  --text:#e7e9ea; --muted:#71767b; --blue:#1d9bf0; --blue-h:#1a8cd8;
  --red:#f91880; --hover:#16181c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:275px minmax(0,600px) 350px;gap:0;max-width:1265px;margin:0 auto;min-height:100vh}

/* Sidebar */
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:8px 12px;border-right:1px solid var(--border);gap:4px}
.logo{font-size:30px;padding:8px 12px;width:50px}
.navlink{display:flex;align-items:center;gap:18px;padding:12px;border-radius:9999px;font-size:20px;font-weight:500;transition:background .2s;width:fit-content}
.navlink:hover{background:var(--hover)}
.navlink .ic{font-size:22px}
.tweet-btn{background:var(--blue);color:#fff;border:none;border-radius:9999px;padding:14px;font-size:16px;font-weight:700;text-align:center;cursor:pointer;margin:12px 0;transition:background .2s}
.tweet-btn:hover{background:var(--blue-h)}
.tweet-btn.small{padding:8px 20px;margin:0}
.tweet-btn.block{width:100%}
.logout{margin-top:auto}
.me-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:9999px}
.me-card:hover{background:var(--hover)}
.me-meta{display:flex;flex-direction:column;overflow:hidden}
.me-meta strong{font-size:14px}
.me-meta span{color:var(--muted);font-size:13px}
.logout-btn{width:100%;margin-top:6px;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:9999px;padding:8px;cursor:pointer;font-size:13px}
.logout-btn:hover{color:var(--red);border-color:var(--red)}

/* Main */
.main{border-right:1px solid var(--border);min-height:100vh}
.topbar{position:sticky;top:0;background:rgba(0,0,0,.65);backdrop-filter:blur(12px);padding:14px 16px;border-bottom:1px solid var(--border);z-index:5}
.topbar h2{font-size:20px}
.back{margin-right:14px;font-size:20px}
.tabs{display:flex;margin:8px -16px -14px}
.tab{flex:1;text-align:center;padding:14px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent}
.tab.active{color:var(--text);border-bottom:2px solid var(--blue)}
.tab:hover{background:var(--hover)}

/* Composer */
.composer{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.composer-main{flex:1}
.composer textarea{width:100%;background:transparent;border:none;color:var(--text);font-size:19px;resize:none;outline:none;font-family:inherit}
.composer-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;border-top:1px solid var(--border);padding-top:10px}

/* Tweet */
.feed{display:flex;flex-direction:column}
.tweet{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background .15s}
.tweet:hover{background:#080808}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1d9bf0,#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff;flex-shrink:0}
.avatar.big{width:80px;height:80px;font-size:34px;border:4px solid var(--bg);margin-top:-40px}
.tweet-body{flex:1;min-width:0}
.tweet-head{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.name{font-weight:700}
.name:hover{text-decoration:underline}
.handle,.dot,.time{color:var(--muted)}
.tweet-text{display:block;margin:2px 0 8px;white-space:pre-wrap;word-wrap:break-word}
.actions{display:flex;gap:36px;align-items:center}
.actions form{display:inline}
.action{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px;padding:0;font-family:inherit}
.action:hover{color:var(--blue)}
.action.like:hover,.action.like.on{color:var(--red)}
.action.del:hover{color:var(--red)}
.action.like .ico{display:inline-block}
.action.like.pop .ico{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

/* Profile */
.profile-head{border-bottom:1px solid var(--border)}
.banner{height:140px;background:linear-gradient(135deg,#1d9bf0,#8b5cf6)}
.profile-info{padding:0 16px 16px}
.profile-info h2{margin-top:8px}
.bio{margin:8px 0}
.stats{display:flex;gap:18px;margin:10px 0;color:var(--muted)}
.stats strong{color:var(--text)}
.follow-btn{background:var(--text);color:#000;border:none;border-radius:9999px;padding:8px 20px;font-weight:700;cursor:pointer}
.follow-btn.following{background:transparent;color:var(--text);border:1px solid var(--border)}

/* Rail */
.rail{padding:12px 16px;display:flex;flex-direction:column;gap:16px}
.rail-card{background:var(--panel);border-radius:16px;padding:16px}
.rail-card h3{margin-bottom:8px}
.muted{color:var(--muted)}

/* Auth */
.auth{max-width:380px;margin:60px auto;padding:24px;text-align:center}
.auth h1{font-size:40px}
.auth h2{margin:12px 0 24px}
.auth form{display:flex;flex-direction:column;gap:14px}
.auth input{background:transparent;border:1px solid var(--border);border-radius:6px;padding:14px;color:var(--text);font-size:16px}
.auth input:focus{border-color:var(--blue);outline:none}
.auth p{margin-top:18px}
.auth a{color:var(--blue)}

/* Misc */
.flash{padding:12px 16px;margin:0;border-bottom:1px solid var(--border);font-size:14px}
.flash.error{background:#2d0b13;color:#f91880}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}
.user-row{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.user-row:hover{background:#080808}
.reply-box{border-bottom:1px solid var(--border)}

@media(max-width:1000px){.app{grid-template-columns:88px minmax(0,1fr)}.rail{display:none}.navlink span:not(.ic),.me-meta,.logo{display:none}.navlink{justify-content:center}}
@media(max-width:600px){.app{grid-template-columns:1fr}.sidebar{position:fixed;bottom:0;top:auto;height:auto;width:100%;flex-direction:row;justify-content:space-around;border-top:1px solid var(--border);border-right:none;z-index:10}.logout,.tweet-btn{display:none}.main{padding-bottom:60px}}

/* Landing (logged-out splash, X-style) */
.landing-body{background:var(--bg)}
.landing{display:grid;grid-template-columns:1fr 45%;min-height:100vh;max-width:1300px;margin:0 auto}
.landing-left{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#0a0a0a,#000)}
.landing-logo{font-size:min(28vw,320px);line-height:1}
.landing-right{display:flex;flex-direction:column;justify-content:center;padding:40px 60px}
.landing-hero{font-size:64px;font-weight:800;letter-spacing:-2px;margin-bottom:48px}
.landing-join{font-size:31px;font-weight:800;margin-bottom:24px}
.landing-actions{max-width:330px}
.landing-btn{display:block;text-align:center;border-radius:9999px;padding:13px;font-weight:700;font-size:15px;margin:12px 0}
.landing-btn.primary{background:var(--blue);color:#fff}
.landing-btn.primary:hover{background:var(--blue-h)}
.landing-btn.outline{background:transparent;color:var(--blue);border:1px solid var(--border)}
.landing-btn.outline:hover{background:rgba(29,155,240,.1)}
.landing-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:6px 0}
.landing-or::before,.landing-or::after{content:"";flex:1;height:1px;background:var(--border)}
.landing-signin{font-weight:700;margin:18px 0 4px}
@media(max-width:800px){.landing{grid-template-columns:1fr;text-align:center}.landing-left{padding:40px 0 0}.landing-logo{font-size:120px}.landing-right{align-items:center;padding:24px}.landing-hero{font-size:44px;margin-bottom:24px}.landing-actions{margin:0 auto}}