/* ============================================================
   FORO UBRE
   INDEX.CSS
   iOS 27 / Liquid Glass / Carbon / Depth
   ============================================================ */


/* ============================================================
   01 — VARIABLES
   ============================================================ */

:root {

  --bg:
    #050606;

  --bg-2:
    #080909;

  --glass:
    rgba(20, 22, 21, .70);

  --glass-strong:
    rgba(17, 19, 18, .88);

  --glass-soft:
    rgba(255, 255, 255, .035);

  --glass-highlight:
    rgba(255, 255, 255, .075);

  --border:
    rgba(255, 255, 255, .085);

  --border-strong:
    rgba(255, 255, 255, .13);

  --text:
    #f4f6f4;

  --text-2:
    #a5aaa6;

  --text-3:
    #686e6a;

  --green:
    #72f28b;

  --green-2:
    #4bd96b;

  --green-soft:
    rgba(114, 242, 139, .11);

  --green-glow:
    rgba(114, 242, 139, .18);

  --red:
    #ff4e68;

  --red-soft:
    rgba(255, 78, 104, .12);

  --radius-sm:
    12px;

  --radius:
    18px;

  --radius-lg:
    26px;

  --radius-xl:
    32px;

  --pill:
    999px;

  --sidebar:
    248px;

  --feed:
    620px;

  --trends:
    310px;

  --page-gap:
    18px;

  --ease:
    cubic-bezier(.22, .75, .25, 1);

}


/* ============================================================
   02 — RESET
   ============================================================ */

*,
*::before,
*::after {

  box-sizing:
    border-box;

  margin:
    0;

  padding:
    0;

  -webkit-tap-highlight-color:
    transparent;

}


html {

  min-height:
    100%;

  scroll-behavior:
    smooth;

  background:
    var(--bg);

}


body {

  min-height:
    100vh;

  width:
    100%;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    system-ui,
    sans-serif;

  font-size:
    15px;

  line-height:
    1.5;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  position:
    relative;

}


/* ============================================================
   03 — CARBON BACKGROUND
   ============================================================ */

body::before {

  content:
    "";

  position:
    fixed;

  inset:
    0;

  z-index:
    -2;

  pointer-events:
    none;

  background:

    radial-gradient(
      circle at 50% -15%,
      rgba(114,242,139,.075),
      transparent 34%
    ),

    radial-gradient(
      circle at 100% 70%,
      rgba(114,242,139,.025),
      transparent 30%
    ),

    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 5px
    ),

    repeating-linear-gradient(
      25deg,
      rgba(0,0,0,.25) 0px,
      rgba(0,0,0,.25) 2px,
      transparent 2px,
      transparent 6px
    ),

    linear-gradient(
      180deg,
      #080a09 0%,
      #050606 55%,
      #030404 100%
    );

}


/* second carbon layer */

body::after {

  content:
    "";

  position:
    fixed;

  inset:
    0;

  z-index:
    -1;

  pointer-events:
    none;

  opacity:
    .25;

  background:

    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 2px,
      rgba(255,255,255,.018) 3px,
      transparent 4px,
      transparent 8px
    );

}


/* ============================================================
   04 — ELEMENTS
   ============================================================ */

a {

  color:
    inherit;

  text-decoration:
    none;

}


button,
input,
textarea {

  font:
    inherit;

}


button {

  cursor:
    pointer;

}


img,
video {

  display:
    block;

  max-width:
    100%;

}


button,
a,
input,
textarea {

  outline:
    none;

}


::-webkit-scrollbar {

  width:
    7px;

}


::-webkit-scrollbar-track {

  background:
    transparent;

}


::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,.10);

  border-radius:
    999px;

}


::-webkit-scrollbar-thumb:hover {

  background:
    rgba(255,255,255,.17);

}


.hidden {

  display:
    none !important;

}


/* ============================================================
   05 — MAIN LAYOUT
   ============================================================ */

.app-layout {

  width:
    min(100% - 28px, 1220px);

  margin:
    0 auto;

  min-height:
    100vh;

  display:
    grid;

  grid-template-columns:
    var(--sidebar)
    minmax(0, var(--feed))
    var(--trends);

  gap:
    var(--page-gap);

  align-items:
    start;

  padding:
    18px 0 40px;

}


