@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Oswald:wght@600&display=swap');

  /* ===== Theme ===== */
  :root{
    --bg:#07070a; --bg2:#0b0b12; --text:#f4f1f8; --muted:#b7b5c4;
    --pink:#ff3fb4; --pink-2:#ff80d1; --purple:#7a49ff; --purple-2:#b18cff;
    --card:#0e0d16; --border:rgba(255,255,255,.08);
    --ring: 0 0 24px rgba(255,63,180,.35), 0 0 60px rgba(122,73,255,.25);
    --ring-strong: 0 0 30px rgba(255,63,180,.55), 0 0 80px rgba(122,73,255,.45);
    --header-h: 80px;
    --bottom-nav-h: 65px;

    /* Max content height between header and bottom menu + tiny slack */
    --max-grid-img-h: calc(100vh - var(--header-h) - var(--bottom-nav-h) - 20px);

    /* Grid sizing: make “small” the default */
    --tile-min-h: 160px;
    --grid-gap: 24px;
	--lb-safe-gap: 16px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    line-height:1.55; position:relative; background:none;
    padding-top: calc(var(--header-h) + 10px);
    padding-bottom: calc(var(--bottom-nav-h) + 18px);
  }
  /* Neon BG */
  body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(1100px 700px at 80% -10%, rgba(255,63,180,.16), transparent 60%),
      radial-gradient(900px 600px at 10% 0%, rgba(122,73,255,.18), transparent 60%),
      linear-gradient(180deg, var(--bg), var(--bg2));
    background-repeat:no-repeat, no-repeat, no-repeat;
    background-size:cover, cover, cover;
    animation:bgFloat 14s ease-in-out infinite alternate;
  }
  @keyframes bgFloat{
    0%{background-position:0 0, 0 0, 0 0}
    100%{background-position:20px -20px, -30px 10px, 0 0}
  }
  a{color:inherit;text-decoration:none}
  .container{max-width:1200px;margin:0 auto;padding:0 20px}

  /* ===== Fixed Header ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:40; height:var(--header-h);
    background:linear-gradient(180deg, rgba(255,63,180,.22), rgba(122,73,255,.12));
    backdrop-filter:saturate(130%) blur(8px);
    border-bottom:1px solid var(--border);
    box-shadow: var(--ring);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:100%}
  .brand{display:flex;align-items:baseline;gap:12px}
.logo{
  font-family:"Oswald", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:36px; line-height:1; letter-spacing:.5px;
  text-shadow:0 0 10px rgba(255,63,180,.35), 0 0 24px rgba(122,73,255,.25);
}

  /* ===== Bottom Menu Bar ===== */
  .bottom-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:39; height:var(--bottom-nav-h);
    display:flex; align-items:center; justify-content:center; gap:14px;
    background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
    border-top:1px solid var(--border);
    backdrop-filter:saturate(130%) blur(8px);
    box-shadow: 0 -10px 30px rgba(0,0,0,.25);
  }
  .nav-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 14px; border-radius:12px; font-weight:800;
    background: radial-gradient(120% 120% at 50% -10%, rgba(255,63,180,.28), rgba(122,73,255,.14));
    border:1px solid rgba(255,63,180,.35); box-shadow:var(--ring);
  }

  /* ===== Page ===== */
  h1{margin:18px 0 18px; font-size:clamp(28px,4vw,40px); font-weight:800;
     text-shadow:0 0 16px rgba(255,63,180,.45), 0 0 30px rgba(122,73,255,.35);}
  .muted{color:var(--muted)}
  
    /* Hero */
    .hero{position:relative; padding:88px 0 40px}
    .hero h1{
      margin:0 0 8px; font-weight:800; font-size: clamp(40px, 6vw, 68px);
      text-transform:none;
      text-shadow:0 0 16px rgba(255,63,180,.45), 0 0 30px rgba(122,73,255,.35);
    }
    .hero h1 .hi{color:var(--pink)}
    .hero h3{margin:6px 0 0; font-weight:600; color:var(--muted); text-transform:none}

  /* Grid — small from the start, stable (no size jump on scroll or modal) */
  .posts-grid{
    display:grid; gap:var(--grid-gap);
    grid-template-columns:repeat(3,1fr);
  }
  @media (min-width: 1100px){ .posts-grid{grid-template-columns:repeat(4,1fr)} }
  @media (max-width: 960px){  .posts-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width: 600px){  .posts-grid{grid-template-columns:1fr} }

  .tile{
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border:1px solid var(--border); border-radius:14px; box-shadow:var(--ring);
    overflow:hidden; position:relative;
    min-height:var(--tile-min-h);
    /* Never let any tile exceed the viewport gap between header & menu */
    max-height:var(--max-grid-img-h);
    display:flex; align-items:center; justify-content:center;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .tile:hover{transform:translateY(-2px); box-shadow:var(--ring-strong)}

  /* Image sizing: always contained and capped to the usable vertical space */
  .tile img{
    display:block; width:100%; height:100%;
    object-fit:contain;
    max-height:var(--max-grid-img-h);
    user-select:none; -webkit-user-drag:none;
  }

  .tile .meta{
    position:absolute; left:10px; bottom:10px; padding:6px 9px; border-radius:999px; font-size:12px; font-weight:700;
    background:linear-gradient(180deg, rgba(255,63,180,.22), rgba(122,73,255,.14)); border:1px solid rgba(255,255,255,.15);
    pointer-events:none;
  }

  .status{margin:18px auto 10px; text-align:center; padding:10px 14px; border:1px dashed var(--border);
          border-radius:12px; max-width:560px; background:rgba(255,255,255,.02)}
  .hidden{display:none}

  /* Back-to-top FAB */
  .to-top{
    position:fixed; right:18px; bottom:calc(var(--bottom-nav-h) + 18px);
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:.15s ease; z-index:38;
    padding:12px 14px; border-radius:12px; font-weight:800;
    background: radial-gradient(120% 120% at 50% -10%, rgba(255,63,180,.35), rgba(122,73,255,.18));
    border:1px solid rgba(255,63,180,.45); box-shadow:var(--ring); color:#fff; cursor:pointer;
  }
  body.scrolled .to-top{opacity:1; transform:none; pointer-events:auto}

  /* Scroll lock while modal open */
  body.modal-open{overflow:hidden; position:fixed; width:100%;}

  /* Lightbox */
  .lightbox{
    position:fixed; inset:0; z-index:9999; display:none;
    background:radial-gradient(1200px 800px at 60% -10%, rgba(255,63,180,.20), transparent 65%),
               radial-gradient(1000px 700px at 20% 0%, rgba(122,73,255,.22), transparent 65%),
               rgba(6,6,10,.90);
    backdrop-filter: blur(6px);
    grid-template-columns: 96px 1fr 96px;
    grid-template-rows: auto 1fr;
    align-items:center; justify-items:center;
  }
  .lightbox .lb-center{
  padding: var(--lb-safe-gap);
  box-sizing: border-box;
}
  .lightbox.open{display:grid;}
  .lb-top{grid-column:1/4; grid-row:1; width:100%; display:flex; justify-content:center; gap:12px; padding:12px;}
  .lb-close-top{
    font-size:14px; font-weight:800; letter-spacing:.06em;
    padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.35); color:#fff; cursor:pointer; user-select:none;
  }
  .lb-hint{align-self:center; color:#fff; opacity:.9; font-size:14px; padding:10px 0}
  .lb-edge{grid-row:2; align-self:center;}
  .lb-edge-left{grid-column:1;}
  .lb-edge-right{grid-column:3;}
/* Lightbox center (no rim, no black fill, keep glow + padding) */
.lb-center{
  grid-column:2;
  grid-row:2;
  max-width:92vw;
  max-height:86vh;
  border-radius:16px;
  overflow:hidden;
  /* keep the neon glow only */
  box-shadow:0 0 80px rgba(255,63,180,.45), 0 0 140px rgba(122,73,255,.4);
  /* remove the rim + black background */
  border:none;
  background:transparent;

  display:flex; align-items:center; justify-content:center;
  padding: var(--lb-safe-gap);
  box-sizing: border-box;
}

/* Image inside the popup — no black background */
.lb-img{
  display:block;
  max-width:92vw;
  max-height: calc(86vh - var(--lb-safe-gap) * 2);
  width:auto;
  height:auto;
  object-fit:contain;
  background:transparent; /* was #000 */
  user-select:none;
  -webkit-user-drag:none;
}

  .lb-arrow{
    width:56px; height:56px; border-radius:999px;
    border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35); color:#fff;
    font-weight:900; font-size:20px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; user-select:none; box-shadow:0 0 24px rgba(255,63,180,.35), 0 0 60px rgba(122,73,255,.25);
    transition:background .12s ease;
  }
  .lb-arrow:hover{background:rgba(0,0,0,.5)}

  @media (max-width: 680px){
    .lightbox{grid-template-columns: 1fr; grid-template-rows: auto 1fr}
    .lb-edge{display:none}
    .lb-center{grid-column:1}
    .lb-hint{display:inline}
  }
  @media (min-width: 681px){ .lb-hint{display:none} }

  /* Age/Cookie Gate */
  .age-overlay{position:fixed; inset:0; background:rgba(4,4,9,.92); display:none; align-items:center; justify-content:center; z-index:11000; backdrop-filter: blur(10px) saturate(130%);}    
  .age-modal{width:min(560px, 92vw); background:linear-gradient(180deg, #0d0b13, #0f0d17); border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow: var(--ring-strong); color:var(--text);}    
  .age-modal h2{margin:0 0 6px; font-size:26px}
  .age-modal p{margin:8px 0 18px; color:var(--muted)}
  .age-actions{display:flex; gap:10px; flex-wrap:wrap}
  .age-actions .btn{flex:1; min-width:140px}
  .btn{
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    border:1px solid var(--border); border-radius:14px; padding:12px 16px; font-weight:800;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    transition:.18s ease; cursor:pointer; will-change:transform, box-shadow;
  }
.btn-primary{
  /* brighter neon */
  border-color: rgba(255,63,180,.75);
  background: radial-gradient(120% 120% at 50% -10%, rgba(255,63,180,.55), rgba(122,73,255,.35));
  box-shadow: 0 0 30px rgba(255,63,180,.6), 0 0 80px rgba(122,73,255,.45);
  filter: saturate(1.2) brightness(1.08);
}
.btn-primary:hover{
  filter: saturate(1.35) brightness(1.12);
}

.auth-card{
  width:min(520px, 92vw);
  margin: 0 auto 48px; /* bottom margin in case content is tall */
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  box-shadow: var(--ring);
  backdrop-filter: blur(4px);
}
/* Auth wrapper: use normal flow (not grid-center), add safe top/bottom padding */
.auth-wrap{
  display:block;
  min-height:auto;
  padding: clamp(20px, 4vh, 40px) 0 calc(var(--bottom-nav-h) + 32px);
}


.auth-head{ margin-bottom:14px; }
.auth-title{
  margin:0 0 6px;
  font-size:28px;
  font-weight:800;
  text-shadow:0 0 8px rgba(255,63,180,.35), 0 0 16px rgba(122,73,255,.25);
}

.field{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.label{ font-weight:700; }

.input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.input:focus{
  border-color: rgba(255,63,180,.45);
  box-shadow: 0 0 0 3px rgba(255,63,180,.20), 0 0 18px rgba(122,73,255,.30);
}

.pw-wrap{ position:relative; }
.pw-toggle{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  background:transparent; border:0; color:#fff; opacity:.9; cursor:pointer; font-weight:800;
  text-decoration:none;
}

/* Alerts */
.alert{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
  margin:8px 0 14px;
}
.alert-error{
  border-color: rgba(255,107,107,.45);
  background: linear-gradient(180deg, rgba(255,107,107,.12), rgba(255,255,255,.02));
  color:#ffdede;
  font-weight:700;
}

/* Buttons */
.btn, .nav-btn { text-decoration: none; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  border:1px solid rgba(255,63,180,.45);
  background: radial-gradient(120% 120% at 50% -10%, rgba(255,63,180,.35), rgba(122,73,255,.20));
  color:#fff;
  box-shadow: var(--ring);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0); filter: brightness(.98); }
.btn-primary{ /* same palette, reserved if you add btn variants later */ }
.btn-xl{ padding:14px 18px; font-size:16px; width:100%; }

.actions{ margin-top:16px; }

/* Keep consistency with your neon layout variables */
/* Date input: make the picker icon visible on dark themes */
input[type="date"]{
  color-scheme: dark; /* hint to the UA to render controls for dark surfaces */
}
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2) contrast(1.1) saturate(1.15);
  opacity: .95;
  cursor: pointer;
}
main.container{
  padding-bottom: calc(var(--bottom-nav-h) + 24px);
}
/* --- Swipe / Next animations --- */
@keyframes swipeInRight {
  from { transform: translateX(30px); opacity: 0.01; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes swipeOutLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-30px); opacity: 0.01; }
}
.lb-anim-in-right { animation: swipeInRight 220ms ease both; }
.lb-anim-out-left { animation: swipeOutLeft 220ms ease both; }

