:root { 
  --dark: #000000; 
  --normal: #080808; 
  --light: #101010; 
  --border: 1px solid #2f3336; 
  --color: #c0c2c3; 
}

.suspended-body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.suspended-container {
  width: 100%;
  padding: 10px;
}

.suspended-card {
  max-width: 500px;
  margin: auto;
  background: var(--light);
  border: 1px solid #2f3336;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.suspended-card h2 {
  margin-bottom: 10px;
}

.subtitle {
  color: var(--text-muted);
  margin-bottom: 25px;
}

.reason-box {
  background: rgba(255, 0, 0, 0.09);
  border: 2px solid rgba(255, 0, 0, 0.2);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 25px;
  font-weight: bold;
}

.btn-primary {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  background: #db1d23;
  color: white;
  font-weight: 500;
  margin-bottom: 20px;
  width: 200px;
}

.btn-primary:hover {
  opacity: 0.9;
}

.support {
  font-size: 15px;
  color: gray;
}

* {
  transition: background 0.2s ease;
}

body.no-scroll {
  overflow: hidden;
}

#log {
  color: grey;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

@font-face {
  font-family: "NaTaR";           
  src: url("/font/ABCGintoNormal-Regular-Trial-BF651b7b7389896.woff")  format("woff"),
  font-weight: normal; 
  font-style: normal;
  font-display: swap;   
}

body {
  font-family: 'arial', sans-serif;
  background: #f5f5f5;
  margin: 0;
  padding: 20px;
  line-height: 1.5;
  overflow-x: hidden;
  background: var(--dark);
  color: var(--color);
}

.container {
  max-width: 597px;
  margin: auto;
  position: relative;
  color: var(--color);
}

.checkp {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

@media (max-width: 700px) {
  #premiumbox {
    height: 100%;
    padding-top: 70px !important;
  }
  #getpremium {
    display: flex !important;
  }
  #premiumOverlay {
    z-index: 7;
  }
  .smallbar {
    width: 100vw;
    position: fixed;
    background: var(--dark);
    left: 0;
    right: 0;
    bottom: 0;
    height: 52px;
    border-top: var(--border);
    display: flex;
    justify-content: space-evenly;
  }

  .display, #whofollow, #premiumsvg {
    display: none;
  }

  .smallbar img {
    width: 25px;
    height: auto;
  }

  .comment-box,
  .user-box {
    padding: 15px !important;
  }

  .user-box {
    max-width: 90vw !important;
  }

  .container {
    padding: 0;
  }

  .container {
    border: none;
  }

  .comment-box {
    height: 100vh;
  }

  body {
    padding: 0;
  }

  .tweet {
    border: none !important;
    border-bottom: var(--border) !important;
  }

  .tweet:last-child {
    border: none;
  }

  #tweetbtn,
  .smallbar1, 
  .smallbar2, 
  #termsbtn {
    display: none !important;
  }

  .cont {
    border: none !important;
    border-radius: 0 !important;
    width: 100vw !important;
  }

  #iconpng {
    display: none;
  }
}

@media (min-width: 700px) {
  #main {
    gap: 12px;
  }
  .smallbar {
    position: fixed;
    background: var(--dark);
    top: 22px;
    width: 245px;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    height: fit-content;
    font-size:16px;
  }

  .smallbar div {
    margin: 0;
  }

  #homefilled {
    margin-top: 0;
  }

  .smallbar1 {
    position: fixed;
    background: var(--dark);
    bottom: 20px;
    width: 255px;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    height: fit-content
  }

  #account {
    margin: 0;
  }

  .smallbar2 {
    position: fixed;
    background: var(--dark);
    bottom: 95px;
    width: 255px;
    border: var(--border);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    height: fit-content;
    padding: 5px 0;
  }

  .smallbar .flexx:not(.smallbar .active) {
    border: 1px solid var(--dark);
  }

  .smallbar .active {
    background: var(--normal);
    border: var(--border);
  }

  .flexx {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 15px;
    border-radius: 15px;
    padding: 10px 15px;;
    cursor: pointer;
  }

  #termsbtn .flexx {
    margin: 0 15px !important;
  }

  .flexx:hover {
    background: var(--light)
  }

  #post {
    display: none;
  }

  .smallbar .flexx:first-child,
  .smallbar .flexx:nth-child(2) {
    margin-top: 20px;
  }

  .smallbar button {
    margin-bottom: 10px;
  }

  .smallbar img {
    width: 30px;
    height: auto;
    cursor: pointer;
  }

  .tweet:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .tweet:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  #sidebar {
    position: relative;
  }

  .container {
    min-width: 555px;
  }

  .comment-box {
    position: fixed;
  }
}