/* ============================================================
   06 — LIQUID GLASS CORE
   ============================================================ */

.glass-panel {

  position:
    relative;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025) 42%,
      rgba(0,0,0,.16)
    ),
    var(--glass);

  border:
    1px solid var(--border);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.07),

    inset 0 -1px 0 rgba(0,0,0,.28),

    0 18px 50px rgba(0,0,0,.30),

    0 2px 8px rgba(0,0,0,.22);

  backdrop-filter:
    blur(18px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(125%);

}


/* glass reflection */

.glass-panel::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    14px;

  right:
    14px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.14),
      transparent
    );

  pointer-events:
    none;

}


/* ============================================================
   07 — SIDEBAR
   ============================================================ */

.sidebar {

  position:
    sticky;

  top:
    18px;

  height:
    calc(100vh - 36px);

  min-height:
    550px;

}


.sidebar-glass {

  height:
    100%;

  padding:
    16px;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-xl);

  background:
    linear-gradient(
      160deg,
      rgba(24,27,25,.82),
      rgba(9,11,10,.76)
    );

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.07),

    inset 0 -1px 0 rgba(0,0,0,.5),

    0 22px 70px rgba(0,0,0,.35);

  backdrop-filter:
    blur(20px)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(130%);

}


/* ============================================================
   08 — LOGO
   ============================================================ */

.logo {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    9px 7px 24px;

}


.logo-mark {

  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  color:
    #061008;

  background:
    linear-gradient(
      145deg,
      #a2ffae,
      #57df70
    );

  box-shadow:

    0 10px 25px rgba(114,242,139,.18),

    inset 0 1px 1px rgba(255,255,255,.55);

}


.logo-mark i {

  font-size:
    21px;

}


.logo-text {

  font-size:
    1.16rem;

  font-weight:
    850;

  letter-spacing:
    -.04em;

}


/* ============================================================
   09 — NAVIGATION
   ============================================================ */

.main-nav {

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

}


.nav-item {

  min-height:
    48px;

  padding:
    0 13px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  border:
    1px solid transparent;

  border-radius:
    15px;

  color:
    var(--text-2);

  font-size:
    .92rem;

  font-weight:
    650;

  transition:
    .22s var(--ease);

}


.nav-item:hover {

  color:
    var(--text);

  background:
    rgba(255,255,255,.045);

  border-color:
    rgba(255,255,255,.06);

  transform:
    translateX(2px);

}


.nav-item.active {

  color:
    var(--green);

  background:
    linear-gradient(
      100deg,
      rgba(114,242,139,.13),
      rgba(114,242,139,.045)
    );

  border-color:
    rgba(114,242,139,.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045);

}


.nav-icon {

  width:
    26px;

  height:
    26px;

  display:
    grid;

  place-items:
    center;

  font-size:
    19px;

  flex-shrink:
    0;

}


.nav-badge {

  min-width:
    18px;

  height:
    18px;

  padding:
    0 5px;

  margin-left:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  background:
    var(--green);

  color:
    #061007;

  font-size:
    10px;

  font-weight:
    900;

}


/* ============================================================
   10 — NEW POST SIDEBAR
   ============================================================ */

.btn-post-sidebar {

  width:
    100%;

  margin-top:
    17px;

  min-height:
    48px;

  border:
    0;

  border-radius:
    16px;

  color:
    #061007;

  background:
    linear-gradient(
      145deg,
      #9dffa9,
      #50d96b
    );

  font-weight:
    850;

  box-shadow:

    0 12px 28px rgba(114,242,139,.16),

    inset 0 1px 1px rgba(255,255,255,.5);

  transition:
    .22s var(--ease);

}


.btn-post-sidebar:hover {

  transform:
    translateY(-2px);

  box-shadow:

    0 17px 36px rgba(114,242,139,.22),

    inset 0 1px 1px rgba(255,255,255,.55);

}


.btn-post-sidebar:active {

  transform:
    translateY(0) scale(.985);

}


/* ============================================================
   11 — SIDEBAR USER
   ============================================================ */

