/* =========================================================
   THEME SYSTEM  (press "T" if you added the tiny JS toggle)
   ========================================================= */
   :root {
    --bg-0: #ffffff;                 /* page base */
    --bg-1: #fdf0f4;                 /* section alt */
    --bg-2: #f8e5ee;                 /* card fill / letterbox */
    --ink-0: #1c0f1c;                /* primary text */
    --ink-1: #623062;                /* secondary text */
    --ink-2: #9c7aa0;                /* muted text */
    --brand: #bf8ad1;                /* accent (buttons) */
    --brand-2: #e3c4ef;              /* light accent */
    --border: rgba(191, 138, 209, .35);
    --shadow: 0 10px 30px rgba(191, 138, 209, .18);
  
    --radius-lg: 20px;
    --radius-md: 14px;
    --blur: 14px;
  }
  
  /* Lavender Night (soft dark) */
  .theme-lavender {
    --bg-0: #0f0a12;
    --bg-1: #16101a;
    --bg-2: #1d1522;
    --ink-0: #f7ecff;
    --ink-1: #d7bff0;
    --ink-2: #ab93c8;
    --brand: #a976ff;
    --brand-2: #433361;
    --border: rgba(169,118,255,.35);
    --shadow: 0 14px 40px rgba(169,118,255,.15);
  }
  
  /* Midnight Rose (moody) */
  .theme-midnight {
    --bg-0: #0b0c10;
    --bg-1: #12131a;
    --bg-2: #171822;
    --ink-0: #faf7ff;
    --ink-1: #d9c7dd;
    --ink-2: #a9a1b0;
    --brand: #ff6fa9;
    --brand-2: #2a1e29;
    --border: rgba(255,111,169,.35);
    --shadow: 0 14px 40px rgba(255,111,169,.15);
  }
  
  /* =========================================================
     GLOBAL / BASE
     ========================================================= */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  
  html, body { height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-0);
    color: var(--ink-0);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
    overflow-x: hidden;
  }
  
  /* Scrollbar */
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg-1); }
  ::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: #c395c3; }
  
  /* Sections */
  section { padding: 100px 0; position: relative; background: var(--bg-0); }
  section:nth-child(even) { background: var(--bg-1); }
  .section-title {
    font-size: clamp(36px,5vw,56px); font-weight: 200; text-align: center; margin-bottom: 80px;
    letter-spacing: 4px; opacity: 0; transform: translateY(30px); color: var(--ink-0);
  }
  
  /* =========================================================
     LOGIN
     ========================================================= */
  .login-page {
    height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fdf0f4 0%, #e6cce0 100%); position: relative;
  }
  .login-page::before {
    content: ''; position: absolute; width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(212,165,212,0.1) 0%, transparent 50%);
    animation: rotate 60s linear infinite;
  }
  @keyframes rotate { from{transform:rotate(0)} to{transform:rotate(360deg)} }
  
  .login-container { text-align: center; z-index: 1; }
  .login-content {
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.65));
    backdrop-filter: blur(var(--blur));
    padding: 60px 80px; border-radius: var(--radius-lg); border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .login-title { font-size: 24px; font-weight: 300; margin-bottom: 40px; color: var(--ink-0); letter-spacing: 2px; }
  .login-form { display: flex; flex-direction: column; gap: 20px; }
  .password-input {
    background: var(--bg-2); border: 1px solid var(--border);
    color: var(--ink-0); font-size: 20px; padding: 15px; width: 390px; text-align: center;
    outline: none; transition: all .3s ease; letter-spacing: 1px; border-radius: 12px;
  }
  .password-input:focus { border-color: var(--brand); transform: translateY(-2px); }
  .password-input::placeholder { color: var(--ink-2); }
  .submit-btn {
    background: var(--brand); border: none; color: #fff; padding: 12px 40px; font-size: 16px;
    cursor: pointer; transition: all .3s ease; letter-spacing: 1px; margin-top: 12px; border-radius: 12px;
    box-shadow: 0 10px 22px rgba(0,0,0,.07), 0 8px 26px rgba(191,138,209,.25);
  }
  .submit-btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
  .error { color: #ff6b6b; margin-top: 20px; font-size: 14px; opacity: 0; animation: fadeIn .5s forwards; }
  
  /* =========================================================
     NAVIGATION
     ========================================================= */
  .nav-menu {
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(255,255,255,.8); backdrop-filter: blur(var(--blur));
    padding: 20px 50px; z-index: 1000; display: flex; gap: 30px; align-items: center;
    border-bottom: 1px solid var(--border); box-shadow: 0 2px 20px rgba(212,165,212,0.1);
  }
  .theme-lavender .nav-menu, .theme-midnight .nav-menu { background: rgba(16,12,20,.65); }
  
  .nav-link {
    color: var(--ink-1); text-decoration: none; transition: all .3s ease;
    font-size: 16px; position: relative;
  }
  .nav-link::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px;
    background: var(--brand); transition: width .3s ease;
  }
  .nav-link:hover, .nav-link.active { color: var(--ink-0); }
  .nav-link:hover::after, .nav-link.active::after { width: 100%; }
  .nav-link.logout { margin-left: auto; }
  
  /* =========================================================
     HERO
     ========================================================= */
  .hero-section {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; background: radial-gradient(1200px 600px at 50% 10%, var(--bg-1), transparent 60%),
    linear-gradient(135deg, #fdf0f4 0%, #f0d9e7 50%, #e6cce0 100%);
  }
  .theme-lavender .hero-section,
  .theme-midnight .hero-section {
    background: radial-gradient(1200px 600px at 50% 10%, rgba(255,255,255,.05), transparent 60%), var(--bg-0);
  }
  
  .hero-background { position: absolute; inset: 0; }
  .hero-title {
    font-size: clamp(48px, 10vw, 120px); font-weight: 200; letter-spacing: 8px; margin-bottom: 20px;
    background: linear-gradient(180deg, var(--ink-0) 40%, var(--ink-1));
    -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; animation: fadeInUp 1s forwards;
  }
  .hero-subtitle { font-size: clamp(18px,3vw,28px); font-weight: 300; opacity: 0; animation: fadeInUp 1s .3s forwards; color: var(--ink-1); }
  .scroll-indicator { position: absolute; bottom: 50px; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: fadeIn 1s 1s forwards; }
  .scroll-indicator span { font-size: 14px; color: var(--ink-2); letter-spacing: 2px; text-transform: uppercase; }
  .scroll-arrow { width: 20px; height: 20px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); animation: bounce 2s infinite; }
  @keyframes bounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(5px)} }
  
  .hero-stats { display: flex; gap: 50px; margin-top: 50px; opacity: 0; animation: fadeInUp 1s .6s forwards; }
  .stat { text-align: center; }
  .stat-number { font-size: 48px; font-weight: 200; display: block; color: var(--brand); }
  .stat-label { font-size: 14px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 2px; }
  
  /* Floating hearts (kept) */
  .floating-hearts { position: absolute; width: 100%; height: 100%; }
  .heart { position: absolute; font-size: 24px; animation: floatHeart 15s infinite; opacity: .5; }
  .heart:nth-child(1){ top:20%; left:10%; animation-delay:0s; color:#ffb6c1;}
  .heart:nth-child(2){ top:60%; right:20%; animation-delay:5s; color:#dda0dd;}
  .heart:nth-child(3){ bottom:30%; left:30%; animation-delay:10s; color:#e31919;}
  @keyframes floatHeart {
    0%,100%{transform:translate(0,0) rotate(0)}
    25%{transform:translate(30px,-30px) rotate(10deg)}
    50%{transform:translate(-20px,20px) rotate(-10deg)}
    75%{transform:translate(40px,10px) rotate(5deg)}
  }
  
  /* =========================================================
     TIMELINE BASE + FILTERS
     ========================================================= */
  .timeline-container { max-width: 1200px; margin: 0 auto; padding: 100px 20px; }
  .timeline-wrapper { position: relative; padding: 20px 0; }
  .timeline-wrapper::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border); transform: translateX(-50%); }
  
  .timeline-item {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; margin-bottom: 120px;
    align-items: center; opacity: 0; transform: translateY(50px);
  }
  .timeline-content {
    padding: 40px;
    background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.55));
    backdrop-filter: blur(var(--blur));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    position: relative; overflow: hidden; box-shadow: var(--shadow);
  }
  .theme-lavender .timeline-content,
  .theme-midnight .timeline-content {
    background: linear-gradient(180deg, rgba(26,18,30,.8), rgba(26,18,30,.6));
  }
  .timeline-content.left { text-align: right; }
  .timeline-content.right { text-align: left; }
  
  .timeline-dot {
    width: 20px; height: 20px; background: var(--brand); border-radius: 50%; position: relative; z-index: 1;
    box-shadow: 0 0 0 6px var(--bg-1);
  }
  .timeline-date { font-size: 14px; color: var(--ink-2); margin-bottom: 16px; letter-spacing: 2px; text-transform: uppercase; }
  .timeline-location { font-size: 16px; color: var(--ink-1); margin-bottom: 8px; }
  
  /* Filters (pills) */
  .timeline-filters { display: flex; justify-content: center; gap: 16px; margin: 28px 0 40px; }
  .filter-btn {
    border: 1px solid var(--border); background: var(--bg-0); color: var(--ink-1);
    padding: 10px 18px; border-radius: 999px; font-size: 14px;
    transition: transform .15s ease, background .2s, color .2s, box-shadow .2s;
  }
  .filter-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
  .filter-btn.active { background: var(--ink-0); color: var(--bg-0); border-color: var(--ink-0); }
  .timeline-filters .filter-btn:last-child { margin-left: 10px; } /* leave space if you added Deck toggle */
  
  /* When a single media is used anywhere */
  .timeline-media {
    width: 100%; height: 300px; object-fit: contain; border-radius: 10px; margin: 12px 0; cursor: pointer; transition: transform .3s ease;
    background: var(--bg-2);
  }
  .timeline-media:hover { transform: scale(1.02); }
  
  /* =========================================================
     FAN DECK (grouped day)
     ========================================================= */
  .fan-deck {
    position: relative; margin-top: 12px;
    background:
      radial-gradient(1200px 500px at 20% 0%, rgba(0,0,0,.03), transparent),
      linear-gradient(180deg, var(--bg-2), transparent 60%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .fan-card {
    position: absolute; top: 12px; left: 12px;
    transform-origin: 16% 90%;
    transform: translateX(var(--x,0)) rotate(var(--rot,0));
    z-index: var(--z,1);
    width: clamp(240px, 62%, 520px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06);
    transition: transform .18s ease, box-shadow .18s ease, filter .2s;
    overflow: hidden;
  }
  .fan-card:hover {
    box-shadow: 0 22px 60px rgba(0,0,0,.10), 0 10px 26px rgba(0,0,0,.08);
    filter: saturate(1.02);
    transform: translateX(calc(var(--x, 0) + 2px)) rotate(0deg);
  }
  .fan-card .deck-media {
    display: block; width: 100%; height: 300px; object-fit: contain; background: var(--bg-2); cursor: pointer;
  }
  .fan-card video.deck-media { cursor: default; }
  .deck-caption { padding: 10px 14px 14px; font-size: 14px; color: var(--ink-1); background: #fff; }
  .thumb-actions {
    position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 5;
  }
  .thumb-actions .action-btn {
    width: 32px; height: 32px; font-size: 16px; border-radius: 50%;
    border: 1px solid var(--border); background: rgba(255,255,255,.92); cursor: pointer;
  }
  
  /* =========================================================
     MUSIC PLAYER
     ========================================================= */
  .music-player {
    position: fixed; top: 20px; right: 20px; z-index: 1001;
    background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.55));
    backdrop-filter: blur(var(--blur));
    border-radius: 999px; padding: 10px 14px; transition: all .3s ease;
    box-shadow: var(--shadow); border: 1px solid var(--border);
  }
  .theme-lavender .music-player, .theme-midnight .music-player {
    background: linear-gradient(180deg, rgba(26,18,30,.8), rgba(26,18,30,.6));
  }
  .music-player.expanded { border-radius: var(--radius-lg); padding: 20px; }
  .music-toggle { background: none; border: none; color: var(--brand); font-size: 24px; cursor: pointer; transition: transform .3s ease; }
  .music-toggle.playing { animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
  .music-controls { display: none; margin-top: 15px; gap: 15px; }
  .music-player.expanded .music-controls { display: flex; flex-direction: column; }
  #music-select { background: var(--bg-2); border: 1px solid var(--border); color: var(--ink-0); padding: 8px; border-radius: 10px; outline: none; }
  #volume-slider { width: 150px; }
  
  /* =========================================================
     MOMENTS & QUOTE
     ========================================================= */
  .moments-section { background: var(--bg-1); padding: 100px 0; }
  .moments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
  .moment-card {
    background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.55));
    backdrop-filter: blur(var(--blur)); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 50px 30px; text-align: center; transition: all .3s ease;
    box-shadow: var(--shadow);
  }
  .theme-lavender .moment-card, .theme-midnight .moment-card {
    background: linear-gradient(180deg, rgba(26,18,30,.8), rgba(26,18,30,.6));
  }
  .moment-card:hover { transform: translateY(-10px); border-color: var(--brand); box-shadow: 0 15px 35px rgba(0,0,0,0.25); }
  .moment-card h3 { font-size: 24px; font-weight: 300; margin-bottom: 10px; color: var(--ink-0); }
  .moment-card p { color: var(--ink-1); margin-bottom: 20px; }
  .moment-icon { font-size: 48px; }
  
  .quote-section { padding: 150px 20px; text-align: center; background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%); }
  .love-quote { font-size: 28px; font-weight: 300; line-height: 1.8; max-width: 800px; margin: 0 auto; color: var(--ink-0); }
  .love-quote cite { display: block; margin-top: 30px; font-size: 18px; color: var(--ink-1); font-style: normal; }
  
  /* =========================================================
     LIGHTBOX
     ========================================================= */
  .lightbox {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(80% 80% at 50% 50%, rgba(0,0,0,.92), rgba(0,0,0,.98));
    z-index: 2000; align-items: center; justify-content: center;
  }
  .lightbox.active { display: flex; }
  .lightbox-close {
    position: absolute; top: 30px; right: 30px; font-size: 40px; color: #fff; cursor: pointer; transition: opacity .3s ease;
  }
  .lightbox-close:hover { opacity: .7; }
  .lightbox-content { max-width: 90%; max-height: 90%; position: relative; }
  .lightbox-content img, .lightbox-content video { max-width: 100%; max-height: 80vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
  .lightbox-content video { display: none; }
  .lightbox-caption { text-align: center; margin-top: 20px; font-size: 18px; color: rgba(255,255,255,0.9); }
  .lightbox-date, .lightbox-location { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 5px; }
  .lightbox-nav { position: absolute; top: 50%; background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 48px; padding: 20px; cursor: pointer; transition: all .3s ease; }
  .lightbox-nav:hover { background: rgba(255,255,255,0.2); }
  .lightbox-nav.prev { left: 20px; } .lightbox-nav.next { right: 20px; }
  
  /* =========================================================
     UPLOAD / PREVIEW
     ========================================================= */
  .upload-section { max-width: 800px; margin: 0 auto; padding: 100px 20px; }
  .upload-form {
    background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.55));
    backdrop-filter: blur(var(--blur)); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow);
  }
  .theme-lavender .upload-form, .theme-midnight .upload-form {
    background: linear-gradient(180deg, rgba(26,18,30,.8), rgba(26,18,30,.6));
  }
  .upload-area {
    border: 2px dashed var(--border); border-radius: 10px; padding: 60px; text-align: center;
    transition: all .3s ease; cursor: pointer; margin-bottom: 30px; background: var(--bg-1);
  }
  .upload-area:hover, .upload-area.dragover { border-color: var(--brand); background: rgba(212,165,212,0.05); }
  .upload-label { cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
  .upload-label span { font-size: 20px; color: var(--ink-0); }
  .upload-label small { font-size: 14px; color: var(--ink-2); }
  
  .file-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 20px; }
  .file-preview-item { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; }
  .file-preview-item img { width: 100%; height: 100%; object-fit: cover; }
  .video-preview { background: rgba(255,255,255,0.1); height: 100%; display: flex; align-items: center; justify-content: center; font-size: 14px; text-align: center; padding: 10px; }
  
  .upload-details { display: grid; gap: 20px; }
  .detail-input {
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
    padding: 15px; color: var(--ink-0); font-size: 16px; outline: none; transition: all .3s ease;
  }
  .detail-input:focus { border-color: var(--brand); background: #fff; }
  .caption-input { min-height: 100px; resize: vertical; }
  #per-file-captions .detail-input { margin-top: 0; }
  
  .upload-actions { display: flex; gap: 15px; }
  .upload-btn {
    background: var(--brand); color: #fff; border: none; border-radius: 12px;
    padding: 15px 30px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all .3s ease;
    box-shadow: 0 10px 22px rgba(0,0,0,.07), 0 8px 26px rgba(191,138,209,.25);
  }
  .upload-btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
  .clear-btn {
    background: transparent; border: 1px solid var(--border); color: var(--ink-1);
    padding: 15px 30px; border-radius: 10px; cursor: pointer; transition: all .3s ease;
  }
  .clear-btn:hover { border-color: var(--ink-1); background: rgba(255,255,255,0.05); }
  
  /* =========================================================
     MODAL
     ========================================================= */
  .modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 3000; align-items: center; justify-content: center;
  }
  .modal.active { display: flex; }
  .modal-content {
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.65));
    border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; max-width: 400px;
    text-align: center; box-shadow: var(--shadow);
  }
  .theme-lavender .modal-content, .theme-midnight .modal-content {
    background: linear-gradient(180deg, rgba(26,18,30,.8), rgba(26,18,30,.6));
  }
  .modal-content h3 { font-size: 24px; margin-bottom: 20px; color: var(--ink-0); }
  .modal-content p { color: var(--ink-1); margin-bottom: 30px; }
  .modal-actions { display: flex; gap: 15px; justify-content: center; }
  .btn-cancel, .btn-delete { padding: 12px 30px; border: none; border-radius: 10px; cursor: pointer; transition: all .3s ease; font-size: 16px; }
  .btn-cancel { background: #fff; border: 1px solid var(--border); color: var(--ink-0); }
  .btn-cancel:hover { background: var(--bg-1); }
  .btn-delete { background: #f44336; color: #fff; }
  .btn-delete:hover { background: #d32f2f; transform: translateY(-2px); }
  
  /* =========================================================
     MAP
     ========================================================= */
  .map-section { background: var(--bg-1); }
  .memory-map { height: 600px; border-radius: var(--radius-lg); overflow: hidden; margin: 0 50px; }
  .map-popup { text-align: center; }
  .map-popup img, .map-popup video { margin-bottom: 10px; border-radius: 5px; }
  .map-popup h4 { margin: 10px 0 5px 0; font-size: 16px; }
  .map-popup p { margin: 5px 0; font-size: 14px; color: #666; }
  .map-popup small { color: #999; }
  
  /* =========================================================
     FAVORITES (POLAROID)
     ========================================================= */
  .favorites-section { background: var(--bg-1); }
  .polaroid-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; padding: 0 50px; max-width: 1400px; margin: 0 auto;
  }
  .polaroid {
    background: #fff; padding: 15px 15px 60px 15px; border-radius: 3px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: rotate(var(--rotation, -2deg));
    transition: all .3s ease; cursor: pointer; position: relative;
  }
  .polaroid:hover { transform: rotate(0) scale(1.05); box-shadow: 0 15px 40px rgba(212,165,212,0.3); }
  .polaroid img { width: 100%; height: 250px; object-fit: cover; border-radius: 2px; }
  .polaroid-caption {
    position: absolute; bottom: 15px; left: 15px; right: 15px; text-align: center;
    color: var(--ink-1); font-family: 'Courier New', monospace; font-size: 14px;
  }
  
  /* =========================================================
     ANIMATIONS
     ========================================================= */
  @keyframes fadeIn { to{opacity:1} }
  @keyframes fadeInUp { to{opacity:1; transform: translateY(0)} }
  
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width: 768px) {
    .nav-menu { padding: 15px 20px; gap: 15px; flex-wrap: wrap; }
    .timeline-wrapper::before { left: 30px; }
    .timeline-item { grid-template-columns: auto 1fr; gap: 20px; }
    .timeline-dot { margin-left: 20px; }
    .timeline-content.left, .timeline-content.right { text-align: left; }
  
    .polaroid-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); padding: 0 20px; }
    .memory-map { margin: 0 20px; height: 420px; }
  
    .fan-card { width: calc(100% - 24px); }
    .fan-card .deck-media { height: 220px; }
  }

  
  /* ==== Theme switcher (floating chip) ==== */
.theme-switcher {
    position: fixed;
    top: 86px;           /* sits below your music chip */
    right: 20px;
    z-index: 1100;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.65));
    backdrop-filter: blur(var(--blur));
    width: 44px; height: 44px;
    border-radius: 999px;
    display: grid; place-items: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .15s ease, filter .2s ease;
  }
  .theme-switcher:hover { transform: translateY(-2px); filter: brightness(1.03); }
  .theme-switcher .theme-icon { font-size: 20px; line-height: 1; }
  
  /* Dark theme chip glass */
  .theme-lavender .theme-switcher,
  .theme-midnight .theme-switcher {
    background: linear-gradient(180deg, rgba(26,18,30,.8), rgba(26,18,30,.6));
  }