hr {
  border: var(--border);
}

#post {
  position: fixed;
  bottom: 70px;
  right: 17px;
  background: black;
  height: 60px;
  width: 60px;
  border-radius: 16px;
  border: 2px solid #2f3336;
  transition: opacity 0.2s ease, bottom 0.3s ease;
}

.attachment,
.attachment1,
.rt-attachment {
  cursor: pointer;
}

.hidden-input {
  display: none;
}

.no-margin {
  margin: 0;
  margin-bottom: 10px;
}

.little-margin {
  margin: 10px 0;
}

svg {
  margin-bottom: -3px;
}

#postBtn {
  margin: 0;
}

#appendComment,
#prizebox p,
#nanat1 span,
#meOverlay, #effectOverlay,
.overlay-box,
.notification span,
.folder-item,
.menu-box,
.comment-item,
#createCommunity,
#hmm, 
#openComRule,
input, 
textarea,
.tweet,
#comRule div,
#skibidicome,
header,
#followsBadge,
#my-description, #user-description,
#my-username, #username,
#my-name, #user-name,
#my-creation, #user-creation,
#my-status, #user-status,
#streak, #my-streak,
#user-balance, #my-balance {
  font-family: "NaTaR", sans-serif !important;
}

.tag-badge {
  font-family: arial, sans-serif
}

textarea {
  width: 100%;
  height: 100px;
  resize: none;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  box-sizing: border-box;
  border: var(--border);
  border-radius: 15px;
  background: var(--dark);
  color: var(--color);
  line-height: 1.5;
}

textarea:focus {
  outline: none;
}

button {
  padding: 7px;
  background: white;
  border-radius: 50px;
  border: none;
  color: black;
  border: none;
  cursor: pointer;
}

button:hover {
  background: #eee;
}

span {
  font-size:16px;
}

.hidden {
  display: none !important;
}

.attachment {
  margin-top: 5px;
  display: flex;
  width: auto;
  overflow: auto; /* show overflow */
  position: relative !important;
  z-index: 0;
  max-width: 500px;
}

@media (max-width: 700px) {
  .attachment {
    max-width: 280px;
  }
}

.attachment img {     /* force image height */
  width: auto;       /* keep aspect ratio */
  object-fit: cover; /* optional: zoom/crop */
  border-radius: 10px;
  max-height: 300px !important;
} 

#tweetOverlay .attachment img,
#retweetOverlay .attachment img,
#commentOverlay .attachment img {
  object-fit: contain !important
}

.vid {
  max-height: 300px;
}

.tweet-media {
  max-width: 500px;
  overflow:auto !important;
}

#appendTweet .tweet-media,
#appendTweet .attachment,
#appendComment .tweet-media,
#appendComment .attachment {
  max-width: 100%
}

@media (max-width: 700px) { 
  .tweet-media {
    max-width: 80vw !important;
  }
  .attachment img{
    max-height:280px !important;
  }
  #appendTweet .tweet-media,
  #appendTweet .attachment,
  #appendComment .tweet-media,
  #appendComment .attachment {
    max-width: 100% !important
  }
  .comment-item .attachment {
    min-width: 100%;
  }
}

.mediaOverlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.97);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mediaOverlay.hidden {
  display: none;
}

#overlayContent img,
#overlayContent video {
  height: auto;
  width: auto;
  max-width: 100vw;
  max-height: 100vh;
}

#closeOverlay {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  height: 40px;
  width: 40px;
  border: none;
  font-size: 22px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex {
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  margin-top: 10px;
}

.flex span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

label {
  cursor: pointer;
}

.close-btn {
  background: none;
  color: var(--color);
}

.no-bg {
  background: none;
  border: 1px solid white;
  color: white;
}

.link {
  background: none;
  color: #1a8cd8;
  padding: 0;
  margin: 10px 0;
}