.sidebar-user {

  margin-top:
    auto;

  padding:
    10px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid transparent;

  border-radius:
    15px;

  cursor:
    pointer;

  transition:
    .2s ease;

}


.sidebar-user:hover {

  background:
    rgba(255,255,255,.04);

  border-color:
    rgba(255,255,255,.06);

}


.sidebar-user img,
.sidebar-user video {

  width:
    38px;

  height:
    38px;

  flex-shrink:
    0;

  border-radius:
    12px;

  object-fit:
    cover;

}


.sidebar-user > div {

  min-width:
    0;

}


.sidebar-user strong {

  display:
    block;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    .84rem;

}


.sidebar-user small {

  color:
    var(--text-3);

  font-size:
    .72rem;

}


/* ============================================================
   12 — FEED
   ============================================================ */

.feed {

  min-width:
    0;

}


.feed-header {

  min-height:
    72px;

  margin-bottom:
    12px;

  padding:
    12px 16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border:
    1px solid var(--border);

  border-radius:
    21px;

  background:
    rgba(15,17,16,.76);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.06),

    0 12px 38px rgba(0,0,0,.22);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

}


.feed-eyebrow {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--text-3);

  font-size:
    .59rem;

  font-weight:
    850;

  letter-spacing:
    .13em;

}


.live-dot {

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--green);

  box-shadow:
    0 0 10px rgba(114,242,139,.7);

}


.feed-header h1 {

  margin-top:
    1px;

  font-size:
    1.25rem;

  letter-spacing:
    -.04em;

}


.btn-logout {

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    12px;

  background:
    rgba(255,255,255,.035);

  color:
    var(--text-3);

  transition:
    .2s ease;

}


.btn-logout span {

  display:
    none;

}


.btn-logout:hover {

  color:
    var(--red);

  border-color:
    rgba(255,78,104,.2);

  background:
    var(--red-soft);

}


/* ============================================================
   13 — COMPOSER
   ============================================================ */

.new-post {

  padding:
    16px;

  display:
    flex;

  gap:
    12px;

  border-radius:
    23px;

  margin-bottom:
    12px;

}


.composer-avatar {

  flex-shrink:
    0;

}


.composer-avatar img,
.composer-avatar video {

  width:
    44px;

  height:
    44px;

  border-radius:
    14px;

  object-fit:
    cover;

}


.post-input-area {

  flex:
    1;

  min-width:
    0;

}


.composer-top {

  margin:
    1px 0 7px;

}


.composer-label {

  color:
    var(--text-3);

  font-size:
    .69rem;

  font-weight:
    700;

}


#postInput {

  width:
    100%;

  min-height:
    76px;

  resize:
    vertical;

  border:
    0;

  outline:
    none;

  color:
    var(--text);

  background:
    transparent;

  font-size:
    1rem;

  line-height:
    1.55;

}


#postInput::placeholder {

  color:
    #626762;

}


#postInput:focus {

  outline:
    none;

}


.post-actions {

  min-height:
    40px;

  padding-top:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid rgba(255,255,255,.055);

}


.post-actions-left {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

}


.btn-icon,
.btn-sticker {

  height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid transparent;

  border-radius:
    10px;

  color:
    var(--text-3);

  background:
    transparent;

  transition:
    .2s ease;

}


.btn-icon {

  width:
    32px;

  font-size:
    18px;

}


.btn-sticker {

  gap:
    6px;

  padding:
    0 9px;

  font-size:
    .72rem;

  font-weight:
    750;

}


.btn-icon:hover,
.btn-sticker:hover {

  color:
    var(--green);

  background:
    var(--green-soft);

  border-color:
    rgba(114,242,139,.10);

}


.char-count {

  min-width:
    30px;

  color:
    var(--text-3);

  font-size:
    .68rem;

  font-weight:
    700;

  text-align:
    center;

}


.publish-button {

  min-height:
    34px;

  padding:
    0 14px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  border:
    0;

  border-radius:
    11px;

  color:
    #061007;

  background:
    linear-gradient(
      145deg,
      #99ffa6,
      #55dd6e
    );

  font-size:
    .76rem;

  font-weight:
    850;

  box-shadow:
    0 7px 18px rgba(114,242,139,.13);

  transition:
    .2s var(--ease);

}


