/* ============================================================
   Login page
   ============================================================ */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--modal-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 40px 28px;
  display: flex; flex-direction: column; gap: 18px;
  backdrop-filter: blur(30px);
  box-shadow: var(--shadow-modal);
}
.login-avatar { display: flex; justify-content: center; }
.login-avatar img, .login-avatar-placeholder {
  width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent);
}
.login-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 1.6rem;
}
.login-card h1   { text-align: center; font-size: 1.3rem; font-weight: 900; }
.login-sub       { text-align: center; color: var(--text-muted); font-size: 0.83rem; margin-top: -10px; }
.login-back      { text-align: center; font-size: 0.83rem; color: var(--text-muted); display: block; }
.login-back:hover { color: var(--accent); text-decoration: none; }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 600px) {
  .profile-header { min-height: 260px; }
  .header-name    { font-size: 1.4rem; }
  .header-content { padding: 0 16px 20px; }
  .header-avatar  { width: 64px; height: 64px; }
  .fab            { bottom: 20px; right: 16px; width: 52px; height: 52px; }
  .post-modal-overlay { padding: 0; align-items: flex-end; }
  .post-modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; }
  .modal-overlay  { padding: 0; align-items: flex-end; }
  .modal          { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 100%; }
  .compose-dialog { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 100%; }
}

/* ============================================================
   Photo stack (multi-photo fan)
   ============================================================ */
.card-photo-stack {
  position: relative;
  /* extra margin so ghost cards don't get clipped */
  margin: 6px 10px 0;
  padding-bottom: 10px;
}

.stack-ghost {
  position: absolute;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  top: 0; left: 0; right: 0; bottom: 0;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.stack-ghost-1 {
  transform: rotate(3deg) translateY(5px) translateX(3px);
  z-index: 0;
}
.stack-ghost-2 {
  transform: rotate(6deg) translateY(9px) translateX(6px);
  z-index: -1;
}
.card-photo-stack:hover .stack-ghost-1 {
  transform: rotate(9deg) translateY(8px) translateX(14px);
}
.card-photo-stack:hover .stack-ghost-2 {
  transform: rotate(16deg) translateY(12px) translateX(26px);
}

.card-photo-stack .stack-main {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* ============================================================
   Dynamic text sizing
   ============================================================ */

/* Very short post (≤60 chars) — huge statement text */
.card-text.text-xl {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  display: block;
  overflow: visible;
}

/* Short post (≤140 chars) — big and readable */
.card-text.text-large {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  display: block;
  overflow: visible;
}

/* Medium post (≤280 chars) — comfortable reading */
.card-text.text-medium {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--text);
  -webkit-line-clamp: 6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Post with title — normal size, more clamp room */
.card-text.text-has-title {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
  -webkit-line-clamp: 10;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Expand modal: never clamp */
.expand-text-full {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
}
.expand-text-full.text-xl     { font-size: 1.8rem;  }
.expand-text-full.text-large  { font-size: 1.3rem;  }
.expand-text-full.text-medium { font-size: 1.0rem;  }

/* Edit button in admin row */
.card-admin-btn.edit-btn:hover { background: var(--accent-dim); color: var(--accent); }

/* ============================================================
   Tab icons
   ============================================================ */
.tab { display: flex; align-items: center; justify-content: center; gap: 5px; }
.tab-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* Mobile: icon-only tabs, prevent iOS zoom on inputs */
@media (max-width: 640px) {
  .tab-text { display: none; }
  .tab { padding: 10px 6px; }
  .compose-title-input,
  .compose-textarea,
  .input,
  #search-input { font-size: 16px !important; }
}

/* ============================================================