a,
a:visited {
  color: #1a8cd8;
  text-decoration: none;
}

.close-btn:hover,
.no-bg:hover,
.link:hover {
  background: none;
}

.comment-box .attachment {
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .overlay, .overlay1 {
    z-index: 6;
  }

  .useroverlay {
    z-index: 4;
  }

  #post {
    z-index: 2;
  }

  .smallbar {
    z-index: 7;
  }
}

@media (min-width: 700px) {
  .smallbar, .smallbar1, .smallbar2 {
    z-index: 3;
  }

  .overlay, .overlay1 {
    z-index: 6;
  }

  .useroverlay {
    z-index: 4;
  }
}

.original-tweet-link {
  cursor: pointer;
}

.clamp-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}

.read-more {
  color: #1da1f2;
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
}

.useroverlay.hidden,
.sub-useroverlay.hidden {
  display: none;
}

.overlay, .overlay1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
}

.useroverlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 6;
}

.useroverlay:not(.useroverlay .user-box) {
  pointer-events: none;
}

.user-box {
  position: fixed;
  padding: 20px;
  width: 100%;
  max-width: 539px;
  overflow-x: hidden;
  border-radius: 15px;
  height: 100vh;
  overflow-y: auto;
  background: var(--dark);
  color: var(--color);
  position: relative;
  pointer-events: auto;
  border-right: var(--border);
  border-left: var(--border);
}

header {
  position: sticky;
  background: var(--dark);
  z-index: 7;
  padding-bottom: 1px;
  padding-top: 1px;
  top: 0;
  right: 0;
  left: 0;
}

@media (max-width: 700px) {
  .useroverlay .tweet:not(.useroverlay .tweet .retweet) {
    padding: 0 !important;
    padding-bottom: 15px !important;
  }
}

input {
  background: var(--dark);
  padding: 10px;
  border-radius: 10px;
  color: var(--color);
  border: var(--border);
  width: 100%;
  box-sizing: border-box;
  font-size:16px;
}

input:focus {
  outline: none;
}

#tweetPreview,
#retweetPreview-TWEETID,
#commentPreview {
  overflow-x: auto;
}

@media (max-width: 700px) {
  .smallbar {
    position: fixed;
    transition: bottom 0.4s ease;
    align-items: center;
  }
}

#timeline-header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.loader {
  width: 10px;
  height: 10px;
  border: 3px solid #ccc;
  border-top: 3px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.smallbar #unread {
  padding: 1px 3px;
  position: absolute;
  top: -3px;
  font-size: 11px;
  left: 18px;
  background: #04aa63;
  color:white;
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.1s;
}

.smallbar #unclaimed {
  height: 10px;
  width: 10px;
  position: absolute;
  color:white;
  top: 0;
  right: 0;
  background: #04aa63; 
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.1s;
}

.smallbar #unread.has-unread {
  opacity: 1;
}

.retweet {
  margin-bottom: 0 !important;
}

.svg {
  position: relative;
  padding: 0;
  margin: 0;
  height: 30px;
  width: 30px;
}

p.clamp-text {
  font-size:16px;
}
#welcomeOverlay {
  background: url("/image/ocean.gif") no-repeat center / cover;
  animation: pop 1s ease;
}

#welcomeOverlay .user-box {
  position: relative;
  overflow: hidden; 
}

#welcomeOverlay::before {
  content: "";
  position: absolute;
  inset: 0; 
  background: inherit; /
  filter: brightness(0.3);
  z-index: -1; 
}

@media (max-width: 700px) {
  #welcomeOverlay {
    z-index: 7;
  }
  #welcomeOverlay .user-box {
    box-sizing: border-box
  }
  #tweetOverlay .comment-box,
  #retweetOverlay .comment-box {
    min-height: 100vh;
    padding-top: 70px !important;
  }
}

#welcomeOverlay h2 {
  animation: popIn 1s ease;
}

#welcomeOverlay p {
  animation: popIn 1.5s ease;
}

#welcomeOverlay button {
  animation: popIn 2s ease;
}

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

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pop {
  from { opacity: 0; }
  to: { opacity: 1; }
}

p {
  word-wrap: break-word;
}