.publish-button:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 10px 25px rgba(114,242,139,.2);

}


.publish-button:active {

  transform:
    scale(.97);

}


/* ============================================================
   14 — IMAGE PREVIEW
   ============================================================ */

.image-preview-box {

  position:
    relative;

  width:
    min(100%, 300px);

  margin:
    5px 0 10px;

  overflow:
    hidden;

  border:
    1px solid var(--border);

  border-radius:
    16px;

  background:
    #080909;

}


.image-preview-box img {

  width:
    100%;

  max-height:
    300px;

  object-fit:
    cover;

}


.remove-image {

  position:
    absolute;

  top:
    8px;

  right:
    8px;

  z-index:
    2;

  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:
    50%;

  color:
    white;

  background:
    rgba(0,0,0,.68);

  backdrop-filter:
    blur(10px);

}


/* ============================================================
   15 — POSTS
   ============================================================ */

.posts-feed {

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

}


.post-card {

  position:
    relative;

  display:
    flex;

  gap:
    12px;

  padding:
    17px;

  border:
    1px solid var(--border);

  border-radius:
    23px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018) 48%,
      rgba(0,0,0,.14)
    ),
    rgba(15,17,16,.76);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.055),

    inset 0 -1px 0 rgba(0,0,0,.25),

    0 15px 40px rgba(0,0,0,.22);

  backdrop-filter:
    blur(16px)
    saturate(120%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(120%);

  transition:
    border-color .2s ease,
    transform .2s var(--ease),
    box-shadow .2s ease;

}


.post-card:hover {

  border-color:
    rgba(255,255,255,.12);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.065),

    0 20px 50px rgba(0,0,0,.28);

}


.post-card > div:first-child img,
.post-card > div:first-child video {

  width:
    44px;

  height:
    44px;

  border-radius:
    14px;

  object-fit:
    cover;

}


.post-body {

  min-width:
    0;

  flex:
    1;

}


.post-user {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  flex-wrap:
    wrap;

}


.post-user strong {

  font-size:
    .9rem;

}


.handle {

  color:
    var(--text-3);

  font-size:
    .75rem;

}


.post-time {

  color:
    var(--text-3);

  font-size:
    .71rem;

}


.post-text {

  margin-top:
    7px;

  color:
    #e6e9e6;

  font-size:
    .92rem;

  line-height:
    1.55;

  white-space:
    pre-wrap;

  word-break:
    break-word;

}


.post-img {

  width:
    100%;

  max-height:
    520px;

  margin-top:
    12px;

  object-fit:
    cover;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    17px;

  cursor:
    zoom-in;

}


.post-footer {

  min-height:
    38px;

  margin-top:
    9px;

  display:
    flex;

  align-items:
    center;

  gap:
    3px;

}


.post-btn {

  min-width:
    34px;

  height:
    32px;

  padding:
    0 8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  border:
    1px solid transparent;

  border-radius:
    10px;

  color:
    var(--text-3);

  background:
    transparent;

  font-size:
    .75rem;

  transition:
    .18s ease;

}


.post-btn i {

  font-size:
    17px;

}


.post-btn:hover {

  color:
    var(--green);

  background:
    var(--green-soft);

}


.post-btn.liked {

  color:
    var(--red);

}


.post-btn.delete:hover {

  color:
    var(--red);

  background:
    var(--red-soft);

}


/* ============================================================
   16 — COMMENTS
   ============================================================ */

.comments-section {

  margin-top:
    8px;

  padding-top:
    8px;

  border-top:
    1px solid rgba(255,255,255,.055);

}


.comments-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

}


.comment-item {

  display:
    flex;

  gap:
    9px;

  padding:
    8px;

  border-radius:
    13px;

  background:
    rgba(255,255,255,.025);

}


.comment-item img,
.comment-item video {

  width:
    32px;

  height:
    32px;

  border-radius:
    10px;

  object-fit:
    cover;

}


.comment-body {

  min-width:
    0;

  flex:
    1;

}


.comment-header {

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  flex-wrap:
    wrap;

}


.comment-text {

  margin:
    2px 0 4px;

  color:
    #d9ddd9;

  font-size:
    .82rem;

  line-height:
    1.45;

  word-break:
    break-word;

}


