:root{
  --app-bg:#eef3f9;
  --app-bg-soft:#f8fafc;
  --app-surface:rgba(255,255,255,.88);
  --app-surface-solid:#fff;
  --app-surface-muted:#f8fafc;
  --app-text:#172033;
  --app-text-soft:#334155;
  --app-muted:#64748b;
  --app-border:rgba(15,23,42,.09);
  --app-border-strong:rgba(79,70,229,.18);
  --app-primary:#4f46e5;
  --app-primary-dark:#3730a3;
  --app-primary-soft:rgba(79,70,229,.10);
  --app-accent:#0ea5e9;
  --app-accent-soft:rgba(14,165,233,.12);
  --app-success:#16a34a;
  --app-danger:#e11d48;
  --app-warning:#d97706;
  --app-nav:#172554;
  --app-nav-2:#312e81;
  --app-shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --app-shadow:0 18px 50px rgba(15,23,42,.09);
  --app-shadow-lg:0 28px 80px rgba(15,23,42,.14);
  --app-radius-sm:12px;
  --app-radius:18px;
  --app-radius-lg:24px;
  --nav-offset:88px;
  --card:#fff;
  --muted:var(--app-muted);
  --nav:var(--app-nav);
}

html{
  min-height:100%;
  scroll-behavior:smooth;
}