.effect-item {
  padding: 15px;
  display:flex;
  border: var(--border);
  border-radius: 15px;
  background: var(--light);
  flex-direction:column;
  text-align: center;
  gap: 10px;
}

#shopBtn,
#dcBtn,
#tosBtn,
#privBtn,
#bookmarkBtn {
  display: none !important;
}

@media (max-height: 675px) {
  #leaderboardsvg {
    display: none;
  }
  #bookmarksvg {
    display: none;
  }
  #bookmarkBtn {
    display: flex !important;
  }
}

@media (max-width: 700px) {
  #leaderboardsvg,
  #leaderboardfilled,
  #bookmarksvg,
  #bookmarkfilled {
    display: none;
  }
  #bookmarkBtn,
  #shopBtn,
  #dcBtn,
  #tosBtn,
  #privBtn {
    display: flex !important;
  }
}

a:visited {
  color: grey;
}

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

.skeleton-card {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  box-sizing: border-box;
  margin:25px 20px;
}

.skeleton-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.skeleton-avatar {
  height: 40px;
  width: 40px;
  border-radius: 10px;
  background: #2f3031;
  flex-shrink: 0;
}

.skeleton-header-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 10px;
}

.skeleton-dot {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #2f3031;
  margin-left: auto;
}

.skeleton-line {
  height: 17px;
  background: #2f3031;
  border-radius: 50px;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.long { width: 90%; }

.skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.skeleton-pill {
  height: 17px;
  border-radius: 20px;
  background: #2f3031;
  flex: 1;
  min-width: 50px;
}

.skeleton-pill.last {
  max-width: 20px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-line,
.skeleton-pill,
.skeleton-avatar,
.skeleton-dot {
  background: linear-gradient(90deg, #2f3031 25%, #3a3b3c 50%, #2f3031 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

.invisible {
  background: none;
}

.comment-item {
  padding: 15px 15px !important;
}

#commentList,
#replyList {
  margin:10px -20px;
}

#appendTweet,
#appendComment {
  margin: 0 -20px;
}

#appendTweet .tweet:not(.retweet),
#appendComment .comment {
  padding: 15px 20px !important;
  padding-top: 0 !important;
}

.comment-box .tweet:hover {
  background: none;
}

@media (max-width: 700px) {
  #commentList {
    margin:10px -15px;
  }
  #appendTweet,
  #appendComment {
    margin: 0 -15px;
  }
  #appendTweet .tweet:not(.retweet),
  #appendComment .comment {
    padding: 10px 15px !important;
    padding-top: 0 !important;
  }
}

.quotedTweet {
  margin:-15px 10px !important;
}

@media (max-width: 700px) {
  .quotedTweet {
    margin:-15px 5px !important;
  }
}

a:visited:not(.i) {
  color: #19a1f2;
}



@media (max-width:700px) {
  .skeleton-skibidi {
    background: var(--normal);
    margin: -30px -20px;
    padding: 0.1PX 20PX;
  }
  #communityOverlay .skeleton-skibidi { 
    margin: -30px;
    padding: 0.1px 30px;
  }
  #bookmarkOverlay .skeleton-skibidi {
    padding: 0.1px 20px;
  }
  .skeleton-skibidi:first-child:not(#bookmarkOverlay .skeleton-skibidi:first-child) {
    margin-top: 10px !important;
  }
  #bookmarkOverlay .skeleton-skibidi:first-child .skeleton-header {
    margin-top: 5px;
  }
  .skeleton-skibidi:last-child {
    margin-bottom: 10px !important;
  }
  #tagstweet .skeleton-card {
    margin-left: 10px;
    margin-right: 10px;
  }
  #tweetsView .skeleton-card {
    margin-left: 5px;
    margin-right: 5px;
  }
}

.spoiler-overlay {
  border-radius: 10px;
}

.poll-option {
  margin: 0 15px;
  width: calc(100% - 30px);
}

.poll-option-wrapper {
  padding: 0 15px;
}

.poll-option-wrapper .poll-option {
  margin: 0;
  margin-bottom: 10px;
}

select:focus {
  outline: none;
}

.comment-item .avatar {
  padding: 7px; 
  margin: -7px;
  background: black;         
  border-radius: 16px;       
} /* thicc */