.comment-input-row {

  margin-top:
    10px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.comment-input-row img,
.comment-input-row video {

  width:
    32px;

  height:
    32px;

  border-radius:
    10px;

}


.comment-input-wrap {

  min-width:
    0;

  flex:
    1;

  display:
    flex;

  align-items:
    center;

  padding:
    3px;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:
    13px;

  background:
    rgba(0,0,0,.22);

}


.comment-input-wrap:focus-within {

  border-color:
    rgba(114,242,139,.25);

}


.comment-input {

  min-width:
    0;

  flex:
    1;

  height:
    32px;

  padding:
    0 9px;

  border:
    0;

  outline:
    none;

  color:
    var(--text);

  background:
    transparent;

  font-size:
    .8rem;

}


.comment-input::placeholder {

  color:
    var(--text-3);

}


.btn-send-comment {

  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    10px;

  color:
    #071008;

  background:
    var(--green);

}


/* ============================================================
   17 — TRENDS
   ============================================================ */

.trends {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

}


.trends-box {

  position:
    relative;

  padding:
    15px;

  border-radius:
    22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    ),
    rgba(13,15,14,.72);

  border:
    1px solid var(--border);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.055),

    0 15px 40px rgba(0,0,0,.24);

  backdrop-filter:
    blur(17px)
    saturate(120%);

  -webkit-backdrop-filter:
    blur(17px)
    saturate(120%);

}


.section-heading {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    12px;

}


.section-heading-icon {

  width:
    34px;

  height:
    34px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(114,242,139,.13);

  border-radius:
    11px;

  color:
    var(--green);

  background:
    rgba(114,242,139,.08);

}


.section-heading-icon.video {

  color:
    #8cc9ff;

  background:
    rgba(96,173,255,.08);

  border-color:
    rgba(96,173,255,.12);

}


.section-heading-icon.people {

  color:
    #c3a0ff;

  background:
    rgba(170,120,255,.08);

  border-color:
    rgba(170,120,255,.12);

}


.section-heading h3 {

  font-size:
    .88rem;

  font-weight:
    800;

}


.section-heading span {

  display:
    block;

  margin-top:
    1px;

  color:
    var(--text-3);

  font-size:
    .65rem;

}


/* ============================================================
   18 — TRENDS LIST
   ============================================================ */

.trends-list {

  list-style:
    none;

}


.trends-list li {

  min-height:
    58px;

  padding:
    8px 4px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid rgba(255,255,255,.045);

  cursor:
    pointer;

  transition:
    .18s ease;

}


.trends-list li:last-child {

  border-bottom:
    0;

}


.trends-list li:hover {

  padding-left:
    8px;

}


.trends-list li div {

  min-width:
    0;

}


.trends-list li span {

  display:
    block;

  color:
    #e9ece9;

  font-size:
    .79rem;

  font-weight:
    750;

}


.trends-list li small {

  display:
    block;

  margin-top:
    1px;

  color:
    var(--text-3);

  font-size:
    .67rem;

}


.trends-list li > i {

  color:
    var(--text-3);

  font-size:
    17px;

}


/* ============================================================
   19 — VIDEOS
   ============================================================ */

.recent-video {

  min-width:
    0;

  padding:
    7px 0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  border-bottom:
    1px solid rgba(255,255,255,.045);

  cursor:
    pointer;

}


.recent-video:last-child {

  border-bottom:
    0;

}


.recent-video-thumb {

  position:
    relative;

  width:
    56px;

  height:
    56px;

  flex-shrink:
    0;

  overflow:
    hidden;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    13px;

  background:
    #090a09;

}