/* Top action bar on Archive (Random button) */
.archive-actions{
  display:flex; align-items:center; gap:12px; margin: 8px 0 16px;
  flex-wrap: wrap;
}
/* Register/Login: center and fit without page scroll */
.auth-wrap.auth-wrap--center{
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 8px 0;
  overflow: hidden; /* avoid extra page scrollbars */
}
.auth-card.auth-card--compact{
  width: min(420px, 92vw);
  padding: 16px;
  border-radius: 16px;
  margin: 0 auto;
}
.auth-card.auth-card--compact .auth-title{ font-size:24px; margin-bottom:6px; }
.auth-card.auth-card--compact .field{ margin:10px 0; }
.auth-card.auth-card--compact .hint{ font-size:12px; }

.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right: 78px; }
.pw-toggle{
  position:absolute; right:8px; top:0; bottom:0;
  display:flex; align-items:center; padding:0 6px;
  background:transparent; border:0; color:#fff; opacity:.9; cursor:pointer; font-weight:800;
}

.invite-row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12px; opacity:.9; }
.invite-row code{ word-break: break-all; }
/* === Auth pages (Login/Register) mobile alignment === */

/* Center the form using the *visual* viewport height and give safe-area padding.
   This keeps the card perfectly centered and prevents the glow from clipping. */
