/* PinkRabbit — Dark Neon + Aqua
   Pinterest-style 3 columns, heart at top-right,
   under-image info bar (clickable), two preview comments alternating.
*/

/* Tokens */
:root{
  --bg-1:#0b0b0d;
  --bg-2:#0f1113;
  --text:#e9eef6;
  --muted:#9aa0a6;
  --accent:#ff3b70;     /* neon pink */
  --accent-2:#9b59ff;   /* purple */
  --aqua:#38f9ff;       /* aqua */
  --glass:rgba(255,255,255,0.04);
  --shadow:0 12px 32px rgba(2,6,23,0.6);
  --radius:14px;
  --maxw:1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font-family:"Rubik","Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  background: var(--bg-1);
  /* subtle neon vignettes + tiny noise */
  background-image:
    radial-gradient(1200px 700px at 10% 10%, rgba(255,59,112,0.05), transparent 8%),
    radial-gradient(1200px 700px at 90% 90%, rgba(155,89,255,0.04), transparent 8%),
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0nI2ZmZicgLz48L3N2Zz4=");
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:12px 20px;
  background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.1));
  border-bottom:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-img{height:28px;display:block}
.logo-word.pink{color:var(--accent);font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin-left:6px}
.logo-word.aqua{color:var(--aqua);font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.header-right{display:flex;align-items:center;gap:12px}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,0.05)}
.profile-mini .mini-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.12)}

/* Container */
.container{max-width:var(--maxw);margin:18px auto;padding:0 16px}

/* Composer */
.composer-wrap{margin-bottom:18px}
.composer{
  display:flex;gap:12px;align-items:flex-start;background:var(--bg-2);
  padding:12px;border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.06);
}
.composer .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.08)}
.composer textarea{
  flex:1;min-height:50px;resize:vertical;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.02);color:var(--text);
}
.composer-actions{display:flex;gap:10px;align-items:center}
.file-label{display:inline-flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer}
.file-label input{display:none}
.file-label span{
  display:inline-block;padding:6px 10px;border-radius:10px;
  background:rgba(255,59,112,0.08);border:1px solid rgba(255,59,112,0.22)
}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;border:none;padding:9px 14px;border-radius:10px;cursor:pointer;font-weight:800;
  box-shadow:0 0 16px rgba(255,59,112,0.35);
}
.btn-primary:hover{box-shadow:0 0 24px rgba(255,59,112,0.55)}

/* Masonry feed */
.feed{
  column-count:3;
  column-gap:18px;
}
@media (max-width:1100px){.feed{column-count:2}}
@media (max-width:700px){.feed{column-count:1}}

.post-card{
  display:inline-block;         /* required for CSS columns */
  width:100%;
  break-inside:avoid;
  margin:0 0 18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0));
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .16s ease;
  border:1px solid rgba(255,255,255,0.05);
}
.post-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,0.6)}

.post-header{display:flex;gap:12px;align-items:center;padding:12px}
.post-header .avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--glass)}
.post-meta .author-name{font-weight:800;color:var(--accent)}
.post-meta .post-time{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* Media + heart */
.post-media{position:relative}
.post-media img{width:100%;display:block;object-fit:cover}
.like-fab{
  position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,0.35);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.12);
  padding:6px 10px;border-radius:999px;color:#fff;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease;
}
.like-fab .heart{font-size:16px;display:inline-block;transform-origin:50% 50%}
.like-fab .count{font-weight:800}
.like-fab:hover{transform:translateY(-2px)}
.like-fab.liked,
.like-fab.has-likes{box-shadow:0 0 18px rgba(255,59,112,0.45)}
.like-fab .heart.pop{animation:heart-pop .52s cubic-bezier(.2,.9,.2,1)}
@keyframes heart-pop{0%{transform:scale(.92)}40%{transform:scale(1.24)}70%{transform:scale(.98)}100%{transform:scale(1)}}

/* Optional text body */
.post-content{padding:12px 12px 6px;color:var(--text);font-size:15px;line-height:1.6}

/* Post text color tweak for readability */
.post-content {
  padding: 12px 12px 6px;
  color: #000; /* black text */
  font-size: 15px;
  line-height: 1.6;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
}