.recent-video-thumb video {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


.play-overlay {

  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  background:
    linear-gradient(
      rgba(0,0,0,.05),
      rgba(0,0,0,.32)
    );

}


.play-overlay i {

  width:
    23px;

  height:
    23px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    white;

  background:
    rgba(0,0,0,.55);

  font-size:
    12px;

}


.recent-video-info {

  min-width:
    0;

  flex:
    1;

}


.recent-video-info p {

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    #e4e7e4;

  font-size:
    .72rem;

  font-weight:
    700;

}


.recent-video-info small {

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  margin-top:
    4px;

  color:
    var(--text-3);

  font-size:
    .63rem;

}


.recent-video-info small i:first-child {

  color:
    var(--red);

}


.see-all {

  margin-top:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  color:
    var(--green);

  font-size:
    .7rem;

  font-weight:
    750;

}


/* ============================================================
   20 — SUGGESTIONS
   ============================================================ */

.suggestion {

  min-height:
    53px;

  padding:
    6px 0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.suggestion-avatar {

  flex-shrink:
    0;

  cursor:
    pointer;

}


.avatar-sm {

  width:
    38px;

  height:
    38px;

  border-radius:
    12px;

  object-fit:
    cover;

  border:
    1px solid rgba(255,255,255,.08);

}


.suggestion-info {

  min-width:
    0;

  flex:
    1;

  cursor:
    pointer;

}


.suggestion-info strong {

  display:
    block;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    .76rem;

}


.suggestion-info small {

  display:
    block;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    var(--text-3);

  font-size:
    .64rem;

}


.btn-seguir {

  width:
    31px;

  height:
    31px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(114,242,139,.13);

  border-radius:
    10px;

  color:
    var(--green);

  background:
    rgba(114,242,139,.06);

  transition:
    .18s ease;

}


.btn-seguir:hover {

  background:
    rgba(114,242,139,.13);

}


.btn-seguir.following {

  color:
    var(--text-3);

  border-color:
    rgba(255,255,255,.07);

  background:
    rgba(255,255,255,.03);

}


.btn-seguir:disabled {

  opacity:
    .5;

}


/* ============================================================
   21 — STATES
   ============================================================ */

.loading {

  min-height:
    150px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(--text-3);

  font-size:
    .8rem;

}


.side-loading {

  padding:
    12px 0;

  color:
    var(--text-3);

  font-size:
    .7rem;

}


.side-empty {

  padding:
    8px 0;

  color:
    var(--text-3);

  font-size:
    .7rem;

}


.empty-state {

  min-height:
    250px;

  padding:
    35px 20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--text-3);

  text-align:
    center;

}


.empty-state i {

  font-size:
    42px;

}


.empty-state p {

  margin-top:
    8px;

  max-width:
    280px;

  font-size:
    .82rem;

}


/* ============================================================
   22 — LOAD MORE
   ============================================================ */

.load-more-box {

  padding:
    15px 0;

  display:
    flex;

  justify-content:
    center;

}


#btnLoadMore {

  min-height:
    38px;

  padding:
    0 17px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    12px;

  color:
    var(--text-2);

  background:
    rgba(255,255,255,.035);

  font-size:
    .76rem;

  font-weight:
    700;

}


#btnLoadMore:hover {

  color:
    var(--green);

  border-color:
    rgba(114,242,139,.15);

  background:
    var(--green-soft);

}


/* ============================================================
   23 — SPINNER
   ============================================================ */

.spin {

  display:
    inline-block;

  animation:
    spin .8s linear infinite;

}


@keyframes spin {

  to {

    transform:
      rotate(360deg);

  }

}


/* ============================================================
   24 — MODALS
   ============================================================ */

.modal-overlay {

  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  padding:
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    rgba(0,0,0,.70);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

}


.modal-overlay.hidden {

  display:
    none !important;

}


.modal-box {

  position:
    relative;

  width:
    min(100%, 500px);

  max-height:
    min(720px, calc(100vh - 40px));

  overflow-y:
    auto;

  padding:
    20px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      rgba(31,34,32,.92),
      rgba(10,12,11,.94)
    );

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.09),

    0 35px 100px rgba(0,0,0,.65);

  backdrop-filter:
    blur(25px);

  -webkit-backdrop-filter:
    blur(25px);

}


.modal-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    15px;

  margin-bottom:
    20px;

}


.modal-kicker {

  color:
    var(--green);

  font-size:
    .58rem;

  font-weight:
    850;

  letter-spacing:
    .13em;

}


.modal-header h3 {

  margin-top:
    3px;

  font-size:
    1.05rem;

}


.btn-cerrar-modal {

  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    11px;

  color:
    var(--text-2);

  background:
    rgba(255,255,255,.035);

}


