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

:root{
  --bg:#0f1419;
  --bg2:#161b22;
  --card:#1b232d;
  --text:#f5f7fa;
  --muted:#aeb8c4;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --primary:rgba(59,130,246,.16);
  --shadow:0 16px 40px rgba(0,0,0,.28);
  --radius:18px;
  --content:880px;
  --nav-h:70px;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-weight: 500;
}

strong {
  font-weight: 500!important;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

html,body{overflow-x:hidden}

body,
body.bg-dark.text-light{
  margin:0 !important;
  min-height:100vh;
  padding-top:calc(var(--nav-h) + 18px) !important;
  background:#000!important;
  color:var(--text) !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

img{max-width:100%}

.comment{animation:fadeIn .24s ease}
.reaction-count{margin-left:6px;font-weight:500}
.reaction-btn.active{
  background:linear-gradient(135deg,#2563eb,#3b82f6) !important;
  border-color:rgba(59,130,246,.8) !important;
  color:#fff !important;
  box-shadow:0 10px 20px rgba(37,99,235,.22);
}

.post-actions{display:flex;gap:8px;flex-wrap:wrap}

/* NAVBAR = SAME AS FEED */
.lastbros-navbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  z-index:1050 !important;
  background:#000 !important;
  padding:0 !important;
  backdrop-filter:none !important;
}

.lastbros-navbar-inner{
  max-width:1200px !important;
  min-height:var(--nav-h) !important;
  margin:0 auto !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.lastbros-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  flex:0 0 auto;
}

.lastbros-logo img{
  height:55px !important;
  display:block;
  padding-top:0 !important;
  filter:none !important;
}

.lastbros-nav-links{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}

.lastbros-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:6px 14px !important;
  border-radius:9999px !important;
  border:none !important;
  background:transparent !important;
  color:#e7e9ea !important;
  text-decoration:none !important;
  font-size:14px !important;
  font-weight:500 !important;
  transition:background .18s ease,transform .18s ease;
}

.lastbros-link:hover,
.lastbros-link:focus-visible{
  background:#181818 !important;
  color:#fff !important;
  transform:translateY(-1px);
}

.lastbros-link.danger{color:#f4212e !important}

/* LAYOUT */
.container,
.container.mt-4,
.container.mt-6,
.content-wrapper{
  width:100%;
  max-width:calc(var(--content) + 32px) !important;
  margin:0 auto !important;
  padding-left:16px !important;
  padding-right:16px !important;
}

form[method="get"],
form[onsubmit*="checkPostLimit"]{
  margin-left:auto;
  margin-right:auto;
}

form[style*="margin-top: 6rem"]{margin-top:0 !important}
form[style*="margin-top: 2rem"]{margin-top:18px !important}
form[style*="margin-bottom: 2rem"]{margin-bottom:18px !important}

.input-group{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.input-group>.form-control,
.input-group>.btn{
  border-radius:14px !important;
}

.form-control{
  min-height:50px !important;
  padding:.85rem 1rem !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.05) !important;
  color:#fff !important;
  box-shadow:none !important;
}

.form-control::placeholder{color:#93a0af !important}
.form-control:focus{
  border-color:rgba(59,130,246,.3) !important;
  background:rgba(255,255,255,.3) !important;
  box-shadow:0 0 0 .22rem var(--primary) !important;
}

.btn{
  min-height:50px !important;
  border-radius:14px !important;
  font-weight:500 !important;
  letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn-sm{
  min-height:40px !important;
  padding:.45rem .8rem !important;
  border-radius:12px !important;
}

.btn-light{
  background:linear-gradient(135deg,#fff,#dbe7ff) !important;
  color:#0f172a !important;
  border:0 !important;
  box-shadow:0 10px 22px rgba(219,231,255,.12);
}

.btn-outline-light{
  background:rgba(255,255,255,.03) !important;
  color:#fff !important;
  border-color:var(--border-strong) !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.22) !important;
}

.btn-warning{
  color:#1f1a00 !important;
  background:linear-gradient(135deg,#ffd24d,#f5b301) !important;
  border:none !important;
}

.btn-danger{
  background:linear-gradient(135deg,#ff7587,#ff4d64) !important;
  border:none !important;
}

/* CARDS */
.card,
.card.bg-secondary.text-light,
.modal-content,
.dropdown-menu,
.alert{
  background:rgb(11 13 16) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:22px !important;
  box-shadow:var(--shadow) !important;
}

.card{overflow:hidden;margin-bottom:16px !important}
.card-body{padding:1.1rem 1.1rem 1rem !important}
.card-body[style]{padding-left:1.1rem !important}

.rounded-circle{
  flex-shrink:0;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.3);
}

.post-content{
  margin:0 0 14px;
  padding-bottom:1rem !important;
  color:var(--text) !important;
  font-size:1rem;
  line-height:1.65;
  word-break:break-word;
  overflow-wrap:anywhere;
  border-bottom-color:rgba(255,255,255,.3) !important;
}

.comments{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.3);
}

.comment-list:empty{display:none}
.comment-form .form-control{min-height:44px !important}

.comment-item,
.comment,
.comment-list>div{
  border-radius:14px;
  overflow-wrap:anywhere;
}

.text-center button,
.comment-list .btn,
.comments .btn{
  border-radius:12px !important;
}

.d-flex.justify-content-between.align-items-center>div:last-child{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}

.d-flex.justify-content-between.align-items-center>div:last-child hr{display:none}

small,
small.text-light,
.text-light.ms-2{color:var(--muted) !important}

hr{
  border-color:rgba(255,255,255,.3) !important;
  opacity:1 !important;
}

footer{
  max-width:calc(var(--content) + 32px);
  margin:18px auto 0;
  padding:18px 16px 28px;
  text-align:center;
  font-size:.92rem;
  color:var(--muted);
}

footer a{
  display:inline-block;
  margin:4px 8px;
  color:var(--muted);
  text-decoration:none;
  transition:color .18s ease,transform .18s ease;
}

footer a:hover{
  color:#fff;
  transform:translateY(-1px);
  text-decoration:none;
}

/* TABLET */
@media (max-width:991.98px){
  .container,
  .container.mt-4,
  .container.mt-6,
  .content-wrapper{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .lastbros-nav-links{
    gap:8px !important;
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
  }

  .lastbros-link{
    padding:6px 10px !important;
    font-size:13px !important;
  }

  .d-flex.justify-content-between.align-items-center{gap:14px}
  .d-flex.justify-content-between.align-items-center>div:last-child{justify-content:flex-start}
}

/* MOBILE */
@media (max-width:767.98px){
  :root{--nav-h:70px}

  body,
  body.bg-dark.text-light{
    padding-top:calc(var(--nav-h) + 1px) !important;
  }

  .container,
  .container.mt-4,
  .container.mt-6,
  .content-wrapper{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .lastbros-navbar-inner{
    min-height:64px !important;
    padding:0 10px !important;
  }

  .lastbros-logo img{height:34px !important}

  .lastbros-nav-links{
    gap:6px !important;
    flex-wrap:wrap !important;
  }

  .lastbros-link{
    padding:6px 10px !important;
    font-size:13px !important;
  }

  .input-group{
    flex-direction:column !important;
  }

  .input-group>.form-control,
  .input-group>.btn{
    width:100% !important;
    margin-left:0 !important;
  }

  .card,
  .card.bg-secondary.text-light{border-radius:18px !important}

  .card-body,
  .card-body[style]{padding:1rem !important}

  .card-body .d-flex.align-items-center.mb-2{
    align-items:flex-start !important;
    gap:10px;
    flex-wrap:wrap;
  }

  .card-body .d-flex.align-items-center.mb-2 strong,
  .card-body .d-flex.align-items-center.mb-2 small{
    display:block;
  }

  .d-flex.justify-content-between.align-items-center{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .post-actions,
  .d-flex.justify-content-between.align-items-center>div:last-child{
    width:100%;
  }

  .post-actions .btn,
  .d-flex.justify-content-between.align-items-center>div:last-child .btn{
    width:100%;
  }

  .comments{padding:10px}
}

/* SMALL MOBILE */
@media (max-width:479.98px){
  .lastbros-navbar-inner{
    padding:0 8px !important;
    gap:8px !important;
  }

  .lastbros-nav-links{
    gap:4px !important;
  }

  .lastbros-link{
    padding:5px 8px !important;
    font-size:12px !important;
  }

  .form-control,
  .btn{min-height:48px !important}

  .btn-sm{min-height:42px !important}
  .post-content{font-size:.97rem}
  footer a{margin:5px 6px;font-size:.88rem}
}

/* === Unified post action buttons: like / dislike / comments === */
.post-action-compact,
.reaction-btn,
[id^="toggle-btn-"].btn,
.comments .btn,
.comment-list .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  gap: 6px !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}

.reaction-btn,
[id^="toggle-btn-"].btn {
  background: rgba(255,255,255,.03) !important;
  color: #fff !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}

.reaction-btn:hover,
[id^="toggle-btn-"].btn:hover,
.reaction-btn:focus-visible,
[id^="toggle-btn-"].btn:focus-visible {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
  transform: translateY(-1px);
}

.reaction-btn.active {
  background: linear-gradient(135deg,#2563eb,#3b82f6) !important;
  border-color: rgba(59,130,246,.82) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(37,99,235,.20) !important;
}

.reaction-count {
  margin-left: 2px !important;
  font-weight: 700 !important;
  min-width: 16px;
  text-align: center;
}

.d-flex.justify-content-between.align-items-center > div:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.d-flex.justify-content-between.align-items-center > div:last-child > .btn,
.d-flex.justify-content-between.align-items-center > div:last-child > .reaction-btn,
.d-flex.justify-content-between.align-items-center > div:last-child > [id^="toggle-btn-"] {
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .reaction-btn,
  [id^="toggle-btn-"].btn {
    width: auto !important;
    min-width: calc(50% - 6px);
  }

  .d-flex.justify-content-between.align-items-center > div:last-child {
    justify-content: flex-start !important;
  }
}

@media (max-width: 479.98px) {
  .reaction-btn,
  [id^="toggle-btn-"].btn {
    min-width: 100%;
  }
}