/* Under-image info bar (clickable) */
.info-bar{
  margin:8px 12px 10px;
  width:calc(100% - 24px);
  border:1px solid rgba(56,249,255,0.25);
  background:rgba(56,249,255,0.06);
  color:#c8faff;
  border-radius:12px;
  padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;
  transition:box-shadow .2s ease, transform .15s ease;
}
.info-bar:hover{
  box-shadow:0 0 18px rgba(56,249,255,0.35);
  transform:translateY(-1px);
}
.info-left{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.info-left .by{color:#99e8f0}
.info-left .user{color:#fff;font-weight:800}
.info-left .date{color:#aeefff}
.info-left .dot{opacity:.6}
.info-right{font-weight:700;color:#e7fbff}

/* Preview comments (two rows, alternating) */
.preview-comments{padding:0 12px 12px}
.preview-comment{
  display:flex;gap:8px;align-items:flex-start;
  padding:10px;border-radius:12px;margin-top:8px;
  border:1px solid rgba(255,255,255,0.06);
}
.preview-comment.pink{
  background:rgba(255,59,112,0.06);
  border-color:rgba(255,59,112,0.22);
}
.preview-comment.aqua{
  background:rgba(56,249,255,0.06);
  border-color:rgba(56,249,255,0.28);
}
.comment-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.12)}
.comment-body{flex:1}
.comment-head{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.comment-user{font-weight:800}
.preview-comment.pink .comment-user{color:var(--accent)}
.preview-comment.aqua .comment-user{color:var(--aqua)}
.comment-time{font-size:12px;color:var(--muted)}
.comment-text{color:#e8f6ff}

/* Modal (comments) */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:2000;align-items:center;justify-content:center;padding:20px}
.modal .modal-card{
  width:100%;max-width:560px;background:var(--bg-2);border-radius:var(--radius);padding:12px;
  border:1px solid rgba(255,255,255,0.08);box-shadow:var(--shadow)
}
.close-modal{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.comments-list{max-height:340px;overflow:auto;margin:8px 0 12px}
#comment-input{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.02);color:var(--text);margin-bottom:8px
}

/* Utilities */
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

/* Flat comment styles (if you output comments elsewhere too) */
.comment{padding:8px 10px;margin:6px 0;border-radius:10px;line-height:1.5;color:#000;font-size:14.5px}
.comment.pink{background:rgba(255,59,112,0.18)}
.comment.pink .comment-user{color:#38f9ff;font-weight:700}
.comment.aqua{background:rgba(0,255,255,0.18)}
.comment.aqua .comment-user{color:#ff3b70;font-weight:700}

/* Fade-in for new comments */
.comment.fade-in {
  animation: fadeInGlow .8s ease forwards;
}

@keyframes fadeInGlow {
  0% {opacity: 0; transform: translateY(6px); box-shadow: 0 0 0 rgba(255,255,255,0);}
  60% {opacity: 1; transform: translateY(0); box-shadow: 0 0 14px rgba(56,249,255,0.25);}
  100% {box-shadow: 0 0 0 rgba(56,249,255,0);}
}

.composer textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 15px;
  border-radius: 10px;
  transition: background .2s ease, border .2s ease;
}
.composer textarea:focus {
  background: rgba(255,255,255,0.08);
  border-color: var(--aqua);
  outline: none;
}
/* Fade-in animation for new posts */
.post-card.fade-in {
  animation: fadeInPost 0.8s ease forwards;
}
@keyframes fadeInPost {
  0% {opacity: 0; transform: translateY(10px);}
  100% {opacity: 1; transform: translateY(0);}
}

/* Post text color */
.post-content {
  color: #000 !important;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
}
/* Image preview in composer */
.image-preview {
  position: relative;
  margin: 10px 0;
  border-radius: 12px;
  overflow: hidden;
  max-width: 300px;
  box-shadow: 0 0 10px rgba(255,59,112,0.3);
  border: 1px solid rgba(255,255,255,0.08);
}
.image-preview img {
  width: 100%;
  display: block;
  border-radius: 12px;
}
.image-preview #remove-preview {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  line-height: 22px;
}
.image-preview #remove-preview:hover {
  background: rgba(255,59,112,0.8);
}
.hidden { display: none !important; }

/* Fade in animation */
.fade-in { animation: fadeIn 0.6s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

/* Larger centered image preview with pink glow */
.image-preview {
  position: relative;
  margin: 12px auto;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 15px rgba(255,59,112,0.4);
  transition: box-shadow 0.3s ease;
}
.image-preview:hover { box-shadow: 0 0 22px rgba(255,59,112,0.6); }
.image-preview img { width:100%; display:block; border-radius:16px; }
.image-preview #remove-preview {
  position:absolute;top:8px;right:8px;
  border:none;background:rgba(0,0,0,0.6);
  color:#fff;font-weight:bold;border-radius:50%;
  width:28px;height:28px;cursor:pointer;font-size:15px;
}
.image-preview #remove-preview:hover { background:rgba(255,59,112,0.8); }

/* Comment colors and alternating backgrounds */
.preview-comment {
  display:flex;gap:8px;align-items:flex-start;
  padding:10px;border-radius:12px;margin-top:8px;
  border:1px solid rgba(255,255,255,0.06);
}
.preview-comment.pink{
  background:rgba(255,59,112,0.1);
  border-color:rgba(255,59,112,0.3);
}
.preview-comment.aqua{
  background:rgba(56,249,255,0.1);
  border-color:rgba(56,249,255,0.3);
}
.preview-comment.pink .comment-user{color:#38f9ff;font-weight:700;}
.preview-comment.aqua .comment-user{color:#ff3b70;font-weight:700;}
.comment-text{color:#000;}

/* Dynamic tint classes */
.modal.pink-tint {
  background: rgba(20, 5, 10, 0.55);
  box-shadow: 0 0 60px rgba(255, 59, 112, 0.35) inset;
  backdrop-filter: blur(12px) saturate(180%) brightness(1.1);
}

.modal.aqua-tint {
  background: rgba(5, 15, 20, 0.55);
  box-shadow: 0 0 60px rgba(56, 249, 255, 0.35) inset;
  backdrop-filter: blur(12px) saturate(180%) brightness(1.1);
}

/* ====== MOBILE RESPONSIVE TUNING ====== */
@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }
  .header-right {
    width: 100%;
    justify-content: space-between;
  }

  .composer {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
  }
  .composer .avatar {
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
  }
  .composer textarea {
    width: 100%;
    min-height: 80px;
  }
  .composer-actions {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .feed {
    column-count: 1 !important;
  }

  .post-card
}
/* =======================================================
   MOBILE + TABLET RESPONSIVE OPTIMIZATION
   PinkRabbit Feed + Composer + Modals
   ======================================================= */
@media (max-width: 900px) {
  .feed { column-count: 2; column-gap: 16px; }
  .composer textarea { min-height: 70px; }
  .post-card { margin-bottom: 16px; }
}

@media (max-width: 700px) {
  body { padding-bottom: 40px; }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }

  .header-right {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .composer {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
  }

  .composer .avatar {
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
  }

  .composer textarea {
    width: 100%;
    font-size: 15px;
    border-radius: 8px;
  }

  .composer-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
  }

  .feed {
    column-count: 1 !important;
    column-gap: 0;
  }

  .post-card {
    border-radius: 12px;
    margin-bottom: 18px;
  }

  .post-content {
    font-size: 15px;
    line-height: 1.55;
  }

  .info-bar {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    width: calc(100% - 24px);
  }

  .info-left, .info-right {
    flex-wrap: wrap;
  }

  /* Comments preview adjustments */
  .preview-comments { padding: 0 10px 12px; }
  .preview-comment { flex-direction: row; gap: 6px; padding: 8px; }

  /* Modal reflow for mobile */
  .modal {
    padding: 10px;
    background: rgba(0,0,0,0.85);
  }

  .modal .modal-card {
    width: 100%;
    max-width: 95%;
    border-radius: 12px;
    padding: 14px;
  }

  .close-modal {
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 12px;
  }

  #comment-input {
    min-height: 70px;
    font-size: 15px;
  }

  #post-comment {
    width: 100%;
    margin-top: 6px;
    padding: 10px 0;
    font-weight: 800;
  }
}

/* ====== Ultra-small (≤ 420px) ====== */
@media (max-width: 420px) {
  .brand .logo-word {
    font-size: 15px;
  }
  .composer textarea {
    font-size: 14px;
  }
  .btn-primary {
    font-size: 14px;
    padding: 8px 12px;
  }
  .like-fab {
    top: 6px;
    right: 6px;
    padding: 5px 8px;
  }
  .info-bar {
    font-size: 14px;
    padding: 8px 10px;
  }
  .preview-comment .comment-text {
    font-size: 14px;
  }
}
/* ==== UPLOAD PREVIEW ==== */
.upload-preview {
  margin: 8px 0 10px;
  border-radius: 12px;
  overflow: hidden;
  display: none;
}
.upload-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(255, 59, 112, 0.25);
}
.upload-preview.show { display: block; }