.form-group {

  margin-bottom:
    14px;

}


.form-group label {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    7px;

  color:
    var(--text-2);

  font-size:
    .76rem;

  font-weight:
    750;

}


.form-group label small {

  color:
    var(--text-3);

  font-size:
    .62rem;

  font-weight:
    500;

}


.form-group input {

  width:
    100%;

  height:
    45px;

  padding:
    0 13px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    13px;

  outline:
    none;

  color:
    var(--text);

  background:
    rgba(0,0,0,.23);

  transition:
    .2s ease;

}


.form-group input:focus {

  border-color:
    rgba(114,242,139,.28);

  box-shadow:
    0 0 0 3px rgba(114,242,139,.055);

}


.form-group input::placeholder {

  color:
    var(--text-3);

}


.btn-auth {

  width:
    100%;

  min-height:
    43px;

  border:
    0;

  border-radius:
    13px;

  color:
    #061007;

  background:
    linear-gradient(
      145deg,
      #9bffa7,
      #55dc6e
    );

  font-weight:
    850;

  box-shadow:
    0 10px 25px rgba(114,242,139,.14);

}


.btn-auth.small-auth {

  width:
    auto;

  min-height:
    32px;

  padding:
    0 12px;

  font-size:
    .7rem;

  box-shadow:
    none;

}


/* ============================================================
   25 — STICKERS
   ============================================================ */

.sticker-results {

  margin-top:
    15px;

}


.sticker-loading {

  min-height:
    100px;

  display:
    grid;

  place-items:
    center;

}


.sticker-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    10px;

  margin-top:
    10px;

}


.sticker-option {

  overflow:
    hidden;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    16px;

  background:
    rgba(255,255,255,.025);

  cursor:
    pointer;

  transition:
    .2s var(--ease);

}


.sticker-option img {

  width:
    100%;

  aspect-ratio:
    1;

  object-fit:
    contain;

}


.sticker-option:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(114,242,139,.25);

}


.sticker-option.selected {

  border-color:
    var(--green);

  box-shadow:
    0 0 0 2px rgba(114,242,139,.12);

}


.sticker-selected {

  margin-top:
    14px;

  padding:
    10px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  border:
    1px solid rgba(114,242,139,.14);

  border-radius:
    14px;

  background:
    rgba(114,242,139,.055);

}


.sticker-selected > i {

  color:
    var(--green);

  font-size:
    19px;

}


.sticker-selected span {

  flex:
    1;

  font-size:
    .75rem;

  font-weight:
    700;

}


/* ============================================================
   26 — IMAGE MODAL
   ============================================================ */

.modal-img {

  position:
    fixed;

  inset:
    0;

  z-index:
    1100;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    25px;

  background:
    rgba(0,0,0,.82);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

}


.modal-img.active {

  display:
    flex;

}


.modal-img img {

  max-width:
    min(1100px, 94vw);

  max-height:
    88vh;

  object-fit:
    contain;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    18px;

  box-shadow:
    0 35px 100px rgba(0,0,0,.7);

}


.image-modal-close {

  position:
    fixed;

  top:
    20px;

  right:
    20px;

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(255,255,255,.1);

  border-radius:
    50%;

  color:
    white;

  background:
    rgba(20,20,20,.65);

  font-size:
    19px;

}


/* ============================================================
   27 — MOBILE NAV
   ============================================================ */

.bottom-nav {

  display:
    none;

}


