/* ════════════════════════════════════════════
     DESIGN TOKENS
  ════════════════════════════════════════════ */
  :root {
    --white:  #ffffff;
    --bg:     #fafafa;
    --light:  #f5f5f5;
    --border: #efefef;
    --muted:  #8e8e8e;
    --dark:   #111111;
    --blue:   #0095f6;
    --blue2:  #1877f2;
    --red:    #ed4956;
    --green:  #44d97f;
    --purple: #5b5bd6;
    --r:      12px;
    --rL:     18px;
    --sh:     0 4px 24px rgba(0,0,0,.08);

    /* Safe area (notch / home indicator) */
    --sat: env(safe-area-inset-top,    0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left,   0px);
    --sar: env(safe-area-inset-right,  0px);

    /* Bottom-nav height + safe area */
    --bn-h: calc(56px + var(--sab));
  }



@font-face {
    font-family: 'Noto-Sans-Oriya';
    src: url('fonts/NotoSansOriya.ttf') format('truetype'); 
    font-weight: 400;
    font-style: normal;
}


  /* ════════════════════════════════════════════
     RESET
  ════════════════════════════════════════════ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;   /* always show scrollbar track — prevents layout jump */
  }
  body {
    font-family: 'Noto-Sans-Oriya', sans-serif;
    background: var(--bg);
    color: var(--dark);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    /* Clip only horizontal overflow — never touch vertical */
    overflow-x: clip;
  }

  /* ════════════════════════════════════════════
     TOPBAR
  ════════════════════════════════════════════ */
  .toplogod{
      width: 60px;
      margin-right: 10px;
  }
  .u-nameancorlink{
    color:#000;
  }
  .topbar {
    position: sticky; top: 0; z-index: 300;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    /* Push below status bar on iOS PWA */
    padding-top: var(--sat);
  }
  .topbar-inner {
    /* max-width: 1040px;  */
    margin: 0 auto;
    padding: 10px 16px;
    display: flex; align-items: center; gap: 8px;
  }

  .brand {
    font-family: 'Syne', sans-serif;
    font-weight: 800; font-size: 1.45rem;
    color: var(--dark); text-decoration: none;
    letter-spacing: -.5px; flex-shrink: 0;
  }
  .brand span { color: var(--blue); }
  .brand-gap { flex: 1; }

  /* Search — visible md+ */
  .search-box {
    position: relative;
    display: none;
  }
  @media(min-width:768px){ .search-box { display: block; } }
  .search-box input {
    background: var(--light); border: none; outline: none;
    border-radius: 10px; padding: 8px 12px 8px 34px;
    font-family: inherit; font-size: .85rem; width: 200px;
    transition: width .25s, background .2s;
  }
  .search-box input:focus { background: #eee; width: 240px; }
  .search-box > i {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted); font-size: .8rem; pointer-events: none;
  }

  .iBtn {
    width: 40px; height: 40px; border-radius: 50%;
    border: none; background: transparent;
    color: var(--dark); font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s; text-decoration: none;
    flex-shrink: 0; -webkit-tap-highlight-color: transparent;
  }
  .iBtn:hover { background: var(--light); color: var(--dark); }
  .iBtn:active { background: var(--border); }

  /* Hide some nav icons on mobile */
  .iBtn.desktop-only { display: none; }
  @media(min-width:768px){ .iBtn.desktop-only { display: flex; } }

  .notif-wrap { position: relative; }
  .notif-dot {
    position: absolute; top: 7px; right: 7px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); border: 1.5px solid white;
    pointer-events: none;
  }

  .top-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--border); cursor: pointer;
    display: none;
  }
  @media(min-width:768px){ .top-avatar { display: block; } }

  .bottoms-avatar{
    width: 23px;
    height: 23px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
  }


  /* ════════════════════════════════════════════
     PAGE LAYOUT  (desktop 2-col / mobile 1-col)
  ════════════════════════════════════════════ */
  .page-wrap {
    max-width: 1040px; margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    /* Must NOT have overflow set — that breaks sticky topbar & body scroll */
  }
  @media(min-width:900px){
    .page-wrap {
      padding: 28px 16px;
      grid-template-columns: minmax(0,1fr) 300px;
      gap: 36px;
    }
  }
  @media(min-width:1100px){
    .page-wrap { grid-template-columns: minmax(0,1fr) 320px; }
  }

  /* ════════════════════════════════════════════
     FEED COLUMN
  ════════════════════════════════════════════ */
  .feed-col {
    min-width: 0;
    /* Extra space at bottom so last card isn't hidden under bottom nav */
    padding-bottom: calc(var(--bn-h) + 16px);
  }
  @media(min-width:900px){
    .feed-col { padding-bottom: 24px; }
  }

  /* ════════════════════════════════════════════
     STORIES
  ════════════════════════════════════════════ */
  .stories-wrap {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  @media(min-width:600px){
    .stories-wrap {
      border: 1px solid var(--border);
      border-radius: var(--rL);
      margin: 16px 0 16px;
    }
  }

  .stories-scroll {
    display: flex; gap: 12px; overflow-x: auto;
    padding: 12px 14px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
      justify-content: center;
  }
  .stories-scroll::-webkit-scrollbar { display: none; }

  .story-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 5px;
    flex-shrink: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .s-ring {
    width: 58px; height: 58px; border-radius: 50%;
    padding: 2.5px;
    transition: transform .15s;
  }
  .s-ring.active{
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  }
  @media(min-width:480px){ .s-ring { width: 64px; height: 64px; } }
  .s-ring.seen { background: #dbdbdb; }
  .story-item:active .s-ring { transform: scale(.92); }
  .s-ring img {
    width: 100%; height: 100%;
    border-radius: 50%; object-fit: cover;
    border: 2.5px solid white; display: block;
  }
  .s-add {
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--light); border: 2px dashed #ccc;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--blue); cursor: pointer;
    transition: background .15s;
  }
  @media(min-width:480px){ .s-add { width: 64px; height: 64px; } }
  .s-add:active { background: #e5f2ff; }
  .s-label {
    font-size: .68rem; color: var(--dark);
    max-width: 62px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
  }

  /* ════════════════════════════════════════════
     POST CARD
  ════════════════════════════════════════════ */
  .post-card {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    transition: box-shadow .2s;
  }
  @media(min-width:600px){
    .post-card {
      border: 1px solid var(--border);
      border-radius: var(--rL);
      margin-bottom: 16px;
    }
    .post-card:hover { box-shadow: var(--sh); }
  }

  /* ── Card Top ── */
  .card-top {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
  }
  @media(min-width:480px){ .card-top { padding: 12px 14px; } }

  .u-avatar-wrap { position: relative; flex-shrink: 0; }
  .u-avatar-wrap img {
    width: 36px; height: 36px;
    border-radius: 50%; object-fit: cover;
    border: 1.5px solid var(--border); display: block;
  }
  @media(min-width:480px){
    .u-avatar-wrap img { width: 38px; height: 38px; }
  }
  .u-online {
    position: absolute; bottom: 1px; right: 1px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--green); border: 2px solid white;
  }
  .u-info { flex: 1; min-width: 0; }
  .u-name {
    font-size: .85rem; 
    font-weight: 500;
    line-height: 1.2; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  @media(min-width:480px){ .u-name { font-size: .875rem; } }
  .u-name:hover { text-decoration: underline; }
  .u-time { font-size: .7rem; color: var(--muted); }
  .u-location { font-size: .7rem; color: var(--muted); }

  /* more menu — details/summary */
  .more-wrap { position: relative; }
  .more-wrap summary {
    list-style: none; cursor: pointer;
    width: 34px; height: 34px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--muted);
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .more-wrap summary:hover { background: var(--light); color: var(--dark); }
  .more-wrap summary:active { background: var(--border); }
  .more-wrap summary::-webkit-details-marker { display: none; }
  .more-menu {
    position: absolute; right: 0; top: 38px;
    background: white; border: 1px solid var(--border);
    border-radius: var(--r); box-shadow: var(--sh);
    min-width: 170px; z-index: 20; overflow: hidden;
  }
  .more-menu a {
    display: block; padding: 11px 16px;
    font-size: .85rem; color: var(--dark);
    text-decoration: none; transition: background .1s;
  }
  .more-menu a:hover { background: var(--light); }
  .more-menu a.danger { color: var(--red); font-weight: 600; }

  /* ── Media ── */
  .card-media { position: relative; line-height: 0; background: #000; overflow: hidden; }
  .card-media img,
  .card-media video {
    width: 100%;
    /* Square on mobile, up to 520px on larger screens */
    max-height: 100vw;
    object-fit: cover; display: block;
  }
  @media(min-width:480px){
    .card-media img, .card-media video { max-height: 480px; }
  }
  @media(min-width:900px){
    .card-media img, .card-media video { max-height: 520px; }
  }
  .media-badge {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,.52); backdrop-filter: blur(6px);
    color: white; font-size: .68rem; font-weight: 700;
    padding: 3px 9px; border-radius: 20px;
    display: flex; align-items: center; gap: 4px;
    pointer-events: none;
  }
  .play-btn-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }
  .play-circle {
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: white;
  }

  /* ── Like / Bookmark / Vote — CSS checkbox ── */
  .like-chk, .bk-chk, .vup-chk, .vdn-chk { display: none; }

  /* ── Card Actions ── */
  .card-actions {
    padding: 8px 10px 4px;
    display: flex; align-items: center; gap: 0;
  }
  @media(min-width:480px){ .card-actions { padding: 10px 12px 4px; } }

  .act-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 8px; border-radius: 8px;
    font-size: 1.2rem; color: var(--dark);
    cursor: pointer; border: none; background: none;
    font-family: inherit; text-decoration: none;
    transition: background .12s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
  }
  .act-btn:hover  { background: var(--light); transform: scale(1.06); color: var(--dark); }
  .act-btn:active { background: var(--border); transform: scale(.96); }
  .act-btn .cnt   { font-size: .75rem; font-weight: 600; color: var(--muted); }

  /* like label */
  .like-lbl {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 8px; border-radius: 8px;
    font-size: 1.2rem; color: var(--dark);
    cursor: pointer; user-select: none;
    transition: background .12s, transform .1s, color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .like-lbl:hover  { background: var(--light); transform: scale(1.06); }
  .like-lbl:active { transform: scale(.9); }
  .like-lbl .cnt   { font-size: .75rem; font-weight: 600; color: var(--muted); }
  .like-chk:checked ~ .card-actions .like-lbl { color: var(--red); }
  .like-chk:checked ~ .card-actions .like-lbl i::before { content: "\f417"; }

  /* like button (AJAX-based) */
  .like-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 8px; border-radius: 8px;
    font-size: 1.2rem; color: var(--dark);
    cursor: pointer; user-select: none; border: none; background: none;
    font-family: inherit; text-decoration: none;
    transition: background .12s, transform .1s, color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .like-btn:hover { background: var(--light); transform: scale(1.06); }
  .like-btn:active { transform: scale(.9); }
  .like-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .like-btn.liked { color: var(--red); }
  .like-btn.like-locked { opacity: 0.7; cursor: not-allowed; }
  .like-btn .like-count { font-size: .75rem; font-weight: 600; color: var(--muted); }
  .like-btn.liked .like-count { color: var(--red); }

  /* like button animation */
  @keyframes likeAnimation {
    0% { transform: scale(1); }
    25% { transform: scale(1.15); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  .like-btn.like-anim { animation: likeAnimation .6s ease-out forwards; }

  /* bookmark */
  .bk-lbl {
    display: flex; align-items: center;
    padding: 7px 8px; border-radius: 8px;
    font-size: 1.2rem; color: var(--dark);
    cursor: pointer; user-select: none;
    transition: background .12s, transform .1s;
    -webkit-tap-highlight-color: transparent;
  }
  .bk-lbl:hover  { background: var(--light); transform: scale(1.06); }
  .bk-lbl:active { transform: scale(.9); }
  .bk-chk:checked ~ .bk-lbl i::before { content: "\f143"; }

  /* vote widget */
  .vote-group {
    display: flex; align-items: center;
    background: var(--light); border-radius: 30px;
    padding: 3px 4px; gap: 0; margin-left: 2px;
  }
  .vup-lbl, .vdn-lbl {
    display: flex; align-items: center;
    padding: 5px 7px; border-radius: 20px;
    font-size: 1rem; color: var(--muted);
    cursor: pointer; user-select: none;
    transition: background .12s, color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .vup-lbl:hover, .vdn-lbl:hover { background: white; }
  .vup-lbl:active, .vdn-lbl:active { background: var(--border); }
  .vote-sep { width: 1px; height: 14px; background: var(--border); }
  .vote-num { font-size: .75rem; font-weight: 700; color: var(--dark); min-width: 26px; text-align: center; }
  .vup-chk:checked ~ .card-actions .vup-lbl { color: var(--red); }
  .vdn-chk:checked ~ .card-actions .vdn-lbl { color: var(--purple); }

  .flex-1 { flex: 1; }

  /* ── Card Meta ── */
  .card-meta { padding: 2px 14px 12px; }
  @media(min-width:480px){ .card-meta { padding: 4px 16px 14px; } }
  .likes-line { font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
  .caption-line { font-size: .85rem; line-height: 1.55; }
  .cap-user { font-weight: 600; cursor: pointer; margin-right: 4px; }
  .cap-user:hover { text-decoration: underline; }
  .hashtag { color: var(--blue); cursor: pointer; }
  .hashtag:hover { text-decoration: underline; }
  .view-comments {
    display: block; font-size: .83rem; color: var(--muted);
    margin-top: 4px; cursor: pointer; text-decoration: none;
  }
  .view-comments:hover { color: var(--dark); }
  .post-ago { font-size: .68rem; color: #c5c5c5; margin-top: 5px; letter-spacing: .3px; }

  /* ── Comment Row ── */
  .comment-row {
    border-top: 1px solid var(--border);
    padding: 9px 12px;
    display: flex; align-items: center; gap: 9px;
  }
  .comment-row img {
    width: 26px; height: 26px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
  }
  @media(min-width:480px){
    .comment-row { padding: 10px 14px; }
    .comment-row img { width: 28px; height: 28px; }
  }
  .c-input {
    flex: 1; border: none; outline: none;
    font-family: inherit; font-size: .85rem;
    background: transparent; color: var(--dark);
    min-width: 0;
  }
  .c-input::placeholder { color: #c0c0c0; }
  .c-post-btn {
    border: none; background: none; font-family: inherit;
    font-size: .85rem; font-weight: 700; color: var(--blue);
    cursor: pointer; padding: 2px 4px;
    opacity: .35; transition: opacity .15s;
    pointer-events: none; white-space: nowrap;
  }
  .c-post-btn.active { opacity: 1; pointer-events: auto; }

  /* ════════════════════════════════════════════
     SIDEBAR  (desktop only)
  ════════════════════════════════════════════ */
  .sidebar {
    display: none;
  }
  @media(min-width:900px){
    .sidebar {
      display: block;
      position: sticky; top: 80px;
    }
  }

  .own-profile {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  }
  .own-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid var(--border);
  }
  .own-name { font-size: .875rem; font-weight: 600; }
  .own-handle { font-size: .78rem; color: var(--muted); }
  .switch-link { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--blue); cursor: pointer; }

  .section-label {
    font-size: .72rem; font-weight: 700; color: var(--muted);
    letter-spacing: .6px; text-transform: uppercase; margin-bottom: 12px;
  }
  .suggest-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  }
  .sug-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid var(--border); flex-shrink: 0;
  }
  .sug-name { font-size: .8rem; font-weight: 600; }
  .sug-note { font-size: .72rem; color: var(--muted); }

  .fw-chk { display: none; }
  .fw-lbl {
    margin-left: auto; font-size: .78rem; font-weight: 700;
    color: var(--blue); cursor: pointer; user-select: none; flex-shrink: 0;
  }
  .fw-lbl::before { content: "Follow"; }
  .fw-chk:checked ~ .fw-lbl { color: var(--muted); }
  .fw-chk:checked ~ .fw-lbl::before { content: "Following"; }

  .sidebar-footer {
    font-size: .68rem; color: #ccc; margin-top: 22px; line-height: 2.2;
  }
  .sidebar-footer a { color: #ccc; text-decoration: none; }
  .sidebar-footer a:hover { text-decoration: underline; }

  /* ════════════════════════════════════════════
     UPLOAD MODAL
  ════════════════════════════════════════════ */
  .modal-content {
    border-radius: var(--rL); border: none; overflow: hidden;
    padding-bottom: var(--sab);
  }
  @media(max-width:480px){
    .modal-dialog {
      margin: auto 0 0 !important;
      max-width: 100% !important;
      width: 100%;
    }
    .modal-content {
      border-radius: var(--rL) var(--rL) 0 0 !important;
    }
  }

  .modal-header {
    border-bottom: 1px solid var(--border);
    padding: 13px 16px;
    position: relative;
  }
  /* drag handle on mobile */

  @media(min-width:481px){ .modal-header::before { display: none; } }

  .modal-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem; text-align: center; width: 100%; }

  .drop-zone {
    border: 2px dashed #ddd; border-radius: var(--r);
    padding: 40px 20px; text-align: center; cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  .drop-zone:hover { border-color: var(--blue); background: #f0f7ff; }
  .drop-zone i { font-size: 2.6rem; color: #ccc; display: block; margin-bottom: 10px; }
  .drop-cta { color: var(--blue); font-weight: 600; font-size: .875rem; }
  .drop-sub { font-size: .76rem; color: var(--muted); margin-top: 4px; }

  #previewBox { display: none; position: relative; border-radius: var(--r); overflow: hidden; }
  #previewBox img, #previewBox video {
    /* width: 100%; max-height: 280px; object-fit: cover; display: block; */
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    display: block;
    background: black;
  }
  .clear-preview-btn {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,.5); border: none;
    color: white; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }

  .cap-textarea {
    width: 100%; border: 1px solid var(--border); border-radius: var(--r);
    padding: 10px 14px; font-family: inherit; font-size: .875rem;
    resize: none; outline: none; transition: border-color .15s;
    margin-top: 12px;
  }
  .cap-textarea:focus { border-color: #aaa; }

  .loc-wrap { position: relative; margin-top: 8px; }
  .loc-wrap > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
  .loc-input {
    width: 100%; border: 1px solid var(--border); border-radius: var(--r);
    padding: 10px 14px 10px 36px; font-family: inherit; font-size: .875rem;
    outline: none; transition: border-color .15s;
  }
  .loc-input:focus { border-color: #aaa; }

  .share-btn {
    width: 100%; margin-top: 14px;
    background: var(--blue); color: white;
    border: none; border-radius: var(--r);
    padding: 13px; font-family: inherit;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    transition: background .15s; letter-spacing: .2px;
  }
  .share-btn:hover  { background: var(--blue2); }
  .share-btn:active { background: #0077cc; }

  /* ════════════════════════════════════════════
     STORY VIEWER
  ════════════════════════════════════════════ */
  .story-overlay {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,.94);
    align-items: center; justify-content: center;
  }
  .story-overlay.open { display: flex; }
  .story-viewer {
    position: relative; width: min(360px, 96vw);
    border-radius: 18px; overflow: hidden; background: #111;
  }
  .story-viewer img { width: 100%; display: block; max-height: 82dvh; object-fit: cover; }
  .story-top-bar {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 10px 12px 0; display: flex; gap: 4px;
  }
  .s-prog { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
  .s-prog-fill { height: 100%; width: 0; background: white; animation: storyProgress 5s linear forwards; }
  @keyframes storyProgress { to { width: 100%; } }
  .story-meta {
    position: absolute; top: 22px; left: 12px; right: 40px;
    display: flex; align-items: center; gap: 8px;
  }
  .story-meta img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid white; object-fit: cover; }
  .story-uname { color: white; font-size: .83rem; font-weight: 600; }
  .story-time  { color: rgba(255,255,255,.55); font-size: .7rem; margin-left: 4px; }
  .story-close {
    position: absolute; top: 14px; right: 12px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0,0,0,.4); border: none;
    color: white; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }

  /* ════════════════════════════════════════════
     MOBILE BOTTOM NAV — real app feel
  ════════════════════════════════════════════ */
  .bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    /* Extend into home indicator zone */
    height: var(--bn-h);
    padding-bottom: var(--sab);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    z-index: 200;
    align-items: flex-start;
    padding-top: 4px;
    /* horizontal safe areas */
    padding-left: var(--sal);
    padding-right: var(--sar);
  }
  @media(min-width:900px){ .bottom-nav { display: none; } }

  .bn-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    font-size: 1.3rem; color: var(--dark);
    cursor: pointer; text-decoration: none; padding: 4px 0;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .bn-item:hover  { color: var(--dark); }
  .bn-item:active { opacity: .6; }
  .bn-item.active > i { color: var(--dark); }
  .bn-item span   { font-size: .6rem; color: #313131; font-weight: 500; }

  /* Center upload button — pill style */
  .bn-upload {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: white;
    margin-top: -4px;
    transition: transform .15s, background .15s;
  }
  .bn-upload:active { transform: scale(.9); }

  .bn-badge {
    position: absolute; top: 2px; right: calc(50% - 20px);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); border: 1.5px solid white;
    pointer-events: none;
  }

  /* ════════════════════════════════════════════
     SCROLL TO TOP
  ════════════════════════════════════════════ */
  #scrollTop {
    position: fixed; bottom: calc(var(--bn-h) + 14px); right: 16px;
    width: 40px; height: 40px; border-radius: 50%;
    background: white; border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    color: var(--dark); font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 100; text-decoration: none;
    opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .2s;
  }
  @media(min-width:900px){ #scrollTop { bottom: 20px; right: 22px; } }
  #scrollTop.visible { opacity: 1; pointer-events: auto; }
  #scrollTop:hover { transform: translateY(-3px); }

  /* ════════════════════════════════════════════
     INSTALL BANNER (PWA)
  ════════════════════════════════════════════ */
  #installBanner {
    display: none;
    position: fixed; bottom: var(--bn-h); left: 0; right: 0; z-index: 250;
    background: var(--dark); color: white;
    padding: 12px 16px;
    align-items: center; gap: 12px;
    font-size: .85rem;
  }
  #installBanner.show { display: flex; }
  #installBanner img {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  }
  #installBanner .install-text { flex: 1; line-height: 1.3; }
  #installBanner .install-text strong { display: block; font-size: .9rem; }
  #installBanner button {
    background: var(--blue); color: white; border: none;
    border-radius: 8px; padding: 7px 14px;
    font-family: inherit; font-size: .8rem; font-weight: 700;
    cursor: pointer; flex-shrink: 0;
  }
  #installBanner .dismiss {
    background: transparent; border: 1px solid rgba(255,255,255,.3);
    color: white; padding: 7px 12px;
  }

  /* ════════════════════════════════════════════
     OFFLINE TOAST
  ════════════════════════════════════════════ */
  #offlineBar {
    display: none;
    position: fixed; top: calc(var(--sat) + 56px); left: 0; right: 0; z-index: 400;
    background: #333; color: white; text-align: center;
    font-size: .8rem; padding: 8px 16px;
  }
  #offlineBar.show { display: block; }

  /* ════════════════════════════════════════════
     SPLASH / LOADING (first paint)
  ════════════════════════════════════════════ */
  .skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
  }
  @keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ════════════════════════════════════════════
     ANIMATIONS
  ════════════════════════════════════════════ */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .post-card { animation: fadeUp .38s ease both; }
  .post-card:nth-child(1){ animation-delay:.00s }
  .post-card:nth-child(2){ animation-delay:.05s }
  .post-card:nth-child(3){ animation-delay:.10s }
  .post-card:nth-child(4){ animation-delay:.15s }
  .post-card:nth-child(5){ animation-delay:.20s }
  .post-card:nth-child(6){ animation-delay:.25s }
  .post-card:nth-child(7){ animation-delay:.30s }

  @keyframes heartPop {
    0%  { transform: scale(1); }
    40% { transform: scale(1.55); }
    70% { transform: scale(.85); }
    100%{ transform: scale(1); }
  }
  .like-chk:checked ~ .card-actions .like-lbl {
    animation: heartPop .32s ease;
  }

  /* Pull-to-refresh indicator */
  #ptr {
    height: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; color: var(--muted);
    transition: height .2s;
    gap: 8px;
  }
  #ptr.show { height: 44px; }

  /* ════════════════════════════════════════════
     TABLET LAYOUT  (481 – 899)
  ════════════════════════════════════════════ */
  @media(min-width:600px) and (max-width:899px){
    .page-wrap { padding: 16px; }
    .feed-col { max-width: 560px; margin: 0 auto; }
  }

  /* ════════════════════════════════════════════
     LARGE DESKTOP
  ════════════════════════════════════════════ */
  @media(min-width:1200px){
    .page-wrap { max-width: 1100px; }
  }









