/* BlueBlips - Classic Twitter 2013 Design */
:root {
  --sprite: url("https://abs.twimg.com/a/1381432172/t1/img/twitter_web_sprite_icons.png");
  --sprite-bgs: url("https://abs.twimg.com/a/1381432172/t1/img/twitter_web_sprite_bgs.png");
  --blue: #55acee;
  --blue-dark: #0271bf;
  --bg: #C0DEED;
  --card: #fff;
  --cb: rgba(0,0,0,.1);
  --text: #292f33;
  --sub: #66757f;
  --rowh: #f9fafb;
  --divider: #f0f3f4;
  --cbg: #f5f8fa;
  --sbg: #f9f9f9;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  color:var(--text);
  background-color:var(--bg);
  background-image:url("https://abs.twimg.com/images/themes/theme1/bg.png");
  background-position:left top;
  background-attachment:fixed;
  background-repeat:no-repeat;
  min-height:100vh;
  padding-top:52px;
}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Beta banner */
.beta-banner{
  background:linear-gradient(90deg,#1da1f2,#0084b4);
  color:#fff;
  text-align:center;
  padding:5px 14px;
  font-size:12px;
  position:fixed;
  top:40px;
  left:0;
  right:0;
  z-index:150;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}

/* Top navigation */
.topnav{
  background-image:var(--sprite-bgs);
  background-position:0 0;
  background-color:#252525;
  height:40px;
  box-shadow:0 2px 3px rgba(0,0,0,.3);
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
}
.topnav-inner{
  max-width:940px;
  margin:0 auto;
  display:flex;
  align-items:center;
  height:40px;
  padding:0 10px;
  gap:0;
}
.nav-bird{
  display:inline-block;
  width:24px;
  height:21px;
  background-image:var(--sprite);
  background-position:-40px 0;
  background-repeat:no-repeat;
  margin-right:6px;
  flex-shrink:0;
}
.nav-link{
  color:#bbb;
  text-decoration:none;
  font-size:12px;
  font-weight:bold;
  text-shadow:0 -1px 1px rgba(0,0,0,.75);
  padding:0 11px;
  height:40px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-right:1px solid #1a1a1a;
  box-shadow:1px 0 0 #444;
  white-space:nowrap;
}
.nav-link:hover{color:#fff;background:rgba(0,0,0,.2);}
.nav-link.active{
  background:rgba(0,0,0,.45);
  color:#fff;
  box-shadow:inset 0 -3px 0 var(--blue),1px 0 0 #444;
}
.ico-home{display:inline-block;width:21px;height:24px;background-image:var(--sprite);background-position:0 -50px;}
.ico-connect{display:inline-block;width:22px;height:24px;background-image:var(--sprite);background-position:-80px -50px;}
.ico-discover{display:inline-block;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23aaa'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm3.75 6.5l-2.12 5.3-5.3 2.12 2.12-5.3 5.3-2.12z'/%3E%3C/svg%3E") center/contain no-repeat;}
.nav-link.active .ico-discover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm3.75 6.5l-2.12 5.3-5.3 2.12 2.12-5.3 5.3-2.12z'/%3E%3C/svg%3E");}
.ico-msg{display:inline-block;width:21px;height:16px;background-image:url("https://abs.twimg.com/a/1383245068/t1/img/messages.png");background-position:0 0;}
.ico-me{display:inline-block;width:21px;height:24px;background-image:var(--sprite);background-position:-120px -50px;}
.nav-compose{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  background-image:var(--sprite-bgs);
  background-repeat:repeat-x;
  background-position:0 -140px;
  background-color:#2c77ba;
  border:1px solid #111;
  border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  margin:0 5px;
  text-decoration:none;
}
.nav-compose:hover{background-position:0 -170px;background-color:#1D68A7;}
.ico-compose{display:inline-block;width:22px;height:18px;background-image:var(--sprite);background-position:-200px -50px;}
.nav-search{position:relative;display:flex;align-items:center;margin-left:auto;}
.nav-search input{
  color:#444;
  background-color:#ccc;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
  border-radius:13px;
  border:none;
  padding:5px 28px 5px 12px;
  width:160px;
  height:26px;
  font-size:13px;
  outline:none;
}
.ico-search{
  position:absolute;
  right:6px;
  display:inline-block;
  width:12px;
  height:14px;
  background-image:var(--sprite);
  background-position:-20px -710px;
}
.notif-bubble{color:var(--blue);font-size:11px;font-weight:bold;}

/* Nav dropdown */
.nav-user-btn{
  position:relative;
  height:40px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  cursor:pointer;
  border-left:1px solid #1a1a1a;
  box-shadow:-1px 0 0 #444;
  color:#bbb;
  font-size:12px;
  font-weight:bold;
  text-shadow:0 -1px 1px rgba(0,0,0,.75);
  margin-left:5px;
}
.nav-user-btn:hover,.nav-user-btn.open{background:rgba(0,0,0,.2);color:#fff;}
.nav-user-avi{width:20px;height:20px;border-radius:3px;object-fit:cover;}
.nav-username{letter-spacing:-.2px;}
.nav-caret{
  display:inline-block;
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  margin-left:2px;
  opacity:.7;
}
.nav-dropdown{
  display:none;
  position:absolute;
  top:40px;
  right:0;
  width:230px;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:0 0 6px 6px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  z-index:400;
}
.nav-user-btn.open .nav-dropdown{display:block;}
.dd-header{
  padding:12px 14px;
  border-bottom:1px solid #eee;
  display:flex;
  align-items:center;
  gap:10px;
  background:#f9fafb;
}
.dd-header img{width:38px;height:38px;border-radius:5px;border:1px solid #e8e8e8;}
.dd-name{font-size:14px;font-weight:bold;color:#292f33;}
.dd-handle{font-size:12px;color:#66757f;}
.nav-dropdown a{
  display:flex;
  align-items:center;
  padding:9px 14px;
  font-size:13px;
  color:#292f33;
  border-bottom:1px solid #f0f3f4;
}
.nav-dropdown a:hover{background:#f5f8fa;color:var(--blue);}
.dd-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e0245e;
  color:#fff;
  font-size:10px;
  border-radius:9px;
  padding:1px 6px;
  margin-left:auto;
  min-width:18px;
}
.dd-sep{border:none;border-top:1px solid #e8e8e8;margin:3px 0;}
.dd-logout{color:#c0392b!important;}
.dd-logout:hover{background:#fff5f5!important;color:#a93226!important;}

/* Page layout */
.page-wrap{
  max-width:940px;
  margin:20px auto 40px;
  display:flex;
  gap:15px;
  padding:0 10px;
}
.sidebar{width:286px;flex-shrink:0;}
.main{flex:1;min-width:0;}

/* Boxes */
.s-box{
  background:var(--sbg);
  border:1px solid var(--cb);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:14px;
}
.s-box-head{
  padding:10px 14px;
  font-size:13px;
  color:var(--sub);
  font-weight:bold;
  border-bottom:1px solid var(--divider);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.s-box-head a{color:var(--blue);font-size:12px;font-weight:normal;}

/* Mini profile */
.mini-profile{
  background:var(--card);
  border:1px solid var(--cb);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:14px;
}
.mini-banner{
  height:46px;
  background:url('https://abs.twimg.com/images/themes/theme1/bg.png') center/cover no-repeat;
  background-color:#444;
}
.mini-body{padding:0 12px 12px;margin-top:-30px;text-align:center;}
.mini-avi{
  width:60px;
  height:60px;
  border-radius:5px;
  border:3px solid var(--card);
  object-fit:cover;
  display:block;
  margin:0 auto;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.mini-name{margin-top:6px;font-size:14px;font-weight:bold;color:var(--text);}
.mini-handle{font-size:12px;color:var(--sub);margin-bottom:5px;}
.mini-view{font-size:11px;color:var(--blue);text-decoration:none;}
.mini-stats{display:flex;border-top:1px solid var(--divider);}
.mini-stat{
  flex:1;
  padding:7px 4px;
  text-align:center;
  text-decoration:none;
  border-right:1px solid var(--divider);
}
.mini-stat:last-child{border-right:none;}
.mini-stat .sv{font-size:13px;font-weight:bold;color:var(--text);display:block;}
.mini-stat .sl{font-size:9px;color:var(--sub);text-transform:uppercase;display:block;}
.mini-stat:hover .sv{color:var(--blue);}

/* Trends */
.trend-item{padding:7px 14px;border-bottom:1px solid var(--divider);}
.trend-item:last-child{border-bottom:none;}
.trend-tag{font-weight:bold;color:var(--blue);font-size:13px;display:block;}
.trend-tag:hover{text-decoration:underline;}
.trend-count{font-size:11px;color:var(--sub);}

/* Who to follow */
.wtf-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 14px;
  border-bottom:1px solid var(--divider);
}
.wtf-row:last-child{border-bottom:none;}
.wtf-row img{width:36px;height:36px;border-radius:4px;object-fit:cover;flex-shrink:0;}
.wtf-info{flex:1;min-width:0;}
.wtf-info a{display:block;font-size:12px;font-weight:bold;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wtf-info a:hover{color:var(--blue);text-decoration:underline;}
.wtf-info span{font-size:11px;color:var(--sub);}
.wtf-follow{
  background:linear-gradient(#33bcef,#019ad2);
  border:1px solid #057ed0;
  color:#fff;
  text-shadow:0 -1px 1px rgba(0,0,0,.2);
  border-radius:4px;
  padding:3px 8px;
  font-size:11px;
  font-weight:bold;
  text-decoration:none;
}
.wtf-follow:hover{background:linear-gradient(#2daddc,#0271bf);}
.wtf-following{
  background:linear-gradient(#f5f5f5,#e0e0e0);
  border:1px solid #ccc;
  color:#555;
  border-radius:4px;
  padding:3px 8px;
  font-size:11px;
  font-weight:bold;
  text-decoration:none;
}
.wtf-following:hover{background:linear-gradient(#ffe0e0,#f5c0c0);border-color:#e0a0a0;color:#c0392b;}

/* Mentions */
.mention-row{
  display:flex;
  gap:9px;
  padding:8px 14px;
  border-bottom:1px solid var(--divider);
  font-size:13px;
}
.mention-row:last-child{border-bottom:none;}
.mention-row img{width:30px;height:30px;border-radius:4px;object-fit:cover;flex-shrink:0;}
.m-name{font-weight:bold;color:var(--blue);font-size:12px;}
.m-name:hover{text-decoration:underline;}
.m-text{color:var(--sub);margin-top:1px;font-size:12px;line-height:1.3;}
.empty-msg{padding:12px 14px;color:var(--sub);font-size:13px;}

/* Compose box */
.compose-box{
  background:var(--cbg);
  border:1px solid var(--cb);
  border-radius:6px;
  padding:14px;
  margin-bottom:14px;
}
.compose-box textarea{
  width:100%;
  height:60px;
  border:1px solid #ccc;
  border-radius:3px;
  padding:9px;
  resize:none;
  font-family:inherit;
  font-size:14px;
  color:#777;
  outline:none;
}
.compose-box textarea:focus{border-color:#56b4ef;box-shadow:0 0 6px rgba(82,168,236,.4);}
.compose-footer{
  margin-top:9px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.compose-footer input[type="file"]{font-size:11px;color:var(--sub);}
.tweet-btn{
  background:linear-gradient(#33bcef,#019ad2);
  border:1px solid #057ed0;
  color:#fff;
  text-shadow:0 -1px 1px rgba(0,0,0,.2);
  border-radius:4px;
  padding:6px 18px;
  font-weight:bold;
  font-size:13px;
  cursor:pointer;
}
.tweet-btn:hover{background:linear-gradient(#2daddc,#0271bf);}

/* Feed tabs */
.feed-card{background:var(--card);border:1px solid var(--cb);border-radius:6px;overflow:hidden;}
.feed-tabs{display:flex;border-bottom:1px solid var(--divider);padding:0 14px;}
.feed-tabs a{
  text-decoration:none;
  color:var(--sub);
  font-size:12px;
  font-weight:bold;
  padding:11px 14px 9px;
  border-bottom:2px solid transparent;
}
.feed-tabs a.active{color:var(--text);border-bottom-color:var(--blue);}
.feed-tabs a:hover{color:var(--text);}

/* Tweet row */
.tweet-row{
  display:flex;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--divider);
  position:relative;
}
.tweet-row:last-child{border-bottom:none;}
.tweet-row:hover{background:var(--rowh);}
.t-avi{width:46px;height:46px;border-radius:5px;object-fit:cover;flex-shrink:0;}
.t-body{flex:1;min-width:0;}
.t-name{font-weight:bold;color:var(--text);font-size:14px;text-decoration:none;}
.t-name:hover{color:var(--blue);text-decoration:underline;}
.t-handle{color:var(--sub);font-size:13px;margin-left:4px;}
.t-text{margin-top:4px;font-size:14px;color:var(--text);line-height:1.4;word-wrap:break-word;}
.t-text a{color:var(--blue);text-decoration:none;}
.t-text a:hover{text-decoration:underline;}
.t-img{margin-top:8px;max-width:100%;border-radius:5px;border:1px solid var(--divider);display:block;}

/* Retweet label */
.rt-label{
  font-size:11px;
  color:var(--sub);
  padding:4px 14px 0;
  display:flex;
  align-items:center;
  gap:4px;
}
.rt-label-icon{display:inline-block;width:14px;height:10px;background-image:var(--sprite);background-position:-30px -280px;}

/* Action buttons */
.t-actions{margin-top:8px;display:flex;gap:0;align-items:center;}
.t-act{
  color:#aab8c2;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 12px 3px 0;
  background:none;
  border:none;
  font-family:inherit;
  font-size:12px;
  transition:color .15s;
}
.t-act.reply:hover{color:#1da1f2;}
.t-act.rt-btn:hover,.t-act.rt-btn.rt-active{color:#17bf63;}
.t-act.fav-btn:hover,.t-act.fav-btn.fav-active{color:#e0245e;}
.ico-reply{display:inline-block;width:16px;height:16px;background-image:var(--sprite);background-position:0 -280px;}
.ico-rt{display:inline-block;width:22px;height:16px;background-image:var(--sprite);background-position:-30px -280px;}
.ico-fav{display:inline-block;width:16px;height:16px;background-image:var(--sprite);background-position:-60px -280px;}

/* RT / like corners */
.rt-corner{
  position:absolute;
  top:8px;
  right:12px;
  font-size:10px;
  color:#17bf63;
  display:flex;
  align-items:center;
  gap:3px;
  font-weight:bold;
}
.like-corner{
  position:absolute;
  top:8px;
  right:60px;
  font-size:10px;
  color:#e0245e;
  display:flex;
  align-items:center;
  gap:3px;
  font-weight:bold;
}

/* Comment thread */
.comment-thread{margin-top:8px;border-left:2px solid var(--divider);padding-left:10px;}
.comment-bubble{
  background:var(--cbg);
  padding:5px 9px;
  border-radius:4px;
  margin-bottom:4px;
  font-size:12px;
  border:1px solid var(--divider);
}
.reply-form{display:none;margin-top:5px;}
.reply-input{
  width:100%;
  border:1px solid #ccc;
  border-radius:3px;
  padding:5px 8px;
  font-size:12px;
  outline:none;
  font-family:inherit;
}
.reply-input:focus{border-color:#56b4ef;}

/* Footer */
.footer-links{
  text-align:center;
  font-size:11px;
  color:#999;
  padding:10px 0 20px;
}
.footer-links a{color:#999;margin:0 4px;}
.footer-links a:hover{color:#555;}