.login-hint{
  display:block;
  margin:10px 4px 0;
  font-size:12px;
  letter-spacing:.02em;
  color: var(--text-muted, rgba(0,0,0,.55));
  text-align:center;           /* or center if you prefer */
}

.theme-midnight .login-hint{
  color: rgba(255,255,255,.7);
}


/* FINAL OVERRIDE — midnight theme form fields */
body.theme-midnight textarea,
body.theme-midnight input[type="text"],
body.theme-midnight input[type="date"],
body.theme-midnight input[type="search"],
body.theme-midnight input[type="email"],
body.theme-midnight input[type="number"],
body.theme-midnight select,
body.theme-midnight .form-control,
body.theme-midnight .upload-form textarea,
body.theme-midnight .upload-form input,
body.theme-midnight .upload-form select {
  background-color: rgba(255,255,255,.06) !important;
  color: #f7ecff !important;
  border-color: rgba(255,255,255,.18) !important;
  caret-color: #ff8fc9;
}

/* placeholder + autofill */
body.theme-midnight input::placeholder,
body.theme-midnight textarea::placeholder { color: #d8c6e6 !important; opacity: .85; }

body.theme-midnight input:-webkit-autofill,
body.theme-midnight textarea:-webkit-autofill,
body.theme-midnight select:-webkit-autofill {
  -webkit-text-fill-color: #f7ecff !important;
  transition: background-color 9999s ease-in-out 0s; /* keeps our bg visible */
}

/* focus */
body.theme-midnight textarea:focus,
body.theme-midnight input:focus,
body.theme-midnight select:focus,
body.theme-midnight .form-control:focus {
  outline: none !important;
  border-color: #ff7fb9 !important;
  box-shadow: 0 0 0 3px rgba(255,127,185,.16) !important;
}

/* caption under media (if still faint) */
body.theme-midnight .deck-caption {
  background: rgba(255,255,255,.06) !important;
  color: #f7ecff !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}


/* Posts */
/* ===== Simple Posts ===== */
#posts-section { margin-top: 40px; }

.post-composer{
  background: var(--panel, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 16px;
  padding: 14px;
  max-width: 900px;
  margin: 0 auto 24px;
}
.post-composer textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  resize: vertical;
  min-height: 80px;
  background: transparent;
  color: var(--text-primary);
}
.composer-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
}
#add-photo-btn{
  border:1px solid var(--border);
  background:transparent;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
#post-submit{
  margin-left:auto;
  border:0;
  background:#ff6fa9;
  color:#fff;
  padding:8px 16px;
  border-radius:10px;
  cursor:pointer;
}
#composer-filename{ font-size:12px; color: var(--text-muted); }
#composer-preview{ margin-top:10px; }
.composer-preview-img{
  max-width:100%;
  border-radius:12px;
  display:block;
  margin: 4px auto;
}

#posts-list{
  max-width: 900px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.post-card{
  position:relative;
  background: var(--panel, rgba(255,255,255,0.03));
  border:1px solid var(--border, rgba(255,255,255,0.1));
  border-radius:16px;
  padding:0 0 12px;
  text-align: center;
}
.post-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px 16px 0 0;
  object-fit:cover;
  max-height: 520px;
}
.post-caption{
  text-align:center;
  padding:12px 14px;
  color: var(--text-primary);
}
.post-meta{
  text-align:center;
  font-size:12px;
  color: var(--text-muted);
}
.post-delete{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:6px 8px;
  cursor:pointer;
}
.post-delete:hover{ background:rgba(0,0,0,.7); }