body.bg-app,
.bg-app{
  min-height:100vh;
  color:var(--app-text);
  background:
    radial-gradient(circle at 8% 2%,rgba(79,70,229,.11),transparent 29rem),
    radial-gradient(circle at 94% 9%,rgba(14,165,233,.10),transparent 26rem),
    linear-gradient(180deg,#f8fafc 0%,var(--app-bg) 44%,#edf2f7 100%);
  background-attachment:fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(rgba(79,70,229,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,70,229,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 76%);
}

a{
  color:var(--app-primary);
}

a:hover{
  color:var(--app-primary-dark);
}

::selection{
  color:#fff;
  background:rgba(79,70,229,.82);
}

/* ===== Header ===== */
.nav-app{
  position:sticky;
  top:0;
  z-index:1030;
  padding:.7rem 0;
  border-bottom:1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(circle at 14% -120%,rgba(56,189,248,.46),transparent 36%),
    linear-gradient(112deg,var(--app-nav),var(--app-nav-2) 58%,#1e3a8a);
  box-shadow:0 14px 38px rgba(15,23,42,.23) !important;
  backdrop-filter:saturate(145%) blur(18px);
}

.nav-app .navbar-brand.app-brand{
  display:inline-flex;
  align-items:center;
  gap:.68rem;
  margin-right:1.4rem;
  letter-spacing:-.02em;
  color:#fff;
}

.app-brand-mark{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:13px;
  color:#fff;
  font-weight:900;
  font-size:1.08rem;
  background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 8px 20px rgba(2,6,23,.20);
}

.app-brand-text{
  font-weight:850;
  text-shadow:0 2px 15px rgba(0,0,0,.22);
}

.nav-app .navbar-nav{
  gap:.18rem;
  flex-wrap:wrap;
}

.nav-app .navbar-collapse{
  min-width:0;
}

.nav-app form[role="search"]{
  min-width:min(280px, 100%);
}

.nav-app .nav-link{
  position:relative;
  padding:.52rem .76rem !important;
  border-radius:11px;
  color:rgba(255,255,255,.79) !important;
  font-size:.94rem;
  font-weight:650;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.nav-app .nav-link:hover,
.nav-app .nav-link:focus{
  color:#fff !important;
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}

.nav-app .form-control,
.nav-app .input-group .btn{
  min-height:36px;
  border-color:rgba(255,255,255,.20);
}

.nav-app .form-control{
  color:#172033;
  background:rgba(255,255,255,.94);
  box-shadow:none;
}

.nav-app .form-control:focus{
  border-color:rgba(255,255,255,.66);
  box-shadow:0 0 0 .2rem rgba(255,255,255,.13);
}

.nav-app .btn-outline-light{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.06);
}

.nav-app .btn-outline-light:hover{
  color:#172554;
  background:#fff;
}

.nav-app .navbar-toggler{
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  padding:.42rem .58rem;
}

.app-main-shell{
  position:relative;
  padding-top:.4rem;
  padding-bottom:.5rem;
}

/* ===== Common surfaces ===== */
.card,
.card-app,
.modal-content,
.dropdown-menu,
.list-group-item{
  border-color:var(--app-border);
}

.card-app,
.card:not(.border-0){
  background:var(--app-surface);
  border:1px solid var(--app-border);
  border-radius:var(--app-radius);
  box-shadow:var(--app-shadow-sm);
  backdrop-filter:blur(16px) saturate(122%);
}

.card-app{
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
}

.card-app:hover{
  border-color:rgba(79,70,229,.13);
  box-shadow:var(--app-shadow);
}

.modal-content{
  overflow:hidden;
  border-radius:22px;
  background:rgba(255,255,255,.98);
  box-shadow:var(--app-shadow-lg);
}

.dropdown-menu{
  padding:.5rem;
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 48px rgba(15,23,42,.16);
}

.dropdown-item{
  border-radius:10px;
  padding:.55rem .72rem;
}

.dropdown-item:hover,
.dropdown-item:focus{
  color:var(--app-primary-dark);
  background:var(--app-primary-soft);
}

.alert{
  border-radius:15px;
  border-width:1px;
  box-shadow:0 8px 22px rgba(15,23,42,.045);
}

.badge{
  letter-spacing:.01em;
}

/* ===== Buttons and forms ===== */
.btn{
  border-radius:11px;
  font-weight:650;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
}

.btn-primary{
  border-color:var(--app-primary);
  background:linear-gradient(135deg,var(--app-primary),#6366f1);
  box-shadow:0 9px 22px rgba(79,70,229,.22);
}

.btn-primary:hover,
.btn-primary:focus{
  border-color:var(--app-primary-dark);
  background:linear-gradient(135deg,var(--app-primary-dark),var(--app-primary));
  box-shadow:0 12px 28px rgba(79,70,229,.30);
}

.btn-outline-primary{
  color:var(--app-primary);
  border-color:rgba(79,70,229,.35);
}

.btn-outline-primary:hover{
  border-color:var(--app-primary);
  background:var(--app-primary);
}

.btn-light{
  border-color:rgba(15,23,42,.07);
  box-shadow:0 5px 16px rgba(15,23,42,.06);
}

.form-control,
.form-select,
.form-check-input,
.input-group-text{
  border-color:rgba(15,23,42,.13);
}

.form-control,
.form-select{
  min-height:42px;
  border-radius:11px;
  color:var(--app-text);
  background-color:rgba(255,255,255,.94);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}

.form-control-sm,
.form-select-sm{
  min-height:34px;
  border-radius:9px;
}

.form-control:focus,
.form-select:focus{
  border-color:rgba(79,70,229,.58);
  background:#fff;
  box-shadow:0 0 0 .22rem rgba(79,70,229,.11);
}

.form-check-input:checked{
  border-color:var(--app-primary);
  background-color:var(--app-primary);
}

textarea.form-control{
  line-height:1.55;
}

/* ===== Tables ===== */
.table-responsive{
  border-radius:14px;
}

.table{
  --bs-table-bg:transparent;
  --bs-table-striped-bg:rgba(79,70,229,.025);
  margin-bottom:0;
}

.table > :not(caption) > * > *{
  padding:.72rem .8rem;
  border-bottom-color:rgba(15,23,42,.075);
}

.table thead th{
  color:#475569;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.035em;
  background:rgba(248,250,252,.82);
}

/* ===== Layout ===== */
.feed-layout{
  display:grid;
  grid-template-columns:minmax(210px,260px) minmax(0,1fr) minmax(210px,260px);
  gap:18px;
  align-items:start;
}

.sidebar-sticky{
  position:sticky;
  top:var(--nav-offset);
}

@media (min-width:1400px){
  .feed-layout{
    grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(240px,300px);
    gap:22px;
  }
}

@media (max-width:1199.98px){
  .feed-layout{
    grid-template-columns:220px minmax(0,1fr) 220px;
  }

  .nav-app .nav-link{
    padding:.48rem .58rem !important;
    font-size:.88rem;
  }

  .nav-app .navbar-brand.app-brand{
    margin-right:.8rem;
  }
}

@media (max-width:991.98px){
  :root{--nav-offset:76px}
  .feed-layout{grid-template-columns:1fr}
  .feed-layout > section{order:1}
  .feed-layout > aside:first-child{order:2}
  .feed-layout > aside:last-child{order:3}
  .sidebar-sticky{position:static}
  .nav-app .navbar-collapse{
    margin-top:.75rem;
    padding:.8rem;
    border:1px solid rgba(255,255,255,.13);
    border-radius:16px;
    background:rgba(15,23,42,.20);
    backdrop-filter:blur(12px);
  }
  .nav-app .navbar-nav{gap:.25rem;margin-bottom:.65rem}
  .nav-app .nav-link{width:100%;text-align:left}
  .nav-app .dropdown .nav-link{display:flex;justify-content:space-between;align-items:center}
  .nav-app form[role="search"]{width:100%;margin-right:0 !important;margin-bottom:.65rem}
  .hdr-nav-actions{width:100%;flex-direction:column;align-items:stretch !important;gap:.55rem !important}
  .hdr-nav-actions > *,
  .hdr-nav-actions .dropdown,
  .hdr-nav-actions form,
  .hdr-nav-actions .btn{width:100%}
  .hdr-nav-actions .dropdown-menu{width:100%}
  .app-brand-mark{width:35px;height:35px;flex-basis:35px}
}


@media (max-width:575.98px){
  body::before{display:none}
  .app-main-shell{padding-left:10px;padding-right:10px}
  .card-app,.card:not(.border-0){border-radius:16px}
  .nav-app{padding:.55rem 0}
  .app-brand-text{font-size:1rem}
  .nav-app .container{padding-left:12px;padding-right:12px}
  .feed-layout{gap:12px}
  .post-attachments video,
  .comment-attachments video{max-height:62vh}
  .btn{white-space:normal}
}

/* ===== Posts ===== */
.post-author{
  color:var(--app-text);
  font-weight:750;
}

.post-meta{
  color:var(--app-muted);
  font-size:12px;
}

.post-body{
  color:var(--app-text-soft);
  line-height:1.62;
}

.attachments-single{
  display:flex;
  justify-content:center;
}

.att-img{
  display:block;
  overflow:hidden;
  cursor:zoom-in;
  border:1px solid rgba(15,23,42,.07);
  border-radius:16px;
  background:rgba(15,23,42,.025);
  box-shadow:0 8px 24px rgba(15,23,42,.055);
}

.att-img img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .28s ease;
}

.att-img:hover img{
  transform:scale(1.008);
}

.att-img-single{width:min(640px,100%)}

.attachments-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

@media (max-width:576px){
  .attachments-grid{grid-template-columns:1fr}
}

.att-file{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:9px 12px;
  border:1px solid rgba(79,70,229,.12);
  border-radius:12px;
  color:var(--app-primary-dark);
  background:var(--app-primary-soft);
  text-decoration:none;
}

/* ===== Reactions ===== */
.reaction-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border:1px solid rgba(15,23,42,.09);
  border-radius:999px;
  color:var(--app-text-soft);
  background:rgba(255,255,255,.78);
  box-shadow:0 4px 12px rgba(15,23,42,.035);
  font-size:14px;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}

.reaction-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(79,70,229,.23);
  box-shadow:0 7px 18px rgba(15,23,42,.07);
}

.reaction-btn .label,
.reaction-btn .count{
  color:inherit;
}

.reaction-btn .count{
  min-width:22px;
  text-align:center;
  font-weight:800;
}

.reaction-btn.active-like{
  color:#0369a1;
  border-color:rgba(14,165,233,.36);
  background:rgba(14,165,233,.11);
}

.reaction-btn.active-dislike{
  color:#be123c;
  border-color:rgba(225,29,72,.30);
  background:rgba(225,29,72,.09);
}

.reaction-btn-sm{padding:5px 10px;font-size:13px}

/* ===== Polls ===== */
.poll-box{
  padding-top:12px;
  border-top:1px solid rgba(15,23,42,.07);
}

.poll-opt,
.poll-res{
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.075);
  border-radius:13px;
  background:rgba(248,250,252,.78);
}

