/* Gemeinsame Ergänzungen für Fotos, Musik, Memes und Videos. */
.navigation-stack{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.page-nav{display:flex;gap:8px;flex-wrap:wrap}
.page-nav a{padding:8px 12px;text-decoration:none;border-radius:8px;font-size:13px;color:#cab9cc;min-height:36px;display:flex;align-items:center}
.page-nav a[aria-current=page]{background:#382034;color:#ffcae2;border:1px solid #804262}
.page-nav a:hover{color:#ffe7f2;background:#301a2c}
.sidebar{min-height:108px}
.profile-form{flex:1;min-width:0}
.profile-form label{font-weight:650;display:block;margin-bottom:9px}
.profile-fields{display:flex;align-items:center;gap:10px}
.profile-fields input{min-width:0;flex:1}
.profile-fields .secondary-button{white-space:nowrap;min-height:44px;flex-shrink:0}
.profile-form .profile-status{font-size:12px;line-height:1.65;margin:9px 0 0;max-width:none;color:#d6b3cd}
.publishing-info{align-items:center}
.publishing-info>p{max-width:360px;margin:0;font-size:13px}
.comment-preview{background:#160f1b;border-left:3px solid #95416e;padding:12px 14px;border-radius:0 8px 8px 0;margin:16px 0}
.preview-author{font-size:12px;color:#f2bfda;display:block;margin-bottom:5px;overflow-wrap:anywhere}
.photo-caption .preview-body,.track-info .preview-body{font-size:14px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap;margin:0;color:#eadce9}
.photo-caption .comment-placeholder,.track-info .comment-placeholder,.comment-placeholder{font-size:13px;line-height:1.65;color:#bca8c0;margin:0}
.post-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.comments-button{background:#2d1a2b;border:1px solid #784366;border-radius:999px;padding:9px 16px;min-height:44px;color:#f3c9e0;font-size:13px;font-weight:600}
.comments-button:hover{background:#46233b;border-color:#d16b9c}
.post-actions .heart-button{margin:0;min-height:44px}
.music-card{align-items:start}
.track-info{min-width:0;width:100%}
.track-info h3{overflow-wrap:anywhere;line-height:1.5}
.track-info audio{width:100%;margin:12px 0 0}
.community-video{display:block;width:100%;height:auto;aspect-ratio:16/10;background:#08070b;object-fit:contain;max-height:580px}
.comments-modal{padding:0;width:min(680px,calc(100vw - 28px));max-width:680px;max-height:calc(100dvh - 36px);border:1px solid #98577d;border-radius:17px;background:#1b1220;color:#f4e7f1;box-shadow:0 30px 90px #0008}
.comments-modal::backdrop{background:#09050bdb;backdrop-filter:blur(4px)}
.comments-shell{display:flex;flex-direction:column;max-height:calc(100dvh - 38px)}
.comments-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 24px;border-bottom:1px solid #4c2b43;flex-shrink:0}
.comments-header h2{font-size:22px;margin:0;color:#ffe0f1}
.comments-header p{font-size:13px;color:#cbb3ca;margin:7px 0 0;overflow-wrap:anywhere}
.comments-header .close-photo{flex-shrink:0}
.comments-scroll{padding:18px 24px;overflow-y:auto;overscroll-behavior:contain;min-height:90px;flex:1}
.comments-total{font-size:12px;color:#bba3bd;margin:0 0 18px}
.comment-row{padding:16px 0;border-bottom:1px solid #43233b}
.comment-row:last-child{border-bottom:0}
.comment-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px}
.comment-head strong{color:#ffb9dd;overflow-wrap:anywhere;max-width:100%;font-size:13px}
.comment-head time{color:#b399b7}
.comment-remove{margin-left:auto;min-height:36px;background:transparent;color:#d3b4c9;border:0;text-decoration:underline;text-underline-offset:3px;font-size:12px}
.comment-row .comment-body{font-size:14px;line-height:1.7;color:#f0e2ee;white-space:pre-wrap;overflow-wrap:anywhere;display:block;margin:8px 0 0}
.comments-scroll>.secondary-button{margin-top:16px;width:100%}
.comment-composer{padding:18px 24px 22px;border-top:1px solid #4c2b43;background:#231629;flex-shrink:0}
.comment-composer label{font-size:13px;font-weight:650;display:block;margin-bottom:8px}
.comment-composer textarea{font:inherit;width:100%;resize:vertical;max-height:160px;min-height:78px;background:#140e19;color:#f7e9f4;border:1px solid #7f476c;border-radius:9px;padding:11px;font-size:14px;line-height:1.5}
.comment-composer textarea:focus{outline:2px solid #ff85bd;outline-offset:2px}
.comment-composer #comment-as{margin:8px 0 12px;font-size:11px;color:#d4afca;line-height:1.5;overflow-wrap:anywhere}
.comment-form-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.comment-form-bottom span{color:#c6a6bf;font-size:12px}
.comment-composer .primary-button{min-height:44px;padding:11px 18px;font-size:13px}
#comment-login p{font-size:13px;line-height:1.6;margin:0 0 13px;color:#dcc1d6}
.member-badge{max-width:150px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}
@media(max-width:700px){.navigation-stack{width:100%;align-items:stretch}.page-nav{justify-content:center}.page-nav a{flex:1;justify-content:center}.profile-fields{flex-wrap:wrap}.profile-fields input{width:100%;flex-basis:100%}.profile-fields .secondary-button{width:100%}.publishing-info>p{max-width:none}.member-badge{display:none}.track-art{width:42px;height:42px}.music-card{gap:12px}.comments-header{padding:17px}.comments-scroll{padding:14px 17px}.comment-composer{padding:16px 17px 18px}.comments-modal{border-radius:13px}.comments-header h2{font-size:20px}}
@media(max-width:420px){.track-number{display:none}.music-card{grid-template-columns:38px minmax(0,1fr);padding:16px}.track-art{width:36px;height:36px}.post-actions{gap:9px}.comments-button{padding:8px 12px;font-size:12px}.comments-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.comments-shell{max-height:calc(100dvh - 18px)}.comment-head{gap:7px}.comment-composer .primary-button{font-size:12px;padding:10px 13px}}
[hidden]{display:none!important}

/* Profil nur auf Wunsch öffnen. */
.publishing-info{position:relative;padding-right:58px}
.profile-close{position:absolute;right:12px;top:12px}
@media(max-width:700px){.account-actions{gap:12px}.publishing-info{padding-right:21px;padding-top:54px}}
@media(max-width:380px){.topbar{flex-wrap:wrap;height:auto;min-height:70px;gap:4px;padding-top:8px;padding-bottom:8px}.account-actions{margin-left:auto}}

/* Teilen und kurze Animationen ohne automatische Wiedergabe. */
.share-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 15px;border:1px solid #86506f;border-radius:999px;background:#261724;color:#f7c6e0;font-size:13px;font-weight:600;cursor:pointer;transition:background .18s,transform .18s,border-color .18s}
.share-button:hover{background:#452239;border-color:#ed8cbb;transform:translateY(-2px)}
.share-button:active{transform:scale(.96)}
.share-button:disabled{opacity:.65;cursor:wait}
.share-button:focus-visible{outline:2px solid #ff9acb;outline-offset:3px}
.post-actions button{transition:transform .18s,background .18s,border-color .18s}
.post-actions button:active{transform:scale(.94)}
.photo-card,.music-card{animation:post-reveal .38s ease-out both}
.photo-open img{transition:transform .45s ease,filter .45s ease}
@media(hover:hover){.photo-open:hover img{transform:scale(1.035);filter:brightness(1.06)}}
.lightbox[open],.comments-modal[open]{animation:modal-reveal .24s ease-out both}
.publishing-info:not([hidden]){animation:post-reveal .25s ease-out both}
.heart-celebrate .heart-icon{animation:heart-pop .52s ease-out}
.shared-post{outline:2px solid #ff8dbe;outline-offset:5px;box-shadow:0 0 32px #f4499633}
@keyframes post-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes modal-reveal{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heart-pop{0%{transform:scale(1)}30%{transform:scale(1.5) rotate(-12deg);filter:drop-shadow(0 0 8px #ff6bb5)}60%{transform:scale(.9) rotate(6deg)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Sunset-Licht und einmalige Effekte bei Aktionen. */
.sunset-hero::before{content:'';position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 78% 42%,#ff4c9138,transparent 62%);animation:sunset-breathe 10s ease-in-out infinite;will-change:opacity}
.hero-crown{animation:crown-glow 6s ease-in-out infinite}
@keyframes sunset-breathe{0%,100%{opacity:.3}50%{opacity:.85}}
@keyframes crown-glow{0%,100%{filter:drop-shadow(0 0 5px #ff388377)}50%{filter:drop-shadow(0 0 13px #ff65b4aa)}}
.photo-card.scroll-pending,.music-card.scroll-pending{opacity:0;transform:translateY(16px);animation:none}
.photo-card.scroll-revealed,.music-card.scroll-revealed{animation:scroll-reveal .55s cubic-bezier(.2,.7,.25,1) both}
@keyframes scroll-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.heart-button{position:relative;overflow:visible}
.heart-sparks,.upload-sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:2}
.spark-ray{position:absolute;inset:0;width:0;height:0}
.spark-ray:nth-child(1){transform:rotate(0deg)}.spark-ray:nth-child(2){transform:rotate(45deg)}.spark-ray:nth-child(3){transform:rotate(90deg)}.spark-ray:nth-child(4){transform:rotate(135deg)}.spark-ray:nth-child(5){transform:rotate(180deg)}.spark-ray:nth-child(6){transform:rotate(225deg)}.spark-ray:nth-child(7){transform:rotate(270deg)}.spark-ray:nth-child(8){transform:rotate(315deg)}
.spark-ray::after{content:'✦';position:absolute;left:-5px;top:-5px;font-size:15px;line-height:1;color:#ffa4d1;text-shadow:0 0 7px #ff69ae;animation:spark-flight .8s ease-out both}
.spark-ray:nth-child(even)::after{color:#fff0c8;font-size:10px;animation-duration:.7s}
@keyframes spark-flight{0%{opacity:0;transform:translateY(-10px) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translateY(-55px) scale(.6)}}
.upload-celebration{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:1000;pointer-events:none;display:grid;justify-items:center;gap:9px;animation:upload-success .95s ease-out both}
.upload-success-mark{display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:linear-gradient(140deg,#ed4296,#a81767);border:1px solid #ffb5d9;color:white;font-size:40px;box-shadow:0 0 35px #ff569c55}
.upload-success-label{background:#291126ec;border:1px solid #a8467a;border-radius:999px;padding:7px 17px;color:#ffe3f2;font-weight:700;font-size:15px}
.upload-sparks{top:36%}.upload-sparks .spark-ray::after{font-size:22px}
@keyframes upload-success{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-55%) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.photo-card.scroll-pending,.music-card.scroll-pending{opacity:1;transform:none}.heart-sparks,.upload-sparks,.upload-celebration{display:none}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Sammlung sortieren und Effekte selbst steuern. */
.collection-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.sort-label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#cbb0c4;font-weight:600}
.sort-label select{color:#ffe0ef;background:#241526;border:1px solid #744562;border-radius:8px;padding:9px 30px 9px 11px;min-height:42px;font:inherit;font-size:13px;max-width:100%;color-scheme:dark;cursor:pointer}
.effects-toggle,.emoji-toggle,.track-play-button{border:1px solid #86456b;border-radius:9px;background:#3b1d33;color:#ffd3e9;padding:10px 14px;font-size:13px;min-height:44px;font-weight:650;cursor:pointer}
.effects-toggle:hover,.emoji-toggle:hover,.track-play-button:hover{background:#552543;border-color:#ef8bbb}
.effects-toggle[aria-pressed=false]{background:#251d29;color:#c7b7c9;border-color:#615365}
.sort-label select:focus-visible,.effects-toggle:focus-visible,.emoji-toggle:focus-visible,.track-play-button:focus-visible,.emoji-choice:focus-visible{outline:2px solid #ff9acb;outline-offset:3px}
body.effects-off *,body.effects-off *::before,body.effects-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.effects-off .scroll-pending{opacity:1!important;transform:none!important}
body.effects-off .heart-sparks,body.effects-off .upload-sparks,body.effects-off .upload-celebration{display:none!important}
.track-play-button{margin:12px 0 0;min-width:132px;border-radius:999px}
.track-play-button.is-playing{background:#712349;border-color:#ff9aca;color:#ffe2f1}
/* Musik bleibt beim Scrollen und Wechsel der Sammlung verfügbar. */
.music-dock{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(660px,calc(100vw - 24px));z-index:40;background:#231329f5;border:1px solid #a35984;border-radius:16px;box-shadow:0 10px 60px #0009;padding:14px 17px calc(12px + env(safe-area-inset-bottom));backdrop-filter:blur(14px);color:#ffe0f0}
.dock-heading{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.dock-symbol{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(145deg,#a93074,#45203b);color:#ffb9dd;font-size:24px;flex-shrink:0}
.dock-track{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dock-track strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-track span{font-size:11px;color:#d3acca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-heading .icon-button{flex-shrink:0}
.dock-controls{display:flex;align-items:center;gap:9px}
.dock-controls audio{width:100%;min-width:0;height:42px;color-scheme:dark}
.dock-controls .icon-button{font-size:18px;flex-shrink:0;color:#ffc7e5;min-width:40px;min-height:40px}
.dock-status{font-size:12px;margin:7px 0 0;color:#ffbaca;line-height:1.5}
.dock-status:empty{display:none}
body.player-open .workspace{padding-bottom:calc(190px + env(safe-area-inset-bottom))}
/* Emojis ergänzen den normalen Kommentartext. */
.emoji-tools{margin:0 0 9px}
.emoji-toggle{font-size:12px;min-height:36px;padding:7px 12px}
.emoji-picker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-top:9px;padding:8px;border-radius:10px;border:1px solid #714266;background:#1b0f20}
.emoji-choice{border:0;background:transparent;border-radius:7px;min-height:38px;min-width:0;padding:5px;font-size:22px;cursor:pointer}
.emoji-choice:hover{background:#57213f}.emoji-choice:disabled{opacity:.45;cursor:wait}
/* Einzelne Upload-Ergebnisse bleiben nach dem Upload sichtbar. */
.upload-results{margin:18px 20px 0;padding:18px;border:1px solid #714366;border-radius:12px;background:#201326}
.upload-results-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.upload-results-heading h3{font-size:16px;margin:0;color:#ffe1f2}
#upload-summary{font-size:12px;color:#d4b2ca;line-height:1.6;margin:5px 0 12px}
#upload-result-list{padding:0;margin:0;list-style:none;max-height:340px;overflow:auto}
.upload-result{padding:12px;border-radius:9px;background:#291b2e;border:1px solid #51394f;margin:8px 0 0}
.upload-result-name{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.upload-result-name strong{font-size:13px;overflow-wrap:anywhere;min-width:0;line-height:1.5;color:#eddbea}
.upload-result-badge{font-size:11px;font-weight:700;white-space:nowrap;color:#ceb6cb;padding:4px 8px;border-radius:999px;background:#ffffff09}
.upload-result-detail{font-size:12px;line-height:1.6;margin:6px 0 0;color:#cbb1c6;overflow-wrap:anywhere}.upload-result-detail:empty{display:none}
.upload-result.success{border-color:#3a8062;background:#142b25}.upload-result.success .upload-result-badge{background:#224e3d;color:#b1f1cb}
.upload-result.failed{border-color:#b5566d;background:#351c28}.upload-result.failed .upload-result-badge{background:#6e2b3f;color:#ffd0db}
.upload-result.uncertain,.upload-result.skipped{border-color:#9a7743;background:#30251e}.upload-result.uncertain .upload-result-badge,.upload-result.skipped .upload-result-badge{background:#614728;color:#ffe3a5}
.upload-result.sending{border-color:#d06b9d}.upload-result.sending .upload-result-badge{color:#ffbce0;background:#56223e}
@media(max-width:700px){.panel-heading{align-items:flex-start;gap:14px;flex-wrap:wrap}.collection-tools{justify-content:flex-start}.music-dock{padding:12px 13px calc(10px + env(safe-area-inset-bottom));bottom:8px}.dock-track strong{font-size:13px}.dock-controls{gap:5px}.dock-controls .icon-button{min-width:36px;width:36px}.upload-results{margin:14px 14px 0;padding:13px}.upload-result-name{flex-wrap:wrap;gap:6px}.upload-result-name strong{width:100%}}
@media(max-width:420px){.collection-tools{width:100%;justify-content:space-between;gap:8px}.sort-label{flex:1;min-width:0}.sort-label select{width:100%;font-size:12px}.effects-toggle{font-size:12px;padding:8px 10px;align-self:flex-end}.emoji-picker{grid-template-columns:repeat(6,minmax(0,1fr))}.comments-shell{max-height:calc(100dvh - 18px)}.comment-composer{padding-top:12px}.dock-symbol{width:32px;height:32px}.dock-controls audio{height:40px}}
.comment-composer{max-height:58dvh;overflow-y:auto;overscroll-behavior:contain}
.comments-scroll{min-height:40px}

/* Upload-Texte in allen Sammlungen ausblenden; Größenlimit kompakt behalten. */
.upload-strip{justify-content:flex-end;padding:12px 18px}
.upload-strip .size-limit{margin-left:auto}