/* FortuneSpace — card feed with profile pics on top (mobile-first, 1-col on phones & tablets) */

:root{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --panel-border:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;

  /* background behind the feed cards */
  --feed-bg:#111827;

  --gap:16px;
  --radius:12px;
  --minCol:300px; /* desktop min card width; overridden on small screens */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%; height:auto; display:block}

/* Container */
.container{max-width:1200px;margin:24px auto;padding:0 16px}

/* Header (NOT sticky) */
.fs-appbar{
  position:static;
  background:#fff;
  border-bottom:1px solid var(--panel-border);
  backdrop-filter:saturate(120%) blur(6px);
  z-index:300;
}
.fs-appbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.fs-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#111} .fs-brand img {
  width: 72px !important;
  height: 72px !important;
  max-width: none;
  object-fit: contain;
  animation: breathe 4s ease-in-out infinite;
}

/* Top actions (desktop/tablet) */
.app-actions{
  display:flex;align-items:center;gap:16px;
  overflow-x:auto;padding:6px 0;
  scrollbar-width:none;
}
.app-actions::-webkit-scrollbar{display:none}
.link-nav{color:#334155;text-decoration:none;padding:8px 10px;border-radius:10px;white-space:nowrap}
.link-nav.active{background:#eef2f7;color:#111}

/* Buttons */
.fs-input{background:#fff;color:#111;border:1px solid #d1d5db;border-radius:10px;padding:8px 10px;min-width:160px}
.btn{background:#111827;color:#fff;padding:10px 14px;border-radius:10px;border:0;font-weight:600;cursor:pointer}
.btn.btn-ghost{background:#fff;color:#111;border:1px solid #d1d5db}
.btn.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:12px;background:#f1f5f9;color:#0f172a;border:1px solid #e5e7eb}
.btn.btn-danger{background:#ef4444;color:#fff}

/* Buttons */
.btn.btn-primary{background:#2563eb;border:1px solid #2563eb;color:#fff}
.btn.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8}
.btn.btn-secondary{background:#e5e7eb;color:#111827;border:1px solid #d1d5db}
.btn.btn-secondary:hover{background:#d1d5db}

/* Form controls */
.form-control,.form-select{width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:#0f172a}
.form-control::placeholder{color:#94a3b8}
textarea.form-control{min-height:80px;resize:vertical}

/* Simple grid utilities */
.row{display:flex;flex-wrap:wrap}
.g-3{gap:16px}
.col-md-6,.col-md-4{flex:1 0 100%}
@media(min-width:768px){
  .col-md-6{flex:0 0 50%}
  .col-md-4{flex:0 0 33.3333%}
}

/* Accordion */
.acc{border:1px solid #e5e7eb;border-radius:12px;margin-bottom:12px;background:#fff}
.acc-h{padding:12px 16px;display:flex;justify-content:space-between;cursor:pointer;background:#fafafa;border-radius:12px}
.acc-c{padding:16px;display:none}
.acc.open .acc-c{display:block}

/* Form actions */
.form-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Avatar (header) — SQUARE */
.avatar-link{display:inline-flex}
.avatar{width:36px;height:36px;border-radius:10px;border:1px solid #e5e7eb;display:block;object-fit:cover}

/* ===== Mobile menu (hidden by default) ===== */
.mobile-menu-toggle{
  display:none;                 /* hidden on desktop */
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  width:40px;height:40px;
  padding:0;
  align-items:center;justify-content:center;
  color:#0f172a;
}
.mobile-menu{
  display:none;                 /* IMPORTANT: hide by default */
  position:fixed;
  top:64px; left:0; right:0; bottom:0;
  background:#fff;
  border-top:1px solid var(--panel-border);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  z-index:1000;                 /* ensure it sits over content */
}
.mobile-menu.is-open{ display:block; }
.mobile-menu-content{ padding:12px 16px; display:flex; flex-direction:column; gap:6px }
.mobile-nav-item{
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:10px;
  text-decoration:none; color:#0f172a;
}
.mobile-nav-item:hover{ background:#f1f5f9 }
.mobile-menu-divider{ height:1px; background:#e5e7eb; margin:6px 0 }

/* Hero (optional) */
.hero{padding:28px 0 8px}

/* ===== Grid of cards (single column on ≤1024px) ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--minCol),1fr));
  gap:var(--gap);
}

/* Card */
.card.post-card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  margin-bottom:16px;
  position:relative; /* allow absolute elements like timestamp */
}

/* Profile pictures (top row) — SQUARE */
.card-profile-section{
  padding:12px 16px 8px 16px;
  border-bottom:1px solid #f1f5f9;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.profile-pictures{display:flex;gap:8px;align-items:center}
.profile-pic{
  width:45px;height:45px;border-radius:10px;
  border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);
  object-fit:cover;display:block
}
.profile-pic-placeholder{
  width:45px;height:45px;border-radius:10px;
  background:#f1f5f9;border:2px solid #e5e7eb;
  display:flex;align-items:center;justify-content:center;
  color:#9ca3af;font-size:18px
}

/* Content (username + time + text) */
.card-content{padding:12px 16px}
.post-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.post-meta-left{display:flex;align-items:center;gap:8px}
.username{font-weight:700;color:#0f172a;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-time{color:var(--muted);font-size:12px}
.post-caption{color:var(--text);font-size:14px;line-height:1.5;margin-top:6px}
.post-caption .more-link{color:#10b981;font-weight:600}
.post-username{color:#3b82f6;text-decoration:none;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-username:hover{text-decoration:underline}

/* Leader monogram username */
.lm{display:inline-flex;align-items:baseline;gap:.45ch;white-space:nowrap}
.lm__mark{line-height:.9;display:inline-block;transform:translateY(.06em)}
.lm__name{font-weight:700;letter-spacing:.1px}

.lm--tangerine .lm__mark{font-family:"Tangerine",cursive;font-weight:700;font-size:1.6em}
.lm--italianno .lm__mark{font-family:"Italianno",cursive;font-weight:400;font-size:1.45em}

a.post-username .lm__name{text-decoration:inherit}

.comment-item__user--anon{color:#94a3b8;font-weight:600}

/* Followers badge */
.followers-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#0f172a;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:2px 8px;white-space:nowrap}
.followers-badge .dot{width:4px;height:4px;border-radius:50%;background:#6366f1}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#0f172a;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:2px 8px;white-space:nowrap}
.global-stats{margin:4px 0 18px;display:flex;gap:14px;color:#64748b}



/* Media (bottom) */
.card-media{position:relative}
.card-media img.fs-img{
  width:100%;height:auto;display:block;
  /* keep natural aspect; max height is just a safety for legacy single-image posts */
  max-height:400px; /* safety cap for old layout */
}

/* Column wrapper for the big image + thumbnails */
.image-carousel{display:flex;flex-direction:column;gap:10px} /* gap between big image and thumbnails (was 20px) */

/* Big image area */
.main-image{position:relative}
.main-image img{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:cover;
  margin-top:12px;
  margin-bottom:16px;
  border-radius:0
}

/* Blur-up wrapper for smoother image loading */
.img-wrap{position:relative;overflow:hidden;background-size:cover;background-position:center}
.img-wrap.no-blur{background:none !important}
.img-wrap img{opacity:0;transition:opacity .25s ease;display:block;width:100%;height:auto}
.img-wrap img.loaded{opacity:1}


/* Thumbnails row */
.thumbnail-scroll{
  display:flex;overflow-x:auto;gap:8px;  /* gap between each thumb */
  padding-bottom:6px;                     /* breathing space below the thumbs */
  margin-top:0                           /* space ABOVE the thumbs (0 keeps them tight to the big image) */
}
.thumbnail-scroll .thumb{
  height:84px;width:84px;      /* thumbnail size */
  border-radius:0px;           /* 0 = square thumbs; raise to round them */
  cursor:pointer;opacity:.7;
  border:2px solid transparent;
  transition:border .2s ease,opacity .2s ease
}
.thumbnail-scroll .thumb.active{border:2px solid #fff;opacity:1}

/* Optional small counter chip (if you use it) */
.image-indicator{
  position:absolute;top:12px;right:12px;
  background:rgba(0,0,0,0.7);color:#fff;
  padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600
}

/* Empty state */
.empty-state{text-align:center;padding:40px 20px;color:var(--muted)}
.empty-state i{font-size:48px;margin-bottom:12px;opacity:.5}

/* Footer is hidden (remove “Fast images / Auto WebP / Made with Laravel”) */
.site-footer{display:none}

/* ===== TikTok-style viewer ===== */

body.viewer-open, body.modal-open{overflow:hidden}

.post-viewer{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1500}
.post-viewer.is-open{display:flex}
.post-viewer__backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.85);backdrop-filter:blur(6px)}
.post-viewer__content{position:relative;z-index:1;width:min(900px,96vw);height:min(92vh,720px);background:linear-gradient(180deg,#0f172a 0%,#0b1526 100%);border-radius:22px;box-shadow:0 24px 70px rgba(15,23,42,0.55);display:flex;flex-direction:column;overflow:hidden;color:#fff}
.post-viewer__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 12px}
.post-viewer__user{display:flex;align-items:center;gap:12px}
.post-viewer__avatar{
  width:48px;
  height:48px;
  border-radius:12px;
  object-fit:cover;
  border:2px solid rgba(148,163,184,0.35);
}
.post-viewer__username{color:#fff;font-weight:600;text-decoration:none;font-size:16px}
.post-viewer__username[aria-disabled="true"]{pointer-events:none;opacity:.65}
.post-viewer__meta{display:block;font-size:13px;color:rgba(226,232,240,0.7);margin-top:2px}
.post-viewer__close{background:rgba(15,23,42,0.55);border:1px solid rgba(148,163,184,0.4);width:40px;height:40px;border-radius:999px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,transform .2s ease}
.post-viewer__close:hover{background:rgba(15,23,42,0.85);transform:scale(1.03)}
.post-viewer__body{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.post-viewer__image{max-width:100%;max-height:100%;object-fit:cover;border-radius:18px;box-shadow:0 18px 45px rgba(15,23,42,0.45)}
.post-viewer__actions{
  --viewer-actions-edge:clamp(16px,4vh,32px);
  position:absolute;
  top:50%;
  right:clamp(16px,2.8vw,28px);
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,1.8vh,18px);
  padding:var(--viewer-actions-edge) 0;
  pointer-events:auto;
}
.viewer-action{background:none;border:0;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .2s ease,color .2s ease}
.viewer-action__icon{width:clamp(48px,6vh,58px);height:clamp(48px,6vh,58px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,3.5vh,22px);background:rgba(15,23,42,0.55);border:1px solid rgba(148,163,184,0.35);backdrop-filter:blur(10px);transition:background .2s ease,border .2s ease,transform .2s ease}
.viewer-action__count{font-size:13px;font-weight:600;color:#e2e8f0}
.viewer-action__label{font-size:13px;font-weight:600;color:#e2e8f0}
.viewer-action:hover{transform:translateY(-3px)}
.viewer-action:hover .viewer-action__icon{background:rgba(99,102,241,0.25);border-color:#818cf8}
.viewer-action.is-active .viewer-action__icon{background:#f43f5e;border-color:#fda4af}
.viewer-action.is-active .viewer-action__icon i{color:#fff}
.post-viewer__footer{padding:18px 24px 24px;background:linear-gradient(0deg,rgba(15,23,42,0.92),rgba(15,23,42,0.2));display:flex;flex-direction:column;gap:10px;min-height:92px}
.post-viewer__caption{margin:0;font-size:15px;line-height:1.55;color:#e2e8f0}
.post-viewer__gift-total{font-size:13px;font-weight:600;color:#fbbf24}
.post-viewer__toast{position:absolute;left:50%;bottom:28px;transform:translate(-50%,20px);background:rgba(15,23,42,0.92);border:1px solid rgba(148,163,184,0.35);padding:10px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(15,23,42,0.4);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.post-viewer__toast.is-visible{opacity:1;transform:translate(-50%,0)}

.comment-sheet,.gift-panel{position:fixed;left:50%;bottom:0;width:min(560px,94vw);background:#0f172a;border-top-left-radius:22px;border-top-right-radius:22px;box-shadow:0 -20px 55px rgba(15,23,42,0.45);color:#fff;z-index:1600;transform:translate(-50%,110%);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
.comment-sheet.is-open,.gift-panel.is-open{transform:translate(-50%,0);opacity:1;pointer-events:auto}

.comment-sheet{display:flex;flex-direction:column;max-height:70vh}
.comment-sheet__header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid rgba(148,163,184,0.2)}
.comment-sheet__title{font-size:16px;font-weight:600}
.comment-sheet__count{margin-left:8px;font-size:13px;color:rgba(226,232,240,0.65)}
.comment-sheet__close{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.comment-sheet__body{flex:1;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:16px}
.comment-item{display:flex;gap:12px}
.comment-item__avatar{
  width:36px;
  height:36px;
  border-radius:10px;
  background:#192234;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#e2e8f0;
  overflow:hidden;
  flex-shrink:0;
}
.comment-item__avatar--img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.comment-item__content{flex:1;display:flex;flex-direction:column;gap:4px}
.comment-item__meta{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(226,232,240,0.7)}
.comment-item__user{font-weight:600;color:#fff}
.comment-item__time{font-size:12px;color:rgba(226,232,240,0.55)}
.comment-item__text{color:#e2e8f0;font-size:14px;line-height:1.5}
.comment-sheet__status{text-align:center;padding:22px 12px;color:rgba(226,232,240,0.7);font-size:14px}
.comment-sheet__form{display:flex;gap:10px;padding:12px 20px 20px;border-top:1px solid rgba(148,163,184,0.2)}
.comment-sheet__form input{flex:1;border-radius:999px;border:1px solid rgba(148,163,184,0.25);background:rgba(15,23,42,0.65);color:#fff;padding:10px 16px}
.comment-sheet__form button{background:#6366f1;color:#fff;border:none;border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer;transition:background .2s ease}
.comment-sheet__form button:hover{background:#4f46e5}
.comment-sheet__form.is-submitting button{opacity:.65;pointer-events:none}

.gift-panel{display:flex;flex-direction:column;gap:16px;padding:20px 20px 22px;max-height:70vh}
.gift-panel__header{display:flex;align-items:center;justify-content:space-between}
.gift-panel__title{margin:0;font-size:18px;font-weight:600}
.gift-panel__close{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.gift-panel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;max-height:240px;overflow-y:auto;padding-right:4px}
.gift-panel__status{text-align:center;padding:26px 0;color:rgba(226,232,240,0.7)}
.gift-item{background:rgba(30,41,59,0.85);border:1px solid rgba(148,163,184,0.25);border-radius:16px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .2s ease,border .2s ease,background .2s ease}
.gift-item:hover{transform:translateY(-2px);border-color:#6366f1}
.gift-item.is-selected{background:rgba(99,102,241,0.15);border-color:#818cf8}
.gift-item__emoji{font-size:28px}
.gift-item__name{font-size:14px;font-weight:600;text-align:center}
.gift-item__coins{font-size:12px;color:#fbbf24}
.gift-panel__custom{display:flex;flex-direction:column;gap:10px}
.gift-panel__custom label{font-size:13px;color:rgba(226,232,240,0.7)}
.gift-panel__custom-row{display:flex;gap:10px}
.gift-panel__custom-row input{flex:1;border-radius:12px;border:1px solid rgba(148,163,184,0.25);background:rgba(15,23,42,0.65);color:#fff;padding:10px 14px}
.gift-panel__send{background:#6366f1;color:#fff;border:none;border-radius:12px;padding:10px 18px;font-weight:600;cursor:pointer;transition:background .2s ease}
.gift-panel__send:hover{background:#4f46e5}
.gift-panel__send[disabled]{opacity:.5;pointer-events:none}
.gift-panel__note{font-size:13px;color:#f87171;min-height:18px}

.auth-intercept{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1700}
.auth-intercept.is-open{display:flex}
.auth-intercept__backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.78);backdrop-filter:blur(6px)}
.auth-intercept__content{position:relative;z-index:1;background:#0f172a;border-radius:22px;padding:32px 28px;width:min(420px,90vw);border:1px solid rgba(148,163,184,0.35);box-shadow:0 26px 65px rgba(15,23,42,0.55);display:flex;flex-direction:column;gap:18px;text-align:center;color:#e2e8f0}
.auth-intercept__dismiss{position:absolute;top:16px;right:16px;background:none;border:0;color:#94a3b8;font-size:20px;cursor:pointer}
.auth-intercept__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.auth-intercept__btn{flex:1;min-width:140px;padding:12px 16px;border-radius:999px;font-weight:600;text-decoration:none;display:inline-flex;justify-content:center}
.auth-intercept__btn--ghost{background:rgba(148,163,184,0.18);color:#e2e8f0;border:1px solid rgba(148,163,184,0.28)}
.auth-intercept__btn--ghost:hover{background:rgba(148,163,184,0.3)}
.auth-intercept__btn--primary{background:#6366f1;color:#fff;border:1px solid transparent}
.auth-intercept__btn--primary:hover{background:#4f46e5}

.comment-sheet::-webkit-scrollbar,.gift-panel__grid::-webkit-scrollbar{width:6px}
.comment-sheet::-webkit-scrollbar-thumb,.gift-panel__grid::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.35);border-radius:999px}

@media (max-width:900px){
  .post-viewer__content{width:96vw;height:90vh}
  .post-viewer__actions{right:clamp(14px,4vw,20px)}
  .viewer-action__icon{width:52px;height:52px;font-size:20px}
}

@media (max-width:768px){
  .post-viewer__content{width:100vw;height:100vh;border-radius:0}
  .post-viewer__header{padding:16px 18px 10px}
  .post-viewer__body{padding:16px 16px 80px}
  .post-viewer__actions{top:auto;right:clamp(12px,5vw,20px);bottom:20px;transform:none;padding:0;gap:clamp(10px,2vh,14px);bottom:calc(20px + env(safe-area-inset-bottom))}
  .comment-sheet,.gift-panel{width:100vw;border-radius:22px 22px 0 0}
}

@media (max-width:520px){
  .gift-panel__grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
  .viewer-action__icon{width:48px;height:48px}
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);z-index:2000;padding:20px
}
.lightbox.is-open{display:flex}
.lightbox__img{max-width:100vw;max-height:100vh;border-radius:0!important}
.lightbox__close{
  position:absolute;top:14px;right:14px;top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));width:40px;height:40px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer
}



/* Auth pages keep header minimal */
.auth-page .app-actions{display:none}

/* ===== Responsive ===== */

/* Phones (always 1 column) */
@media (max-width:768px){
  :root{ --minCol: 100%; --gap: 12px; }

  .container{padding:0 12px;margin:16px auto}
  .card.post-card{margin-bottom:12px}

  .profile-pic{width:40px;height:40px}
  .profile-pic-placeholder{width:40px;height:40px;font-size:16px}

  .fs-input{min-width:120px}

  /* Desktop actions hidden, hamburger shown */
  .app-actions{display:none}
  .mobile-menu-toggle{display:inline-flex}
}

/* Tablets (still 1 column) */
@media (min-width:769px) and (max-width:1024px){
  :root{ --minCol: 100%; }
}

/* Extra small phones */
@media (max-width:480px){
  .card-profile-section{padding:10px 12px 6px 12px}
  .card-content{padding:10px 12px}
  .profile-pic{width:38px;height:38px}
  .profile-pic-placeholder{width:38px;height:38px;font-size:15px}
}

/* Ensure mobile menu never shows on desktop */
@media (min-width:769px){
  .mobile-menu{display:none!important}
}
/* Keep header items on one line, hide nav text on small widths */
.fs-appbar__inner { flex-wrap: nowrap; }
.app-actions { flex-wrap: nowrap; min-width: 0; }

.link-nav .nav-text { margin-left: 6px; }
@media (max-width: 1024px){
  .link-nav .nav-text { display:none; }   /* show only icons ≤1024px */
  .link-nav { padding:8px; }              /* tighten hit area when text hidden */
}

/* === Bigger profile pictures on cards === */
.profile-pic,
.profile-pic-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 12px;
}
.profile-pic { border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); object-fit: cover; cursor: zoom-in; }
.profile-pic-placeholder { background:#f1f5f9; border:2px solid #e5e7eb; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:20px }

@media (max-width: 768px) {
  .profile-pic, .profile-pic-placeholder { width: 56px; height: 56px; }
}

/* Optional: slightly taller top section to breathe with bigger pics */
.card-profile-section { padding: 14px 16px 10px 16px; }



/* =================== FORTUNESPACE – MEDIA EDGE TUNING ===================
   KNOBS you can change:
   --fs-media-edge-d : thin line (left+right) on DESKTOP (4–10px recommended)
   --fs-media-edge-m : thin line (left+right) on MOBILE
   --fs-media-radius : corner rounding for the big image
   --fs-media-top/bot: top/bottom breathing around the image
   ====================================================================== */
:root{
  --fs-media-edge-d: 8px;   /* desktop thin line */
  --fs-media-edge-m: 6px;   /* mobile thin line  */
  --fs-media-radius: 10px;  /* image corner radius */
  --fs-media-top:    8px;   /* space above image  */
  --fs-media-bot:   12px;   /* space below image  */
}

/* Base: keep a small line, push image nearly to card edges */
.card.post-card{
  padding-left:  var(--fs-media-edge-d) !important;
  padding-right: var(--fs-media-edge-d) !important;
}

/* Pull the media out to the edges while preserving the thin line */
.card.post-card .card-media{
  margin-left:  calc(-1 * var(--fs-media-edge-d)) !important;
  margin-right: calc(-1 * var(--fs-media-edge-d)) !important;
}

/* Big image styling (overrides earlier rules) */
.card.post-card .main-image img,
.card.post-card .card-media img.fs-img{
  width:100% !important;
  display:block !important;
  border-radius: var(--fs-media-radius) !important;
  margin-top:    var(--fs-media-top) !important;
  margin-bottom: var(--fs-media-bot) !important;
}

/* Mobile tuning */
@media (max-width: 768px){
  .card.post-card{
    padding-left:  var(--fs-media-edge-m) !important;
    padding-right: var(--fs-media-edge-m) !important;
  }
  .card.post-card .card-media{
    margin-left:  calc(-1 * var(--fs-media-edge-m)) !important;
    margin-right: calc(-1 * var(--fs-media-edge-m)) !important;
  }
}


/* ✅ Responsive Header Fixes for Mobile View */
@media (max-width: 640px){

  /* ✅ LOGO & BRAND TEXT - Always show, but smaller */
  .fs-brand {
    gap: 4px;
  }

  .fs-brand__name {
    font-size: 16px;
    display: inline !important;
    white-space: nowrap;
  }

  /* ✅ BUTTONS - Shrink them on mobile */
  .btn {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }

  .btn.btn-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }

  /* ✅ HEADER ACTIONS - Give icons space, avoid squeeze */
  .app-actions {
    gap: 6px !important;
    flex-wrap: nowrap;
  }

  .link-nav {
    padding: 6px 8px !important;
  }

  /* ✅ REMOVE 3-DOT MOBILE MENU */
  .mobile-menu-toggle,
  .mobile-menu {
    display: none !important;
  }
}

/* ✅ Stop header items from wrapping */
.fs-appbar__inner {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* 🌿 Custom floating layout for feed area */
body {
  background-attachment: fixed;          /* Make background stay still */
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Container holds all the post cards */
.feed-container {
  background: var(--feed-bg);            /* isolates feed background */
  position: relative;
  z-index: 2;
  padding-top: 24px;
  padding-bottom: 64px;

  max-width: 140%;      /* ✅ Adjust here to control how wide cards can go (use % or px) */
  margin: 0 auto;

  padding-left: 4px;   /* ✅ Smaller side padding for tighter layout */
  padding-right: 4px;
}

/* Individual post card style */
/* ✨ Custom redesign: wider layout + rubber-band scroll feel */
.card.post-card {
  background: #ffffff !important;

  /* 🔲 Corner Style: 0px = flat corners, increase for rounded */
  border-radius: 0px !important;

  /* 🌫️ Drop Shadow: Make card appear lifted. Increase blur/spread for stronger shadow */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

  /* 📏 Card border */
  border: 1px solid #e5e7eb;

  /* 🔻 Bottom margin between cards (increase to separate more) */
  margin-bottom: 20px;

  /* 🔲 WIDTH CONTROL SECTION */
  width: 100%;              /* Allow card to take full container width */
  max-width: 720px;         /* 🔧 Adjust to control how wide the card can grow */
  margin-left: auto;        /* Center the card */
  margin-right: auto;

  /* 🧼 Inside spacing (padding): Controls content spacing inside the card */
  padding: 16px;
  
   min-height: 550px;  /* 🔧 Adjust this number to control the card height */

  /* ✨ Smooth hover or pull animation */
  transition: transform 0.15s ease-out;
}

/* ✨ Rubber band hover / pull effect (like stretching off the ground) */
.card.post-card:hover,
.card.post-card:active {
  transform: scale(1.04); /* 🔧 Increase to 1.02 for more stretch, reduce to 1.005 for less */
}

/* Hide classic paginator anywhere it may appear */
.pagination, .page-item, .page-link { display: none !important; }

/* Endcap styling */
.feed-endcap{display:flex;align-items:center;justify-content:center;gap:12px;margin:28px 0 40px}
.feed-endcap .end-msg{color:#94a3b8;font-weight:600}

/* Profile page pagination */
.profile-pagination{display:flex;justify-content:center;gap:12px;margin:24px 0}
.profile-pagination .btn{min-width:100px}

/* Minimal spinner (no external libs) */
.spinner{
  width:22px;height:22px;border:3px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;
  animation: fs-spin .8s linear infinite;
}
@keyframes fs-spin { to { transform: rotate(360deg); } }

/* Lightbox/arrow hardening so they NEVER show unless the lightbox is open */
.lightbox-nav{ display:none; }
.lightbox.is-open .lightbox-nav{ display:flex; }

/* Defensive kill-switch for any stray giant arrows from older CSS */
.fs-big-arrow, .carousel-arrow, .chevron-giant { display:none !important; }

/* ==================== Dark feed surface ==================== */
body.feed-surface-dark {
  --app-bg: var(--feed-bg);
  background: var(--feed-bg);
}

body.feed-surface-dark .main-content {
  background: var(--feed-bg);
}

body.feed-surface-dark .main-content > .container {
  background: transparent;
}

body.feed-surface-dark .hero h1,
body.feed-surface-dark .hero h2,
body.feed-surface-dark .hero h3 {
  color: #e2e8f0 !important;
}

body.feed-surface-dark .hero p,
body.feed-surface-dark .hero .subtle,
body.feed-surface-dark .hero .meta {
  color: #cbd5e1 !important;
}

body.feed-surface-dark .hero a {
  color: #93c5fd;
}

body.feed-surface-dark .global-stats {
  color: #cbd5f5;
}

body.feed-surface-dark .global-stats strong {
  color: #f8fafc;
}

body.feed-surface-dark .feed-endcap .end-msg {
  color: #cbd5f5;
}

body.feed-surface-dark .feed-endcap .end-msg a {
  color: #93c5fd;
}

/* ========= FORTUNESPACE FEED HEADER KNOBS =========
   Change only the numbers on the right:
   --fs-avatar-size:    size of small profile pictures
   --fs-avatar-gap:     spacing between profile pictures
   --fs-stats-font:     font-size of the stats line
   --fs-stats-right:    distance of stats from the right edge
   --fs-stats-bottom:   vertical position (how low) near the underline
   ================================================== */
:root{
  --fs-avatar-size: 36px;
  --fs-avatar-gap: 6px;
  --fs-stats-font: 12px;
  --fs-stats-right: 16px;
  --fs-stats-bottom: 6px;
}

/* Header container where avatars live */
.card-profile-section{
  position: relative;
  min-height: calc(var(--fs-avatar-size) + 10px); /* gives room so stats never collide */
  padding-right: 120px; /* reserve space for the stats on the right */
}

/* Avatars: limit width so many photos don't push the text */
.profile-pictures{
  display: flex;
  gap: var(--fs-avatar-gap);
  max-width: calc(var(--fs-avatar-size) * 3 + var(--fs-avatar-gap) * 2); /* show up to 3 */
  overflow: hidden; /* extra images are clipped instead of pushing text */
}
.profile-pictures .profile-pic,
.profile-pictures .profile-pic-placeholder{
  width: var(--fs-avatar-size);
  height: var(--fs-avatar-size);
}

/* Pin the stats to the bottom-right of the header strip */
.fs-inline-stats-pin{
  position: absolute;
  right: var(--fs-stats-right);
  bottom: var(--fs-stats-bottom); /* move this number to place the line lower/higher */
  left: auto;
}

/* One-line stats text */
.fs-inline-stats{
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-stats-font);
  color: #7b899e;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1px;
}
.fs-inline-stats .stat{ display: inline !important; white-space: nowrap !important; }
.fs-inline-stats .stat + .stat::before{
  content:"\00A0\2022\00A0"; /* NBSP • NBSP */
  color:#c0c8d6;
}

/* Smaller phones: you can tweak these too */
@media (max-width: 420px){
  :root{
    --fs-avatar-size: 32px;
    --fs-stats-font: 11px;
    --fs-stats-right: 12px;
    --fs-stats-bottom: 4px;
  }
}
/* =================== FORTUNESPACE FEED HEADER – UNIFIED OVERRIDES ===================
   Tweak only the numbers below.
   Avatar sizes & position
   ------------------------------------------------------------------------------- */
:root{
  /* AVATARS (desktop & mobile) */
  --fs-avatar-size-d: 96px;   /* desktop square size */
  --fs-avatar-size-m: 72px;   /* phone square size   */
  --fs-avatars-show:  3;      /* how many are visibly allowed (2 or 3) */
  --fs-avatar-gap:    10px;   /* spacing between squares */

  /* NUDGE: move avatars toward card edges (negative = left/up) */
  --fs-avatar-nudge-x: -12px;  /* left/right; more negative = further LEFT  */
  --fs-avatar-nudge-y: -10px;  /* up/down;    more negative = further UP    */

  /* HEADER padding (keep ≥0 — browsers ignore negative padding) */
  --fs-header-pad-top:     0px;   /* space above avatars */
  --fs-header-pad-bottom: 10px;   /* space above the underline */
  --fs-header-pad-left:    0px;   /* space at left edge */

  /* STATS row (time • posts • views) */
  --fs-stats-font:   13px;  /* font size for the three items */
  --fs-stats-gap:    14px;  /* spacing between the three items */
  --fs-number-gap:    6px;  /* gap between number and its word (35 + posts) */
  --fs-bullet-gap:   10px;  /* left/right space around the • bullet */
  --fs-stats-right:   8px;  /* distance from right edge */
  --fs-stats-bottom:  2px;  /* 0–6px: smaller = closer to the underline */
  --fs-stats-reserve: 160px;/* horizontal space reserved at right for stats */
}

/* Header container where avatars + stats live */
.card-profile-section{
  position: relative !important;
  /* keep text from sliding under avatars, and reserve stats space at right */
  padding: var(--fs-header-pad-top) var(--fs-stats-reserve) var(--fs-header-pad-bottom) var(--fs-header-pad-left) !important;
  min-height: calc(var(--fs-avatar-size-d) + 10px) !important; /* no overlap with underline */
}

/* Avatars — single source of truth (overrides earlier rules) */
.profile-pictures{
  display:flex !important;
  align-items:center !important;
  gap: var(--fs-avatar-gap) !important;

  /* show at most N squares and clip the rest so stats never shift */
  max-width: calc(var(--fs-avatar-size-d) * var(--fs-avatars-show)
               + var(--fs-avatar-gap) * (var(--fs-avatars-show) - 1)) !important;
  overflow:hidden !important;

  /* PUSH the avatars toward the edges */
  transform: translate(var(--fs-avatar-nudge-x), var(--fs-avatar-nudge-y)) !important;
}

.profile-pictures .profile-pic,
.profile-pictures .profile-pic-placeholder{
  width:  var(--fs-avatar-size-d) !important;
  height: var(--fs-avatar-size-d) !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

.profile-pictures .profile-pic{
  border: 2px solid #fff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.08) !important;
}

.profile-pictures .profile-pic-placeholder{
  background:#f1f5f9 !important;
  border:2px solid #e5e7eb !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:#9ca3af !important; font-size: calc(var(--fs-avatar-size-d) * .42) !important;
}

/* Phone sizes */
@media (max-width: 768px){
  .card-profile-section{
    min-height: calc(var(--fs-avatar-size-m) + 10px) !important;
  }
  .profile-pictures{
    max-width: calc(var(--fs-avatar-size-m) * var(--fs-avatars-show)
                 + var(--fs-avatar-gap) * (var(--fs-avatars-show) - 1)) !important;
    transform: translate(var(--fs-avatar-nudge-x), var(--fs-avatar-nudge-y)) !important;
  }
  .profile-pictures .profile-pic,
  .profile-pictures .profile-pic-placeholder{
    width:  var(--fs-avatar-size-m) !important;
    height: var(--fs-avatar-size-m) !important;
  }
  .profile-pictures .profile-pic-placeholder{
    font-size: calc(var(--fs-avatar-size-m) * .42) !important;
  }
}

/* Pin stats to the bottom-right (near the underline) */
.fs-inline-stats-pin{
  position:absolute !important;
  right: var(--fs-stats-right) !important;
  bottom: var(--fs-stats-bottom) !important;
}

/* Single-line, well-spaced "time • posts • views" */
.fs-inline-stats{
  display:inline-flex !important;
  align-items:baseline !important;
  gap: var(--fs-stats-gap) !important;
  white-space:nowrap !important;
  flex-wrap:nowrap !important;
  font-size: var(--fs-stats-font) !important;
  color:#7b899e !important;
  font-variant-numeric: tabular-nums !important;
}
.fs-inline-stats .stat{
  display:inline-flex !important;
  align-items:baseline !important;
}
.fs-inline-stats .stat .lbl{ margin-left: var(--fs-number-gap) !important; font-weight: 400; }
.fs-inline-stats .stat + .stat::before{
  content:"•" !important;
  color:#c0c8d6 !important;
  margin: 0 var(--fs-bullet-gap) !important;
}

/* ===== Immersive full-bleed viewer (no frame, no header/caption) ===== */
.post-viewer.post-viewer--immersive .post-viewer__content{
  width:100vw;height:100vh;max-width:none;max-height:none;
  border-radius:0; box-shadow:none; background:rgba(15,23,42,.92);
}

.post-viewer.post-viewer--immersive .post-viewer__body{
  padding:0; display:flex; align-items:center; justify-content:center;
}

.post-viewer.post-viewer--immersive .post-viewer__image{
  width:100vw; height:100vh; max-width:100vw; max-height:100vh;
  object-fit:contain; border-radius:0; box-shadow:none;
}

/* Hide user strip + caption/footer; keep only the close button */
.post-viewer.post-viewer--immersive .post-viewer__user,
.post-viewer.post-viewer--immersive .post-viewer__meta,
.post-viewer.post-viewer--immersive .post-viewer__footer{
  display:none !important;
}

/* Make header transparent and reduce it to just an overlayed X */
.post-viewer.post-viewer--immersive .post-viewer__header{
  background:transparent; padding:0; pointer-events:none;
}
.post-viewer.post-viewer--immersive .post-viewer__close{
  position:absolute; z-index:3; pointer-events:auto;
  top:calc(12px + env(safe-area-inset-top));
  right:calc(12px + env(safe-area-inset-right));
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.3);
}

/* Keep the action rail; tuck it a bit closer to the edge */
.post-viewer.post-viewer--immersive .post-viewer__actions{
  right:calc(16px + env(safe-area-inset-right));
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
}
.post-viewer.post-viewer--immersive .viewer-action__icon{
  backdrop-filter: blur(10px);
}

/* Sheets/panels unchanged; ensure they layer above */
.comment-sheet,.gift-panel{ z-index: 2000; }

/* ===== Ambient pop-out viewer (contextual full image) ===== */
.post-viewer.post-viewer--ambient .post-viewer__backdrop{
  background: rgba(15,23,42,0.60);
}

.post-viewer.post-viewer--ambient .post-viewer__content{
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

.post-viewer.post-viewer--ambient .post-viewer__body{
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.post-viewer.post-viewer--ambient .post-viewer__image{
  width:100vw;
  height:100vh;
  max-width:100vw;
  max-height:100vh;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
}

.post-viewer.post-viewer--ambient .post-viewer__user,
.post-viewer.post-viewer--ambient .post-viewer__meta,
.post-viewer.post-viewer--ambient .post-viewer__footer{
  display:none !important;
}

.post-viewer.post-viewer--ambient .post-viewer__header{
  background:transparent;
  padding:0;
  pointer-events:none;
}

.post-viewer.post-viewer--ambient .post-viewer__close{
  position:absolute;
  z-index:4;
  pointer-events:auto;
  top:calc(14px + env(safe-area-inset-top));
  right:calc(14px + env(safe-area-inset-right));
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.35);
}

.post-viewer.post-viewer--ambient .post-viewer__actions{
  position:absolute;
  z-index:3;
  right:calc(16px + env(safe-area-inset-right));
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
}

@media (max-width:768px){
  .post-viewer.post-viewer--immersive .post-viewer__actions,
  .post-viewer.post-viewer--ambient .post-viewer__actions{
    top:auto;
    right:clamp(12px,5vw,20px);
    bottom:20px;
    bottom:calc(20px + env(safe-area-inset-bottom));
    transform:none;
    padding:0;
  }
}

.post-viewer.post-viewer--ambient .viewer-action__icon{
  backdrop-filter: blur(10px);
}