/* ─────────────────────────────
   Scoped Variables (SAFE)
   ───────────────────────────── */

#district-overlay {

  --dist-bg: #0d1117;
  --dist-surface: #161b22;
  --dist-surface2: #1f2937;
  --dist-border: #30363d;
  --dist-accent: #f97316;
  --dist-accent2: #fb923c;
  --dist-text: #e6edf3;
  --dist-muted: #8b949e;
  --dist-success: #22c55e;
  --dist-radius: 16px;

  position: fixed;
  inset: 0;
  z-index: 999999;

  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  justify-content: center;

  animation: distFadeIn .25s ease;
}

#district-overlay.hidden {
  display: none;
}


/* ─────────────────────────────
   Animations
   ───────────────────────────── */

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

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

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


/* ─────────────────────────────
   Modal
   ───────────────────────────── */

.distmodal {

  background: var(--dist-surface);
  border: 1px solid var(--dist-border);
  border-radius: var(--dist-radius);

  width: min(480px, 94vw);

  padding: 32px 28px 28px;

  position: relative;

  box-shadow: 0 24px 60px rgba(0,0,0,0.6);

  animation: distSlideUp .3s cubic-bezier(.16,1,.3,1);
}


/* Badge */

.modal-badge {

  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: rgba(249,115,22,.12);

  color: var(--dist-accent);

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;

  text-transform: uppercase;

  padding: 4px 10px;

  border-radius: 20px;

  margin-bottom: 14px;

  border: 1px solid rgba(249,115,22,.25);
}