.poll-opt{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.poll-opt input{margin-top:3px}

.poll-res.mine{
  border-color:rgba(79,70,229,.30);
  background:rgba(79,70,229,.075);
}

.poll-bar{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(15,23,42,.075);
}

.poll-bar-fill{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--app-primary),var(--app-accent));
}

/* ===== Comments ===== */
.comments-box{
  padding-top:13px;
  border-top:1px solid rgba(15,23,42,.07);
}

.comments-title{font-weight:800}

.comments-list,
.comment-replies{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.comment{
  padding:11px 13px;
  border:1px solid rgba(15,23,42,.07);
  border-radius:14px;
  background:rgba(248,250,252,.82);
}

.comment.is-reply{
  margin-left:24px;
  border-left:3px solid rgba(79,70,229,.27);
  background:rgba(255,255,255,.72);
}

.comment-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}

.comment-author{font-size:14px;font-weight:750}
.comment-meta{color:var(--app-muted);font-size:12px}
.comment-body{margin-top:6px;line-height:1.52}
.comment-reply-btn{
  padding:0;
  border:0;
  color:var(--app-primary);
  background:transparent;
  font-size:13px;
  text-decoration:none;
}
.comment-reply-btn:hover{text-decoration:underline}

/* ===== Sponsored badges ===== */
.vm-sponsored-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .58rem;
  border:1px solid rgba(245,158,11,.24);
  border-radius:999px;
  color:#92400e;
  background:rgba(254,243,199,.82);
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.035em;
  text-transform:uppercase;
}