/* ============================================================
   28 — RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {

  :root {

    --sidebar:
      78px;

    --trends:
      270px;

  }


  .app-layout {

    grid-template-columns:
      var(--sidebar)
      minmax(0, 1fr)
      var(--trends);

  }


  .logo {

    justify-content:
      center;

  }


  .logo-text {

    display:
      none;

  }


  .nav-item {

    justify-content:
      center;

    padding:
      0;

  }


  .nav-item > span:not(.nav-icon):not(.nav-badge) {

    display:
      none;

  }


  .btn-post-sidebar span {

    display:
      none;

  }


  .btn-post-sidebar {

    width:
      48px;

    margin-left:
      auto;

    margin-right:
      auto;

    padding:
      0;

  }


  .sidebar-user {

    justify-content:
      center;

    padding:
      7px;

  }


  .sidebar-user > div {

    display:
      none;

  }

}


@media (max-width: 850px) {

  .app-layout {

    width:
      min(100% - 20px, 650px);

    grid-template-columns:
      1fr;

    padding-bottom:
      90px;

  }


  .sidebar {

    position:
      relative;

    top:
      auto;

    height:
      auto;

    min-height:
      0;

  }


  .sidebar-glass {

    height:
      auto;

    min-height:
      0;

    padding:
      10px;

    flex-direction:
      row;

    align-items:
      center;

  }


  .logo {

    padding:
      0;

    margin-right:
      8px;

  }


  .main-nav {

    flex:
      1;

    flex-direction:
      row;

    justify-content:
      flex-end;

  }


  .nav-item {

    width:
      42px;

    height:
      42px;

    min-height:
      42px;

  }


  .btn-post-sidebar,
  .sidebar-user {

    display:
      none;

  }


  .trends {

    display:
      grid;

    grid-template-columns:
      repeat(2, minmax(0,1fr));

  }


  .bottom-nav {

    position:
      fixed;

    left:
      10px;

    right:
      10px;

    bottom:
      max(10px, env(safe-area-inset-bottom));

    z-index:
      900;

    display:
      block;

    padding:
      7px;

    border:
      1px solid rgba(255,255,255,.10);

    border-radius:
      21px;

    background:
      rgba(15,17,16,.84);

    box-shadow:

      inset 0 1px 0 rgba(255,255,255,.08),

      0 20px 50px rgba(0,0,0,.5);

    backdrop-filter:
      blur(24px)
      saturate(130%);

    -webkit-backdrop-filter:
      blur(24px)
      saturate(130%);

  }


  .bottom-nav-inner {

    display:
      grid;

    grid-template-columns:
      repeat(5,1fr);

  }


  .bottom-nav-btn {

    min-height:
      48px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      2px;

    border-radius:
      15px;

    color:
      var(--text-3);

    font-size:
      .57rem;

    font-weight:
      700;

  }


  .bottom-nav-btn.active {

    color:
      var(--green);

    background:
      rgba(114,242,139,.07);

  }


  .bn-icon {

    font-size:
      18px;

  }

}


@media (max-width: 560px) {

  .app-layout {

    width:
      100%;

    padding:
      7px 7px 90px;

  }


  .sidebar-glass {

    border-radius:
      18px;

  }


  .feed-header {

    min-height:
      64px;

    padding:
      9px 12px;

    border-radius:
      18px;

  }


  .feed-header h1 {

    font-size:
      1.12rem;

  }


  .new-post {

    padding:
      13px;

    border-radius:
      19px;

  }


  .post-card {

    padding:
      13px;

    border-radius:
      19px;

  }


  .trends {

    display:
      flex;

  }


  .trends-box {

    border-radius:
      19px;

  }


  .composer-label {

    display:
      none;

  }


  #postInput {

    min-height:
      65px;

    font-size:
      .94rem;

  }


  .btn-sticker span {

    display:
      none;

  }


  .publish-button {

    width:
      37px;

    padding:
      0;

    justify-content:
      center;

  }


  .publish-button span {

    display:
      none;

  }


  .publish-button i {

    font-size:
      16px;

  }


  .post-actions {

    padding-top:
      7px;

  }


  .post-img {

    max-height:
      430px;

  }


  .modal-overlay {

    padding:
      10px;

    align-items:
      flex-end;

  }


  .modal-box {

    max-height:
      calc(100vh - 20px);

    border-radius:
      24px;

  }

}


@media (max-width: 390px) {

  .main-nav {

    gap:
      2px;

  }


  .nav-item {

    width:
      38px;

  }


  .nav-icon {

    font-size:
      17px;

  }


  .feed-header {

    margin-bottom:
      8px;

  }


  .post-card {

    gap:
      9px;

  }


  .post-card > div:first-child img,
  .post-card > div:first-child video {

    width:
      38px;

    height:
      38px;

    border-radius:
      12px;

  }

}


/* ============================================================
   29 — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    transition-duration:
      .01ms !important;

  }

}