/* Heading */

.distmodal h2 {

  font-size: 22px;
  font-weight: 700;

  line-height: 1.3;

  margin-bottom: 6px;

  color: #fff;
}


/* Paragraph */

.distmodal p {

  font-size: 13.5px;

  color: var(--dist-muted);

  margin-bottom: 24px;

  line-height: 1.6;
}


/* ─────────────────────────────
   Geo Button
   ───────────────────────────── */

.btn-geo {

  width: 100%;

  padding: 13px 18px;

  background: linear-gradient(
    135deg,
    var(--dist-accent),
    var(--dist-accent2)
  );

  border: none;

  border-radius: 10px;

  color: #fff;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: opacity .2s, transform .15s;

  margin-bottom: 16px;
}

.btn-geo:hover {

  opacity: .9;
  transform: translateY(-1px);
}

.btn-geo:active {

  transform: translateY(0);
}

.btn-geo:disabled {

  opacity: .55;
  cursor: not-allowed;
  transform: none;
}


/* ─────────────────────────────
   Divider
   ───────────────────────────── */

.divider {

  display: flex;
  align-items: center;

  gap: 10px;

  color: var(--dist-muted);

  font-size: 12px;

  margin-bottom: 16px;
}

.divider::before,
.divider::after {

  content: '';

  flex: 1;

  height: 1px;

  background: var(--dist-border);
}