/* ===== Footer ===== */
.footer-app{
  position:relative;
  margin:1.4rem 12px 12px !important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.78) !important;
  border-radius:24px 24px 14px 14px;
  background:
    radial-gradient(circle at 88% -30%,rgba(14,165,233,.12),transparent 35%),
    rgba(255,255,255,.72);
  box-shadow:0 -8px 35px rgba(15,23,42,.055),0 16px 42px rgba(15,23,42,.07);
  backdrop-filter:blur(18px) saturate(135%);
}

/* ===== Lightbox ===== */
html.lb-lock,
html.lb-lock body{overflow:hidden}
.lb-overlay{position:fixed;inset:0;z-index:2000}
.lb-overlay.open{display:block}
.lb-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.84);backdrop-filter:blur(8px)}
.lb-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.lb-img{max-width:min(1100px,92vw);max-height:86vh;width:auto;height:auto;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.62);cursor:pointer}
.lb-close,.lb-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  color:#fff;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(12px);
}
.lb-close{position:absolute;top:18px;right:18px;width:44px;height:44px;font-size:28px;line-height:1}
.lb-nav{position:absolute;top:50%;width:52px;height:52px;transform:translateY(-50%);font-size:40px;line-height:1;user-select:none}
.lb-prev{left:18px}.lb-next{right:18px}
.lb-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);padding:6px 12px;border:1px solid rgba(255,255,255,.20);border-radius:999px;color:#fff;background:rgba(15,23,42,.58);font-size:13px;backdrop-filter:blur(12px)}

/* ===== Profile avatar: preserve full image ===== */
.profile-avatar img,
.profile-ava img,
.user-avatar img,
.avatar img,
.avatar-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:rgba(15,23,42,.025);
}

/* Components that explicitly need crop keep their local rule. */
.hdr-notif-ava img,
.profile-cover img,
.group-avatar img{
  object-fit:cover;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}