/* ========================================
   Post Border Themes
   All decorative post card border styles.
   Extracted from feed.html and profile.css.
   Can be lazy-loaded since themes only appear on themed posts.
   ======================================== */

/* ---- Mixtape ---- */
.post-card.border-mixtape { border: 3px solid #8B4513 !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(60,40,20,0.3) 0%, transparent 20%), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: inset 0 15px 0 rgba(200,180,150,0.3), 0 4px 8px rgba(0,0,0,0.3) !important; padding-top: 2rem !important; }
.post-card.border-mixtape::before { content: '▶ SIDE A'; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); background: #d4c4a8; color: #333; padding: 2px 12px; font-size: 0.65rem; font-weight: bold; border-radius: 2px; letter-spacing: 1px; }

/* ---- Late Night ---- */
.post-card.border-latenight { border: 2px solid #2a1a4a !important; border-radius: 16px !important; background: linear-gradient(135deg, rgba(20,10,40,0.8), rgba(40,20,80,0.6)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 0 0 20px rgba(100,50,200,0.3), 0 0 40px rgba(50,20,100,0.2), inset 0 0 30px rgba(100,50,200,0.1) !important; }

/* ---- Emo ---- */
.post-card.border-emo { border: 3px solid #1a1a1a !important; border-radius: 4px !important; background: linear-gradient(45deg, rgba(20,20,20,0.9), rgba(40,20,30,0.8)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 2px 0 0 #333, -2px 0 0 #333, 0 2px 0 #333, 0 -2px 0 #333, 4px 4px 0 rgba(100,0,0,0.3), -4px -4px 0 rgba(100,0,0,0.2) !important; clip-path: polygon(0% 2%, 3% 0%, 8% 3%, 15% 0%, 20% 2%, 30% 0%, 35% 1%, 45% 0%, 50% 2%, 60% 0%, 70% 1%, 80% 0%, 85% 2%, 95% 0%, 100% 3%, 98% 10%, 100% 20%, 99% 35%, 100% 50%, 98% 65%, 100% 80%, 99% 90%, 100% 100%, 90% 98%, 80% 100%, 70% 99%, 60% 100%, 50% 98%, 40% 100%, 30% 99%, 20% 100%, 10% 98%, 0% 100%, 2% 85%, 0% 70%, 1% 55%, 0% 40%, 2% 25%, 0% 10%); }

/* ---- Good Vibes ---- */
.post-card.border-goodvibes { border: 3px solid #ffb6c1 !important; border-radius: 24px !important; background: linear-gradient(135deg, rgba(255,220,230,0.2), rgba(200,230,255,0.2), rgba(255,255,200,0.2)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 0 4px 15px rgba(255,182,193,0.4), inset 0 0 20px rgba(255,255,255,0.2), 0 0 0 4px rgba(255,220,180,0.3) !important; }

/* ---- Rant ---- */
.post-card.border-rant { border: 4px solid #ff4500 !important; border-radius: 6px !important; background: rgba(40,20,10,0.8), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 3px 3px 0 #cc3700, -1px -1px 0 #ff6a33, inset 0 0 10px rgba(255,69,0,0.2) !important; }

/* ---- Cloud ---- */
.post-card.border-cloud { border: 3px solid #fff !important; border-radius: 30px !important; background: linear-gradient(180deg, #ffffff 0%, #e8f4fc 50%, #d4ebf7 100%) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.15), inset 0 -8px 20px rgba(135,206,250,0.3), inset 0 8px 20px rgba(255,255,255,0.8) !important; position: relative; margin-top: 35px !important; overflow: visible !important; }
.post-card.border-cloud::before { content: ''; position: absolute; background: linear-gradient(180deg, #ffffff 0%, #e8f4fc 100%); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 -4px 10px rgba(135,206,250,0.2); z-index: -1; width: 70px; height: 70px; top: -35px; left: 8%; }
.post-card.border-cloud::after { content: ''; position: absolute; background: linear-gradient(180deg, #ffffff 0%, #e8f4fc 100%); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 -4px 10px rgba(135,206,250,0.2); z-index: -1; width: 90px; height: 90px; top: -50px; left: 25%; }
.post-card.border-cloud .post-header::before { content: ''; position: absolute; background: linear-gradient(180deg, #ffffff 0%, #e8f4fc 100%); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: -1; width: 80px; height: 80px; top: -75px; left: 45%; }
.post-card.border-cloud .post-header::after { content: ''; position: absolute; background: linear-gradient(180deg, #ffffff 0%, #e8f4fc 100%); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: -1; width: 60px; height: 60px; top: -55px; right: 12%; }

/* ---- Chowder ---- */
.post-card.border-chowder, div.post-card.border-chowder { border: 3px solid #FF6B35 !important; border-radius: 0 !important; background: linear-gradient(135deg, rgba(255, 200, 100, 0.15), rgba(255, 140, 60, 0.08)), var(--post-card-bg, rgba(30, 30, 30, 0.85)) !important; box-shadow: 6px 6px 15px rgba(255, 107, 53, 0.4), -2px -2px 10px rgba(255, 200, 100, 0.25), inset 0 0 20px rgba(255, 200, 100, 0.12) !important; position: relative; animation: chowderPulse 2s ease-in-out infinite; padding: 1.5rem !important; overflow: visible !important; }
.post-card.border-chowder > * { position: relative; z-index: 1; }
@keyframes chowderPulse { 0%, 100% { box-shadow: 6px 6px 15px rgba(255, 107, 53, 0.4), -2px -2px 10px rgba(255, 200, 100, 0.25), inset 0 0 20px rgba(255, 200, 100, 0.12); } 50% { box-shadow: 6px 6px 20px rgba(255, 107, 53, 0.5), -2px -2px 15px rgba(255, 200, 100, 0.3), inset 0 0 25px rgba(255, 200, 100, 0.15); } }
.post-card.border-chowder .post-header { gap: 0.75rem !important; margin-bottom: 1rem !important; }
.post-card.border-chowder .post-avatar { width: 56px !important; height: 56px !important; border: 2px solid rgba(255, 200, 100, 0.6) !important; border-radius: 4px !important; }
.post-card.border-chowder .post-display-name, .post-card.border-chowder .post-handle { font-size: 1rem !important; font-weight: 700 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; }
.post-card.border-chowder .post-content { font-size: 1.05rem !important; line-height: 1.6 !important; font-weight: 500 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; margin-bottom: 1rem !important; }
.post-card.border-chowder .post-media-container img, .post-card.border-chowder .post-media-container video { max-width: 85% !important; margin: 0 auto !important; display: block !important; border-radius: 12px !important; }
.post-card.border-chowder .post-actions { gap: 0.5rem !important; justify-content: center !important; }
.post-card.border-chowder .post-actions button { font-size: 0.75rem !important; padding: 0.3rem 0.6rem !important; }
.post-card.border-chowder .post-meta { font-size: 0.7rem !important; }

/* ---- Barbie ---- */
.post-card.border-barbie { border: 4px solid #FF69B4 !important; border-radius: 0 !important; background: linear-gradient(135deg, rgba(255, 182, 193, 0.15), rgba(255, 105, 180, 0.1)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 0 0 20px rgba(255, 105, 180, 0.4), 0 0 40px rgba(255, 182, 193, 0.3), inset 0 0 30px rgba(255, 192, 203, 0.2) !important; position: relative; transform: rotate(-1deg); animation: barbieFloat 3s ease-in-out infinite, barbieGlitter 2s linear infinite; padding: 2.5rem 3rem !important; overflow: visible !important; }
@keyframes barbieFloat { 0%, 100% { transform: rotate(-1deg) translateY(0px); } 50% { transform: rotate(0.5deg) translateY(-3px); } }
@keyframes barbieGlitter { 0% { box-shadow: 0 0 20px rgba(255, 105, 180, 0.5), 0 0 40px rgba(255, 182, 193, 0.3), 0 0 60px rgba(255, 20, 147, 0.2), inset 0 0 30px rgba(255, 192, 203, 0.2); } 20% { box-shadow: 0 0 25px rgba(255, 20, 147, 0.6), 0 0 50px rgba(255, 105, 180, 0.4), 0 0 80px rgba(255, 182, 193, 0.3), inset 0 0 35px rgba(255, 192, 203, 0.25); } 40% { box-shadow: 0 0 30px rgba(255, 105, 180, 0.7), 0 0 60px rgba(255, 20, 147, 0.5), 0 0 100px rgba(255, 182, 193, 0.4), inset 0 0 40px rgba(255, 192, 203, 0.3); } 60% { box-shadow: 0 0 35px rgba(255, 182, 193, 0.8), 0 0 70px rgba(255, 105, 180, 0.5), 0 0 90px rgba(255, 20, 147, 0.3), inset 0 0 45px rgba(255, 192, 203, 0.35); } 80% { box-shadow: 0 0 25px rgba(255, 20, 147, 0.6), 0 0 55px rgba(255, 182, 193, 0.4), 0 0 75px rgba(255, 105, 180, 0.3), inset 0 0 35px rgba(255, 192, 203, 0.25); } 100% { box-shadow: 0 0 20px rgba(255, 105, 180, 0.5), 0 0 40px rgba(255, 182, 193, 0.3), 0 0 60px rgba(255, 20, 147, 0.2), inset 0 0 30px rgba(255, 192, 203, 0.2); } }
.post-card.border-barbie::before { display: none; }
@keyframes barbieBorderShimmer { 0%, 100% { border-color: #FFB6C1; opacity: 0.4; box-shadow: 0 0 15px rgba(255, 105, 180, 0.3); } 25% { border-color: #FF69B4; opacity: 0.7; box-shadow: 0 0 25px rgba(255, 20, 147, 0.5); } 50% { border-color: #FF1493; opacity: 0.9; box-shadow: 0 0 35px rgba(255, 105, 180, 0.6); } 75% { border-color: #FF69B4; opacity: 0.7; box-shadow: 0 0 25px rgba(255, 182, 193, 0.5); } }
.post-card.border-barbie .post-header { gap: 0.5rem !important; }
.post-card.border-barbie .post-avatar { width: 36px !important; height: 36px !important; }
.post-card.border-barbie .post-display-name, .post-card.border-barbie .post-handle { font-size: 0.8rem !important; }
.post-card.border-barbie .post-content { font-size: 0.85rem !important; line-height: 1.4 !important; }
.post-card.border-barbie .post-media-container img, .post-card.border-barbie .post-media-container video { max-width: 85% !important; margin: 0 auto !important; display: block !important; border-radius: 12px !important; }
.post-card.border-barbie .post-actions { gap: 0.5rem !important; justify-content: center !important; }
.post-card.border-barbie .post-actions button { font-size: 0.75rem !important; padding: 0.3rem 0.6rem !important; }
.post-card.border-barbie .post-meta { font-size: 0.7rem !important; }

/* ---- Moonstone ---- */
.post-card.border-moonstone { border: 4px solid #A0C4E8 !important; border-radius: 0 !important; background: linear-gradient(135deg, rgba(160, 196, 232, 0.15), rgba(200, 220, 240, 0.1), rgba(180, 200, 255, 0.08)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 0 0 25px rgba(160, 196, 232, 0.4), 0 0 50px rgba(200, 220, 255, 0.3), inset 0 0 35px rgba(180, 210, 255, 0.15) !important; position: relative; transform: rotate(1deg); animation: moonstoneFloat 4s ease-in-out infinite; padding: 2.5rem 3rem !important; overflow: visible !important; }
@keyframes moonstoneFloat { 0%, 100% { transform: rotate(1deg) translateY(0px) scale(1); } 50% { transform: rotate(-0.5deg) translateY(-4px) scale(1.005); } }
.post-card.border-moonstone::before { display: none; }
@keyframes moonstoneShimmer { 0%, 100% { opacity: 0.5; filter: hue-rotate(0deg); } 50% { opacity: 0.9; filter: hue-rotate(20deg); } }
.post-card.border-moonstone .post-header { gap: 0.5rem !important; }
.post-card.border-moonstone .post-avatar { width: 36px !important; height: 36px !important; }
.post-card.border-moonstone .post-content { font-size: 0.85rem !important; line-height: 1.4 !important; }
.post-card.border-moonstone .post-actions { gap: 0.5rem !important; justify-content: center !important; }

/* ---- Aurora ---- */
.post-card.border-aurora { border: 4px solid #00CED1 !important; border-radius: 0 !important; background: linear-gradient(135deg, rgba(0, 206, 209, 0.12), rgba(138, 43, 226, 0.08), rgba(0, 255, 127, 0.06)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 0 0 30px rgba(0, 206, 209, 0.4), 0 0 60px rgba(138, 43, 226, 0.25), 0 0 90px rgba(0, 255, 127, 0.15), inset 0 0 40px rgba(0, 206, 209, 0.1) !important; position: relative; transform: rotate(-1.2deg); animation: auroraFloat 5s ease-in-out infinite; padding: 2.5rem 3rem !important; overflow: visible !important; }
@keyframes auroraFloat { 0%, 100% { transform: rotate(-1.2deg) translateY(0px); } 33% { transform: rotate(0.8deg) translateY(-3px); } 66% { transform: rotate(-0.5deg) translateY(-2px); } }
.post-card.border-aurora::before { display: none; }
@keyframes auroraWave { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.post-card.border-aurora .post-header { gap: 0.5rem !important; }
.post-card.border-aurora .post-avatar { width: 36px !important; height: 36px !important; }
.post-card.border-aurora .post-content { font-size: 0.85rem !important; line-height: 1.4 !important; }
.post-card.border-aurora .post-actions { gap: 0.5rem !important; justify-content: center !important; }

/* ---- Opal ---- */
.post-card.border-opal { border: 4px solid #E6E6FA !important; border-radius: 0 !important; background: linear-gradient(135deg, rgba(255, 182, 193, 0.1), rgba(173, 216, 230, 0.1), rgba(255, 218, 185, 0.1), rgba(221, 160, 221, 0.1)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 0 0 25px rgba(255, 182, 193, 0.3), 0 0 50px rgba(173, 216, 230, 0.25), 0 0 75px rgba(221, 160, 221, 0.2), inset 0 0 35px rgba(255, 218, 185, 0.15) !important; position: relative; transform: rotate(0.8deg); animation: opalFloat 4.5s ease-in-out infinite; padding: 2.5rem 3rem !important; overflow: visible !important; }
@keyframes opalFloat { 0%, 100% { transform: rotate(0.8deg) translateY(0px) scale(1); } 50% { transform: rotate(-0.8deg) translateY(-3px) scale(1.003); } }
.post-card.border-opal::before { display: none; }
@keyframes opalShimmer { 0%, 100% { background-position: 0% 50%; filter: hue-rotate(0deg); } 50% { background-position: 100% 50%; filter: hue-rotate(30deg); } }
.post-card.border-opal .post-header { gap: 0.5rem !important; }
.post-card.border-opal .post-avatar { width: 36px !important; height: 36px !important; }
.post-card.border-opal .post-content { font-size: 0.85rem !important; line-height: 1.4 !important; }
.post-card.border-opal .post-actions { gap: 0.5rem !important; justify-content: center !important; }

/* ---- Nebula ---- */
.post-card.border-nebula { border: 4px solid #9B59B6 !important; border-radius: 0 !important; background: linear-gradient(135deg, rgba(155, 89, 182, 0.12), rgba(52, 73, 94, 0.1), rgba(231, 76, 60, 0.06)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 0 0 30px rgba(155, 89, 182, 0.5), 0 0 60px rgba(52, 73, 94, 0.3), 0 0 90px rgba(231, 76, 60, 0.2), inset 0 0 40px rgba(155, 89, 182, 0.1) !important; position: relative; transform: rotate(-0.7deg); animation: nebulaFloat 5.5s ease-in-out infinite; padding: 2.5rem 3rem !important; overflow: visible !important; }
@keyframes nebulaFloat { 0%, 100% { transform: rotate(-0.7deg) translateY(0px); box-shadow: 0 0 30px rgba(155, 89, 182, 0.5), 0 0 60px rgba(52, 73, 94, 0.3), 0 0 90px rgba(231, 76, 60, 0.2), inset 0 0 40px rgba(155, 89, 182, 0.1); } 50% { transform: rotate(0.5deg) translateY(-4px); box-shadow: 0 0 40px rgba(231, 76, 60, 0.5), 0 0 70px rgba(155, 89, 182, 0.4), 0 0 100px rgba(52, 73, 94, 0.3), inset 0 0 50px rgba(231, 76, 60, 0.15); } }
.post-card.border-nebula::before { display: none; }
@keyframes nebulaPulse { 0%, 100% { background-position: 0% 0%; opacity: 0.6; } 50% { background-position: 100% 100%; opacity: 0.9; } }
.post-card.border-nebula .post-header { gap: 0.5rem !important; }
.post-card.border-nebula .post-avatar { width: 36px !important; height: 36px !important; }
.post-card.border-nebula .post-content { font-size: 0.85rem !important; line-height: 1.4 !important; }
.post-card.border-nebula .post-actions { gap: 0.5rem !important; justify-content: center !important; }

/* ---- Mermaid ---- */
.post-card.border-mermaid { border: 4px solid #20B2AA !important; border-radius: 0 !important; background: linear-gradient(135deg, rgba(32, 178, 170, 0.12), rgba(64, 224, 208, 0.08), rgba(0, 139, 139, 0.1)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 0 0 25px rgba(32, 178, 170, 0.45), 0 0 50px rgba(64, 224, 208, 0.3), 0 0 80px rgba(0, 139, 139, 0.2), inset 0 0 35px rgba(64, 224, 208, 0.12) !important; position: relative; transform: rotate(1.2deg); animation: mermaidFloat 4s ease-in-out infinite; padding: 2.5rem 3rem !important; overflow: visible !important; }
@keyframes mermaidFloat { 0%, 100% { transform: rotate(1.2deg) translateY(0px) translateX(0px); } 25% { transform: rotate(0.5deg) translateY(-2px) translateX(2px); } 50% { transform: rotate(-0.8deg) translateY(-4px) translateX(0px); } 75% { transform: rotate(0.3deg) translateY(-2px) translateX(-2px); } }
.post-card.border-mermaid::before { display: none; }
@keyframes mermaidWave { 0%, 100% { background-position: 0% 50%; filter: brightness(1); } 50% { background-position: 100% 50%; filter: brightness(1.2); } }
.post-card.border-mermaid .post-header { gap: 0.5rem !important; }
.post-card.border-mermaid .post-avatar { width: 36px !important; height: 36px !important; }
.post-card.border-mermaid .post-content { font-size: 0.85rem !important; line-height: 1.4 !important; }
.post-card.border-mermaid .post-actions { gap: 0.5rem !important; justify-content: center !important; }

/* ---- Fire (Fireplace) ---- */
.post-card.border-fire { border: 4px solid transparent !important; border-radius: 12px !important; background: linear-gradient(var(--post-card-bg, rgba(30, 30, 30, 0.85)), var(--post-card-bg, rgba(30, 30, 30, 0.85))) padding-box, linear-gradient(180deg, #FF4500, #FF8C00, #FFD700, #FF6347) border-box !important; box-shadow: 0 0 20px rgba(255, 69, 0, 0.5), 0 0 40px rgba(255, 140, 0, 0.3), inset 0 0 25px rgba(255, 69, 0, 0.08) !important; position: relative; overflow: visible !important; animation: fireplaceGlow 2s ease-in-out infinite; }
.post-card.border-fire::before { content: ''; position: absolute; bottom: -6px; left: 5%; right: 5%; height: 35px; transform-origin: bottom center; background: linear-gradient(180deg, rgba(255,69,0,0.9) 0%, rgba(255,140,0,0.8) 25%, rgba(255,215,0,0.6) 50%, rgba(255,69,0,0.7) 75%, transparent 100%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; filter: blur(4px); pointer-events: none; animation: fireplaceFlameBottom 1.2s ease-in-out infinite alternate; z-index: -1; }
.post-card.border-fire::after { content: ''; position: absolute; top: -6px; left: 5%; right: 5%; height: 30px; transform-origin: top center; background: linear-gradient(0deg, rgba(255,69,0,0.85) 0%, rgba(255,140,0,0.7) 30%, rgba(255,215,0,0.5) 60%, transparent 100%); border-radius: 0 0 50% 50% / 0 0 100% 100%; filter: blur(4px); pointer-events: none; animation: fireplaceFlameTop 1.5s ease-in-out infinite alternate; z-index: -1; }
/* fireplaceGlow/FlameBottom/FlameTop use transform+opacity only (no height/box-shadow
   keyframe changes) so the browser can composite them without a main-thread repaint
   on every animation frame. Base heights above (35px / 30px) are the resting size;
   scaleY below approximates the previous height keyframe values. */
@keyframes fireplaceGlow { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } }
@keyframes fireplaceFlameBottom { 0% { transform: scaleX(0.95) scaleY(0.86); opacity: 0.8; } 33% { transform: scaleX(1.05) scaleY(1.14); opacity: 1; } 66% { transform: scaleX(0.98) scaleY(1); opacity: 0.9; } 100% { transform: scaleX(1.02) scaleY(1.2); opacity: 1; } }
@keyframes fireplaceFlameTop { 0% { transform: scaleX(0.97) scaleY(0.83); opacity: 0.75; } 50% { transform: scaleX(1.03) scaleY(1.17); opacity: 0.95; } 100% { transform: scaleX(0.99) scaleY(0.93); opacity: 0.85; } }
.post-card.border-fire > * { position: relative; z-index: 1; }

/* ---- Electric ---- */
.post-card.border-electric { border: 4px solid #00FFFF !important; border-radius: 0 !important; background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 191, 255, 0.08), rgba(138, 43, 226, 0.06)), var(--post-card-bg, rgba(30, 30, 30, 0.7)) !important; box-shadow: 0 0 25px rgba(0, 255, 255, 0.7), 0 0 50px rgba(0, 191, 255, 0.5), inset 0 0 30px rgba(138, 43, 226, 0.15) !important; position: relative; animation: electricZap 1.5s ease-in-out infinite; }
@keyframes electricZap { 0%, 100% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.7), 0 0 50px rgba(0, 191, 255, 0.5), inset 0 0 30px rgba(138, 43, 226, 0.15); } 10%, 40%, 70% { box-shadow: 0 0 50px rgba(0, 255, 255, 1), 0 0 100px rgba(0, 191, 255, 0.8), inset 0 0 50px rgba(138, 43, 226, 0.3); } 20%, 50%, 80% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 30px rgba(0, 191, 255, 0.3), inset 0 0 20px rgba(138, 43, 226, 0.1); } }
.post-card.border-electric::before { display: none; }
@keyframes electricPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---- Rainbow ---- */
.post-card.border-rainbow { border: 4px solid transparent !important; border-radius: 18px !important; background: linear-gradient(var(--post-card-bg, rgba(30, 30, 30, 0.7)), var(--post-card-bg, rgba(30, 30, 30, 0.7))) padding-box, linear-gradient(90deg, #ff005a, #ffbe00, #00ff94, #00cfff, #a259ff, #ff005a) border-box !important; background-size: 100% 100%, 260% 260% !important; box-shadow: 0 0 16px 2px #ffbe00, 0 0 32px 4px rgba(162, 89, 255, 0.2) !important; animation: rainbowBorderFlow 4s linear infinite; position: relative; overflow: visible !important; }
@keyframes rainbowBorderFlow { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 100% 50%; } }

/* ---- Vibe (Custom 2-3 Color Gradient) ---- */
.post-card.border-vibe { border: 4px solid transparent !important; border-radius: 18px !important; background: linear-gradient(var(--post-card-bg, rgba(30, 30, 30, 0.7)), var(--post-card-bg, rgba(30, 30, 30, 0.7))) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--vibe-color-1, #ff4d6d) var(--post-border-opacity-pct, 100%), transparent), color-mix(in srgb, var(--vibe-color-2, #00d4ff) var(--post-border-opacity-pct, 100%), transparent), color-mix(in srgb, var(--vibe-color-3, var(--vibe-color-1, #ff4d6d)) var(--post-border-opacity-pct, 100%), transparent), color-mix(in srgb, var(--vibe-color-1, #ff4d6d) var(--post-border-opacity-pct, 100%), transparent)) border-box !important; background-size: 100% 100%, 260% 260% !important; box-shadow: 0 0 16px rgba(255, 100, 180, 0.45), 0 0 30px rgba(0, 212, 255, 0.3) !important; animation: vibeBorderFlow 4s linear infinite; position: relative; overflow: visible !important; }
@keyframes vibeBorderFlow { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 100% 50%; } }

/* Optional media tint toggle (rainbow + vibe only) */
.post-card.border-rainbow.border-media-tint .post-media img,
.post-card.border-rainbow.border-media-tint .post-gif img,
.post-card.border-vibe.border-media-tint .post-media img,
.post-card.border-vibe.border-media-tint .post-gif img,
.shared-original-post.border-rainbow.border-media-tint .post-media img,
.shared-original-post.border-rainbow.border-media-tint .post-gif img,
.shared-original-post.border-vibe.border-media-tint .post-media img,
.shared-original-post.border-vibe.border-media-tint .post-gif img {
   filter: hue-rotate(140deg) saturate(1.15);
}

/* ---- Neon Green ---- */
.post-card.border-neon-green { border: 3px solid #39FF14 !important; border-radius: 12px !important; background: var(--post-card-bg, rgba(20, 40, 20, 0.7)) !important; box-shadow: 0 0 16px #39FF14, 0 0 32px rgba(57, 255, 20, 0.53) !important; animation: neonGlowGreen 1.5s alternate infinite; }
@keyframes neonGlowGreen { 0% { box-shadow: 0 0 16px #39FF14, 0 0 32px rgba(57, 255, 20, 0.53); } 100% { box-shadow: 0 0 32px #39FF14, 0 0 64px rgba(57, 255, 20, 0.8); } }

/* ---- Neon Pink ---- */
.post-card.border-neon-pink { border: 3px solid #FF2A7F !important; border-radius: 12px !important; background: var(--post-card-bg, rgba(40, 20, 30, 0.7)) !important; box-shadow: 0 0 16px #FF2A7F, 0 0 32px rgba(255, 42, 127, 0.53) !important; animation: neonGlowPink 1.5s alternate infinite; }
@keyframes neonGlowPink { 0% { box-shadow: 0 0 16px #FF2A7F, 0 0 32px rgba(255, 42, 127, 0.53); } 100% { box-shadow: 0 0 32px #FF2A7F, 0 0 64px rgba(255, 42, 127, 0.8); } }

/* ---- Neon Blue ---- */
.post-card.border-neon-blue { border: 3px solid #00FFFF !important; border-radius: 12px !important; background: var(--post-card-bg, rgba(20, 30, 40, 0.7)) !important; box-shadow: 0 0 16px #00FFFF, 0 0 32px rgba(0, 255, 255, 0.53) !important; animation: neonGlowBlue 1.5s alternate infinite; }
@keyframes neonGlowBlue { 0% { box-shadow: 0 0 16px #00FFFF, 0 0 32px rgba(0, 255, 255, 0.53); } 100% { box-shadow: 0 0 32px #00FFFF, 0 0 64px rgba(0, 255, 255, 0.8); } }

/* ---- Neon Orange ---- */
.post-card.border-neon-orange { border: 3px solid #FF9900 !important; border-radius: 12px !important; background: var(--post-card-bg, rgba(40, 30, 20, 0.7)) !important; box-shadow: 0 0 16px #FF9900, 0 0 32px rgba(255, 153, 0, 0.53) !important; animation: neonGlowOrange 1.5s alternate infinite; }
@keyframes neonGlowOrange { 0% { box-shadow: 0 0 16px #FF9900, 0 0 32px rgba(255, 153, 0, 0.53); } 100% { box-shadow: 0 0 32px #FF9900, 0 0 64px rgba(255, 153, 0, 0.8); } }

/* ---- Neon Purple ---- */
.post-card.border-neon-purple { border: 3px solid #B026FF !important; border-radius: 12px !important; background: var(--post-card-bg, rgba(30, 20, 40, 0.7)) !important; box-shadow: 0 0 16px #B026FF, 0 0 32px rgba(176, 38, 255, 0.53) !important; animation: neonGlowPurple 1.5s alternate infinite; }
@keyframes neonGlowPurple { 0% { box-shadow: 0 0 16px #B026FF, 0 0 32px rgba(176, 38, 255, 0.53); } 100% { box-shadow: 0 0 32px #B026FF, 0 0 64px rgba(176, 38, 255, 0.8); } }

/* ---- Pixel ---- */
.post-card.border-pixel { border: 6px solid #222 !important; border-radius: 0 !important; background: var(--post-card-bg, rgba(30, 30, 30, 0.85)) !important; box-shadow: 0 0 0 3px #ff00cc, 0 0 0 6px #00eaff, inset 0 0 0 2px rgba(255, 0, 204, 0.15) !important; image-rendering: pixelated; position: relative; }
.post-card.border-pixel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(255,0,204,0.04) 3px, rgba(255,0,204,0.04) 4px), repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(0,234,255,0.04) 3px, rgba(0,234,255,0.04) 4px); pointer-events: none; z-index: 0; }
.post-card.border-pixel > * { position: relative; z-index: 1; }

/* ========================================
   Profile Avatar Border-Theme Animations
   Applies the same movement/glow animations
   to the profile avatar wrapper (.story-avatar-ring).
   Keeps border-radius: 50% for circular shape.
   ======================================== */

/* Mixtape - warm glow */
.story-avatar-ring.border-mixtape { border: 3px solid #8B4513 !important; border-radius: 50% !important; box-shadow: inset 0 4px 0 rgba(200,180,150,0.3), 0 4px 8px rgba(0,0,0,0.3) !important; }

/* Late Night - purple glow */
.story-avatar-ring.border-latenight { border: 2px solid #2a1a4a !important; border-radius: 50% !important; box-shadow: 0 0 20px rgba(100,50,200,0.3), 0 0 40px rgba(50,20,100,0.2) !important; }

/* Emo - dark edgy glow */
.story-avatar-ring.border-emo { border: 3px solid #1a1a1a !important; border-radius: 50% !important; box-shadow: 2px 0 0 #333, -2px 0 0 #333, 0 2px 0 #333, 0 -2px 0 #333, 4px 4px 0 rgba(100,0,0,0.3) !important; }

/* Good Vibes - soft pink glow */
.story-avatar-ring.border-goodvibes { border: 3px solid #ffb6c1 !important; border-radius: 50% !important; box-shadow: 0 4px 15px rgba(255,182,193,0.4), 0 0 0 4px rgba(255,220,180,0.3) !important; }

/* Rant - angry red glow */
.story-avatar-ring.border-rant { border: 4px solid #ff4500 !important; border-radius: 50% !important; box-shadow: 3px 3px 0 #cc3700, -1px -1px 0 #ff6a33 !important; }

/* Cloud - white fluffy glow */
.story-avatar-ring.border-cloud { border: 3px solid #fff !important; border-radius: 50% !important; box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 0 20px rgba(135,206,250,0.3) !important; }

/* Chowder - orange pulse */
.story-avatar-ring.border-chowder { border: 3px solid #FF6B35 !important; border-radius: 50% !important; animation: chowderPulse 2s ease-in-out infinite !important; }

/* Barbie - pink float + glitter */
.story-avatar-ring.border-barbie { border: 4px solid #FF69B4 !important; border-radius: 50% !important; box-shadow: 0 0 20px rgba(255, 105, 180, 0.4), 0 0 40px rgba(255, 182, 193, 0.3) !important; animation: barbieFloat 3s ease-in-out infinite, barbieGlitter 2s linear infinite !important; }

/* Moonstone - silvery float */
.story-avatar-ring.border-moonstone { border: 4px solid #A0C4E8 !important; border-radius: 50% !important; box-shadow: 0 0 25px rgba(160, 196, 232, 0.4), 0 0 50px rgba(200, 220, 255, 0.3) !important; animation: moonstoneFloat 4s ease-in-out infinite !important; }

/* Aurora - teal float */
.story-avatar-ring.border-aurora { border: 4px solid #00CED1 !important; border-radius: 50% !important; box-shadow: 0 0 30px rgba(0, 206, 209, 0.4), 0 0 60px rgba(138, 43, 226, 0.25) !important; animation: auroraFloat 5s ease-in-out infinite !important; }

/* Opal - rainbow float */
.story-avatar-ring.border-opal { border: 4px solid #E6E6FA !important; border-radius: 50% !important; box-shadow: 0 0 25px rgba(255, 182, 193, 0.3), 0 0 50px rgba(173, 216, 230, 0.25), 0 0 75px rgba(221, 160, 221, 0.2) !important; animation: opalFloat 4.5s ease-in-out infinite !important; }

/* Nebula - purple-pink float */
.story-avatar-ring.border-nebula { border: 4px solid #9B59B6 !important; border-radius: 50% !important; box-shadow: 0 0 30px rgba(155, 89, 182, 0.5), 0 0 60px rgba(52, 73, 94, 0.3) !important; animation: nebulaFloat 5.5s ease-in-out infinite !important; }

/* Mermaid - ocean teal float */
.story-avatar-ring.border-mermaid { border: 4px solid #20B2AA !important; border-radius: 50% !important; box-shadow: 0 0 25px rgba(32, 178, 170, 0.45), 0 0 50px rgba(64, 224, 208, 0.3) !important; animation: mermaidFloat 4s ease-in-out infinite !important; }

/* Fire - fireplace glow */
.story-avatar-ring.border-fire { border: 4px solid transparent !important; border-radius: 50% !important; background: linear-gradient(var(--post-card-bg, rgba(30,30,30,0.7)), var(--post-card-bg, rgba(30,30,30,0.7))) padding-box, linear-gradient(180deg, #FF4500, #FF8C00, #FFD700, #FF6347) border-box !important; box-shadow: 0 0 20px rgba(255, 69, 0, 0.5), 0 0 40px rgba(255, 140, 0, 0.3) !important; animation: fireplaceGlow 2s ease-in-out infinite !important; }

/* Electric - lightning zap */
.story-avatar-ring.border-electric { border: 4px solid #00FFFF !important; border-radius: 50% !important; animation: electricZap 1.5s ease-in-out infinite !important; }

/* Rainbow - cycling hue */
.story-avatar-ring.border-rainbow { border: 4px solid transparent !important; border-radius: 50% !important; background: linear-gradient(var(--post-card-bg, rgba(30, 30, 30, 0.7)), var(--post-card-bg, rgba(30, 30, 30, 0.7))) padding-box, linear-gradient(90deg, #ff005a, #ffbe00, #00ff94, #00cfff, #a259ff, #ff005a) border-box !important; background-size: 100% 100%, 260% 260% !important; box-shadow: 0 0 16px 2px #ffbe00, 0 0 32px 4px rgba(162, 89, 255, 0.2) !important; animation: rainbowBorderFlow 4s linear infinite !important; }

/* Vibe - custom gradient ring */
.story-avatar-ring.border-vibe { border: 4px solid transparent !important; border-radius: 50% !important; background: linear-gradient(var(--post-card-bg, rgba(30, 30, 30, 0.7)), var(--post-card-bg, rgba(30, 30, 30, 0.7))) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--vibe-color-1, #ff4d6d) var(--post-border-opacity-pct, 100%), transparent), color-mix(in srgb, var(--vibe-color-2, #00d4ff) var(--post-border-opacity-pct, 100%), transparent), color-mix(in srgb, var(--vibe-color-3, var(--vibe-color-1, #ff4d6d)) var(--post-border-opacity-pct, 100%), transparent), color-mix(in srgb, var(--vibe-color-1, #ff4d6d) var(--post-border-opacity-pct, 100%), transparent)) border-box !important; background-size: 100% 100%, 260% 260% !important; box-shadow: 0 0 14px rgba(255, 100, 180, 0.4), 0 0 24px rgba(0, 212, 255, 0.28) !important; animation: vibeBorderFlow 4s linear infinite !important; }

/* Neon Green - green glow */
.story-avatar-ring.border-neon-green { border: 3px solid #39FF14 !important; border-radius: 50% !important; box-shadow: 0 0 16px #39FF14, 0 0 32px rgba(57, 255, 20, 0.53) !important; animation: neonGlowGreen 1.5s alternate infinite !important; }

/* Neon Pink - pink glow */
.story-avatar-ring.border-neon-pink { border: 3px solid #FF2A7F !important; border-radius: 50% !important; box-shadow: 0 0 16px #FF2A7F, 0 0 32px rgba(255, 42, 127, 0.53) !important; animation: neonGlowPink 1.5s alternate infinite !important; }

/* Neon Blue - cyan glow */
.story-avatar-ring.border-neon-blue { border: 3px solid #00FFFF !important; border-radius: 50% !important; box-shadow: 0 0 16px #00FFFF, 0 0 32px rgba(0, 255, 255, 0.53) !important; animation: neonGlowBlue 1.5s alternate infinite !important; }

/* Neon Orange - orange glow */
.story-avatar-ring.border-neon-orange { border: 3px solid #FF9900 !important; border-radius: 50% !important; box-shadow: 0 0 16px #FF9900, 0 0 32px rgba(255, 153, 0, 0.53) !important; animation: neonGlowOrange 1.5s alternate infinite !important; }

/* Neon Purple - purple glow */
.story-avatar-ring.border-neon-purple { border: 3px solid #B026FF !important; border-radius: 50% !important; box-shadow: 0 0 16px #B026FF, 0 0 32px rgba(176, 38, 255, 0.53) !important; animation: neonGlowPurple 1.5s alternate infinite !important; }

/* Pixel - retro double outline */
.story-avatar-ring.border-pixel { border: 4px solid #222 !important; border-radius: 50% !important; box-shadow: 0 0 0 3px #ff00cc, 0 0 0 6px #00eaff !important; }

/* Ensure avatar stays circular with all themes */
.story-avatar-ring[class*="border-"] { overflow: visible !important; }
.story-avatar-ring[class*="border-"] .profile-pic { border-radius: 50% !important; }

/* ========================================
   Transparency-aware Border Colors
   Theme borders fade with post transparency.
   ======================================== */

.post-card.border-mixtape,
.story-avatar-ring.border-mixtape { border-color: rgb(139 69 19 / var(--post-border-opacity, 1)) !important; }

.post-card.border-latenight,
.story-avatar-ring.border-latenight { border-color: rgb(42 26 74 / var(--post-border-opacity, 1)) !important; }

.post-card.border-emo,
.story-avatar-ring.border-emo { border-color: rgb(26 26 26 / var(--post-border-opacity, 1)) !important; }

.post-card.border-goodvibes,
.story-avatar-ring.border-goodvibes { border-color: rgb(255 182 193 / var(--post-border-opacity, 1)) !important; }

.post-card.border-rant,
.story-avatar-ring.border-rant { border-color: rgb(255 69 0 / var(--post-border-opacity, 1)) !important; }

.post-card.border-cloud,
.post-card.border-cloud::before,
.post-card.border-cloud::after,
.post-card.border-cloud .post-header::before,
.post-card.border-cloud .post-header::after,
.story-avatar-ring.border-cloud { border-color: rgb(255 255 255 / var(--post-border-opacity, 1)) !important; }

.post-card.border-chowder,
.story-avatar-ring.border-chowder { border-color: rgb(255 107 53 / var(--post-border-opacity, 1)) !important; }

.post-card.border-barbie,
.story-avatar-ring.border-barbie { border-color: rgb(255 105 180 / var(--post-border-opacity, 1)) !important; }

.post-card.border-moonstone,
.story-avatar-ring.border-moonstone { border-color: rgb(160 196 232 / var(--post-border-opacity, 1)) !important; }

.post-card.border-aurora,
.story-avatar-ring.border-aurora { border-color: rgb(0 206 209 / var(--post-border-opacity, 1)) !important; }

.post-card.border-opal,
.story-avatar-ring.border-opal { border-color: rgb(230 230 250 / var(--post-border-opacity, 1)) !important; }

.post-card.border-nebula,
.story-avatar-ring.border-nebula { border-color: rgb(155 89 182 / var(--post-border-opacity, 1)) !important; }

.post-card.border-mermaid,
.story-avatar-ring.border-mermaid { border-color: rgb(32 178 170 / var(--post-border-opacity, 1)) !important; }

.post-card.border-electric,
.story-avatar-ring.border-electric,
.post-card.border-neon-blue,
.story-avatar-ring.border-neon-blue { border-color: rgb(0 255 255 / var(--post-border-opacity, 1)) !important; }

.post-card.border-neon-green,
.story-avatar-ring.border-neon-green { border-color: rgb(57 255 20 / var(--post-border-opacity, 1)) !important; }

.post-card.border-neon-pink,
.story-avatar-ring.border-neon-pink { border-color: rgb(255 42 127 / var(--post-border-opacity, 1)) !important; }

.post-card.border-neon-orange,
.story-avatar-ring.border-neon-orange { border-color: rgb(255 153 0 / var(--post-border-opacity, 1)) !important; }

.post-card.border-neon-purple,
.story-avatar-ring.border-neon-purple { border-color: rgb(176 38 255 / var(--post-border-opacity, 1)) !important; }

.post-card.border-pixel,
.story-avatar-ring.border-pixel { border-color: rgb(34 34 34 / var(--post-border-opacity, 1)) !important; }

/* ========================================
   Border Theme Overhaul Baseline
   Low-motion defaults + mobile simplification.
   ======================================== */

/* Keep expressive style, but calm down motion globally. */
.post-card[class*="border-"]:not(.border-rainbow):not(.border-vibe) {
   animation-duration: 10s !important;
   animation-timing-function: ease-in-out !important;
}

.post-card[class*="border-"]:not(.border-rainbow):not(.border-vibe)::before,
.post-card[class*="border-"]:not(.border-rainbow):not(.border-vibe)::after,
.post-card[class*="border-"]:not(.border-rainbow):not(.border-vibe) *::before,
.post-card[class*="border-"]:not(.border-rainbow):not(.border-vibe) *::after,
.story-avatar-ring[class*="border-"]:not(.border-rainbow):not(.border-vibe) {
   animation-duration: 12s !important;
   animation-timing-function: ease-in-out !important;
}

/* Respect reduced-motion users by disabling decorative movement. */
@media (prefers-reduced-motion: reduce) {
   .post-card[class*="border-"],
   .post-card[class*="border-"]::before,
   .post-card[class*="border-"]::after,
   .post-card[class*="border-"] *::before,
   .post-card[class*="border-"] *::after,
   .story-avatar-ring[class*="border-"] {
      animation: none !important;
      transition: none !important;
      transform: none !important;
   }
}

/* Mobile/tablet: keep theme identity but simplify heavy edges/effects. */
@media (max-width: 768px) {
   .post-card[class*="border-"] {
      transform: none !important;
      padding: 1rem !important;
      border-radius: 12px !important;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26) !important;
   }

   .post-card.border-cloud {
      margin-top: 0 !important;
      overflow: hidden !important;
   }

   .post-card.border-cloud::before,
   .post-card.border-cloud::after,
   .post-card.border-cloud .post-header::before,
   .post-card.border-cloud .post-header::after {
      display: none !important;
   }

   .post-card.border-fire::before,
   .post-card.border-fire::after {
      opacity: 0.55 !important;
      filter: blur(2px) !important;
   }
}

@media (max-width: 480px) {
   .post-card[class*="border-"] {
      padding: 0.8rem !important;
      border-radius: 10px !important;
   }
}

/* ========================================
   Performance Pass — reduce repaint frequency
   of box-shadow-driven glow/pulse animations.
   box-shadow is not GPU-compositable, so every
   keyframe tick forces a main-thread repaint.
   Stepped timing cuts repaint calls by ~90%+
   while keeping the glow/pulse readable.
   Placed last in the file so it wins the cascade
   tie against the baseline/polish blocks above
   (equal specificity, source order decides).
   Transform-only float themes (moonstone, aurora,
   opal, mermaid) are intentionally left alone —
   transform is already compositor-cheap.
   ======================================== */
.post-card.border-chowder,
.post-card.border-fire,
.post-card.border-electric,
.post-card.border-nebula,
.post-card.border-neon-green,
.post-card.border-neon-pink,
.post-card.border-neon-blue,
.post-card.border-neon-orange,
.post-card.border-neon-purple,
.story-avatar-ring.border-chowder,
.story-avatar-ring.border-fire,
.story-avatar-ring.border-electric,
.story-avatar-ring.border-nebula,
.story-avatar-ring.border-neon-green,
.story-avatar-ring.border-neon-pink,
.story-avatar-ring.border-neon-blue,
.story-avatar-ring.border-neon-orange,
.story-avatar-ring.border-neon-purple {
   animation-timing-function: steps(12, jump-end) !important;
}

/* Barbie runs two animations (float = transform, glitter = box-shadow).
   Keep the float smooth; step only the glitter glow (2nd position). */
.post-card.border-barbie,
.story-avatar-ring.border-barbie {
   animation-timing-function: ease-in-out, steps(12, jump-end) !important;
}

/* ========================================
   Phase 3 Polish Layer
   Cohesive family tuning while keeping theme identity.
   ======================================== */

/* Consistent interaction baseline for all themed post cards. */
.post-card[class*="border-"] {
   transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.post-card[class*="border-"]:hover {
   transform: translateY(-1px);
}

/* Foundational rhythm for legacy/classic themes. */
.post-card.border-mixtape,
.post-card.border-latenight,
.post-card.border-emo,
.post-card.border-goodvibes,
.post-card.border-rant {
   border-radius: 12px !important;
   padding: 1.25rem 1.4rem !important;
}

.post-card.border-mixtape,
.post-card.border-latenight,
.post-card.border-goodvibes {
   border-width: 3px !important;
}

.post-card.border-emo,
.post-card.border-rant {
   border-width: 4px !important;
}

/* Nature/elemental themes keep personality with controlled glow ranges. */
.post-card.border-cloud,
.post-card.border-fire,
.post-card.border-electric,
.post-card.border-rainbow,
.post-card.border-chowder {
   border-radius: 14px !important;
}

.post-card.border-fire,
.post-card.border-electric {
   box-shadow: 0 0 14px rgba(0, 0, 0, 0.32), 0 0 30px rgba(255, 255, 255, 0.08) !important;
}

/* Heavy FX themes: keep identity, reduce visual competition in dense feeds. */
.post-card.border-fire {
   border-width: 3px !important;
   border-radius: 13px !important;
   box-shadow: 0 0 14px rgba(255, 92, 0, 0.48), 0 0 28px rgba(255, 166, 0, 0.22), inset 0 0 16px rgba(255, 92, 0, 0.12) !important;
   animation-duration: 9s !important;
}

.post-card.border-fire::before,
.post-card.border-fire::after {
   opacity: 0.48 !important;
   filter: blur(3px) !important;
}

.post-card.border-electric {
   border-width: 3px !important;
   border-radius: 13px !important;
   box-shadow: 0 0 12px rgba(0, 255, 255, 0.5), 0 0 26px rgba(0, 191, 255, 0.24), inset 0 0 16px rgba(138, 43, 226, 0.12) !important;
   animation-duration: 8s !important;
}

/* Iridescent family: keep bold look but normalize spacing/angles for readability. */
.post-card.border-barbie,
.post-card.border-moonstone,
.post-card.border-aurora,
.post-card.border-opal,
.post-card.border-nebula,
.post-card.border-mermaid {
   border-radius: 14px !important;
   padding: 1.7rem 1.9rem !important;
   transform: none !important;
   box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), inset 0 0 26px rgba(255, 255, 255, 0.08) !important;
}

.post-card.border-barbie .post-avatar,
.post-card.border-moonstone .post-avatar,
.post-card.border-aurora .post-avatar,
.post-card.border-opal .post-avatar,
.post-card.border-nebula .post-avatar,
.post-card.border-mermaid .post-avatar {
   width: 42px !important;
   height: 42px !important;
}

.post-card.border-barbie .post-content,
.post-card.border-moonstone .post-content,
.post-card.border-aurora .post-content,
.post-card.border-opal .post-content,
.post-card.border-nebula .post-content,
.post-card.border-mermaid .post-content {
   font-size: 0.95rem !important;
   line-height: 1.55 !important;
}

/* Neon family: reduce glow noise while keeping high-contrast neon identity. */
.post-card.border-neon-green,
.post-card.border-neon-pink,
.post-card.border-neon-blue,
.post-card.border-neon-orange,
.post-card.border-neon-purple {
   border-width: 2px !important;
   border-radius: 14px !important;
   animation-duration: 8s !important;
}

.post-card.border-neon-green {
   box-shadow: 0 0 10px rgba(57, 255, 20, 0.85), 0 0 24px rgba(57, 255, 20, 0.35) !important;
}

.post-card.border-neon-pink {
   box-shadow: 0 0 10px rgba(255, 42, 127, 0.85), 0 0 24px rgba(255, 42, 127, 0.35) !important;
}

.post-card.border-neon-blue {
   box-shadow: 0 0 10px rgba(0, 255, 255, 0.82), 0 0 24px rgba(0, 255, 255, 0.34) !important;
}

.post-card.border-neon-orange {
   box-shadow: 0 0 10px rgba(255, 153, 0, 0.84), 0 0 24px rgba(255, 153, 0, 0.35) !important;
}

.post-card.border-neon-purple {
   box-shadow: 0 0 10px rgba(176, 38, 255, 0.84), 0 0 24px rgba(176, 38, 255, 0.35) !important;
}

/* Retro family cleanup for less visual clutter. */
.post-card.border-pixel {
   border-width: 4px !important;
}

.post-card.border-rainbow {
   box-shadow: 0 0 10px rgba(255, 190, 0, 0.6), 0 0 22px rgba(162, 89, 255, 0.16) !important;
}

/* Keep avatar rings in sync with calmer glow hierarchy. */
.story-avatar-ring.border-neon-green,
.story-avatar-ring.border-neon-pink,
.story-avatar-ring.border-neon-blue,
.story-avatar-ring.border-neon-orange,
.story-avatar-ring.border-neon-purple {
   animation-duration: 8s !important;
}

.story-avatar-ring.border-fire,
.story-avatar-ring.border-electric,
.story-avatar-ring.border-rainbow {
   animation-duration: 9s !important;
}

@media (max-width: 768px) {
   .post-card.border-mixtape,
   .post-card.border-latenight,
   .post-card.border-emo,
   .post-card.border-goodvibes,
   .post-card.border-rant,
   .post-card.border-fire,
   .post-card.border-electric,
   .post-card.border-rainbow,
   .post-card.border-chowder,
   .post-card.border-neon-green,
   .post-card.border-neon-pink,
   .post-card.border-neon-blue,
   .post-card.border-neon-orange,
   .post-card.border-neon-purple {
      border-width: 2px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24) !important;
   }
}