/* ─────────────────────────────
   Select Dropdown
   ───────────────────────────── */

.select-wrap {

  position: relative;

  margin-bottom: 16px;
}

.select-wrap select {

  width: 100%;

  appearance: none;

  background: var(--dist-surface2);

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

  color: var(--dist-text);

  border-radius: 10px;

  padding: 13px 40px 13px 14px;

  font-size: 14px;

  font-family: 'Poppins', sans-serif;

  cursor: pointer;

  transition: border-color .2s;

  outline: none;
}

.select-wrap select:focus {

  border-color: var(--dist-accent);
}

.select-wrap::after {

  content: '▾';

  position: absolute;

  right: 14px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--dist-muted);

  pointer-events: none;

  font-size: 13px;
}


/* ─────────────────────────────
   Confirm Button
   ───────────────────────────── */

.btn-confirm {

  width: 100%;

  padding: 13px;

  background: var(--dist-surface2);

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

  color: var(--dist-text);

  border-radius: 10px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition: background .2s, border-color .2s;
}

.btn-confirm:hover {

  background: #2d3748;

  border-color: var(--dist-accent);
}


/* ─────────────────────────────
   Status Text
   ───────────────────────────── */

#geo-status {

  font-size: 12.5px;

  color: var(--dist-muted);

  margin-bottom: 14px;

  min-height: 18px;

  display: flex;

  align-items: center;

  gap: 6px;
}