.auth-wrap.auth-wrap--fit{
  /* Use small/dynamic viewport units when supported */
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;

  /* Safe area + breathing room so the outer glow never clips */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
}

/* Fallback for browsers that support 100dvh (dynamic viewport) but not 100svh */
@supports (height: 100dvh) {
  .auth-wrap.auth-wrap--fit{
    min-height: calc(100dvh - var(--header-h));
  }
}

/* Card sizing + centering */
.auth-card.auth-card--compact{
  box-sizing: border-box;
  width: min(420px, 92vw);
  max-width: 92vw;
  margin: 0 auto;           /* hard center horizontally */
  padding: 16px;
  border-radius: 16px;
}

/* On small phones, shave a bit of padding so the card + glow fit */
@media (max-width: 480px){
  .auth-card.auth-card--compact{
    width: min(400px, 94vw);
    max-width: 94vw;
    padding: 14px;
  }
}

/* Password toggle alignment (keeps the “Show/Hide” perfectly centered vertically) */
.pw-wrap{ position: relative; }
.pw-wrap .input{ padding-right: 78px; }
.pw-toggle{
  position: absolute;
  right: 8px; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
  background: transparent; border: 0; color: #fff; opacity: .9;
  cursor: pointer; font-weight: 800;
}

/* Tiny row used on register for invite/status text; wraps nicely on mobile */
.invite-row{
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: 12px; opacity: .9;
}
.invite-row code{ word-break: break-all; }
/* Home counter + menu bar */
.home-stats{
  display:flex; align-items:baseline; justify-content:center;
  gap:8px; margin: 8px 0 14px;
}
.home-stats .count{
  font-weight:800; font-size: clamp(20px, 5vw, 28px);
}
.home-stats .label{
  opacity:.9; font-size: clamp(12px, 3.5vw, 14px);
}
.home-menu{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top: 6px;
}
.home-menu .btn{ min-width: 120px; text-align:center; }


/* Header sizing */
:root { --header-h: 80px; }          /* adjust to your preferred bar height */
@media (min-width: 768px){
  :root { --header-h: 80px; }
}

/* The top bar */
header .container.nav{
  height: var(--header-h);
  display: flex;
  align-items: center;               /* vertical centering for everything */
  justify-content: space-between;    /* keep brand on the left */
  padding-block: 0;                  /* no extra vertical padding */
  box-sizing: border-box;
}

/* Brand group (logo image + title text) */
header .brand{
  display: flex;
  align-items: center;               /* center text with image */
  gap: 10px;
}

/* The image wrapper takes full bar height */
header .brand .tag{
  height: 75px;
  display: flex;
  align-items: center;               /* centers the img within the bar */
}

/* Make the image fit the bar height */
header .brand .tag img{
  display: block;
  height: 100%;                      /* fill the bar height */
  width: auto;                       /* keep aspect ratio */
  object-fit: contain;               /* safety for odd aspect ratios */
}

/* Optional: tighten title alignment */
header .brand .logo{
  line-height: 1;
  font-weight: 800;                  /* match your theme’s header weight */
  /* font-size can remain from your theme; adjust if needed */
}