#geo-status.success {

  color: var(--dist-success);
}

#geo-status.error {

  color: #f87171;
}


/* Spinner */

.spinner {

  width: 14px;

  height: 14px;

  border: 2px solid currentColor;

  border-top-color: transparent;

  border-radius: 50%;

  animation: distSpin .6s linear infinite;

  display: none;
}

.spinner.active {

  display: inline-block;
}

.bottom-nav2{
    padding: 10px;
    height: 67px;
}
  .bn-upload2 {
    width: auto;
    padding: 0 12px;
    height: 44px; 
    border-radius: 14px;
    background: linear-gradient(117deg, rgb(104 2 2) 0%, rgb(217 89 46) 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: white;
    margin-top: -4px;
    transition: transform .15s, background .15s;
  }

  .logintstrexfty{
    font-size: 0.8rem;
    color: #434343;
    margin-top: auto;
    margin-bottom: auto;
  }

  .logintstrexftybigs{
    margin-top: auto;
    margin-bottom: auto;
  }

  .bn-upload2bigs{
    width: auto;
    padding: 5px 12px;
    /* height: 44px; */
    border-radius: 8px;
    background: linear-gradient(117deg, rgb(104 2 2) 0%, rgb(217 89 46) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    /* margin-top: -4px;*/
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 15px;
    transition: transform .15s, background .15s;
  }

  .jfhusuhhfu{
        display: flex;
  }
   @media screen and (max-width: 700px) {
    .jfhusuhhfu{
          display: none;
    }
  }

  .btn-close{
    right: 14px;
    background: #fff;
    border: 0;
    font-size: 19px;
  }




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

  /* ═══════════════════════════════
     VIDEO PLAYER
  ═══════════════════════════════ */
  .vid-wrap {
    cursor: pointer;
    position: relative;
    background: #000;
    line-height: 0;
  }

  /* The actual video element */
  .vid-wrap video {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    display: block;
    background: black;
  }

  /* Centre play/pause overlay */
  .vid-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    /* Fade in on pause, fade out after play */
    transition: opacity .25s;
    pointer-events: none;
  }
  .vid-overlay.hidden { opacity: 0; }

  .vid-play-btn {
    width: 62px; height: 62px; border-radius: 50%;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255,255,255,.6);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.5rem;
    /* Bounce in */
    animation: vidBtnPop .2s ease;
  }
  @keyframes vidBtnPop {
    from { transform: scale(.7); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
  }
  /* Shift play icon slightly right for visual balance */
  .vid-play-btn .bi-play-fill { margin-left: 4px; }

  /* Bottom bar: progress + time + mute */
  .vid-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    padding: 20px 12px 10px;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
  }
  /* Show bar when playing or on hover */
  .vid-wrap.playing .vid-bar    { opacity: 1; pointer-events: auto; }
  .vid-wrap:hover    .vid-bar   { opacity: 1; pointer-events: auto; }

  .vid-progress-wrap {
    width: 100%; height: 3px;
    background: rgba(255,255,255,.35);
    border-radius: 2px; overflow: hidden;
    margin-bottom: 7px;
    cursor: pointer;
  }
  .vid-progress-fill {
    height: 100%; width: 0%;
    background: white;
    border-radius: 2px;
    transition: width .25s linear;
  }

  .vid-controls {
    display: flex; align-items: center; justify-content: space-between;
  }
  .vid-time {
    color: rgba(255,255,255,.9);
    font-size: .72rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .vid-mute-btn {
    background: none; border: none; color: rgba(255,255,255,.9);
    font-size: 1rem; cursor: pointer; padding: 2px 4px;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
  }
  .vid-mute-btn:active { opacity: .6; }

  /* Loading spinner while buffering */
  .vid-wrap.buffering .vid-play-btn::after {
    content: '';
    position: absolute;
    width: 62px; height: 62px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .8s linear infinite;
  }


  .userprofiledetailsSection {
            margin-bottom: 30px;
          }

          .profile-header-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
          }

          .profile-cover {
            height: 90px;
                background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
          }

          .profile-info {
            padding: 20px;
            display: flex;
            align-items: flex-start;
            gap: 20px;
          }

          .profile-avatar {
            margin-top: -60px;
          }

          .profile-pic {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid white;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          }

          .profile-details {
            flex: 1;
            padding-top: 20px;
          }

          .profile-name {
            font-size: 24px;
            font-weight: 700;
            margin: 0 0 5px 0;
            color: #333;
          }

          .profile-username {
            font-size: 14px;
            color: #667eea;
            font-weight: 600;
            margin: 0 0 8px 0;
          }

          .profile-location {
            font-size: 13px;
            color: #777;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 5px;
          }

          .profile-location i {
            color: #764ba2;
          }

          @media (max-width: 768px) {
            .profile-header-card {
              border-radius: 8px;
            }

            .profile-cover {
              height: 60px;
            }

            .profile-pic {
              width: 90px;
              height: 90px;
            }

            .profile-name {
              font-size: 20px;
            }

            .profile-info {
              padding: 15px;
            }
          }









.mobile-search-popup {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;

}
.mobile-search-popup.active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-search-content {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 18px 18px 24px;
  box-shadow: 0 -12px 30px rgba(0,0,0,0.18);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  position: relative;
}
.mobile-search-popup.active .mobile-search-content {
  transform: translateY(0);
}
.mobile-search-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: transparent;
  color: #333;
  font-size: 1.3rem;
}
.mobile-search-header {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.mobile-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e5e5;
  background: #f8f8f8;
  border-radius: 999px;
  padding: 10px 14px;
}
.mobile-search-field input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 1rem;
}
.mobile-search-field input::placeholder {
  color: #888;
}
.mobile-search-note {
  margin-top: 12px;
  font-size: 0.88rem;
  color: #666;
}
@media (min-width: 768px) {
  .mobile-search-popup { display: none; }
}