.card-list[data-tab-panel=received],.card-list[data-tab-panel=sent],.card-list[data-tab-panel=timeline]{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;padding:1rem;width:100%;max-width:1400px;margin:0 auto;justify-content:center;box-sizing:border-box;overflow-x:hidden}.praise-card{position:relative;aspect-ratio:4 / 3.7;background-color:#fff;border:1px solid #ddd;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 10px #00000014;padding:1rem 1.2rem}.praise-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026;cursor:pointer}.praise-card .card-body p{margin:0;padding:0}.praise-card-header{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;gap:.5rem;flex-wrap:nowrap}.praise-card-sender{flex-shrink:0;color:#333}.label-group{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.label-group .label{display:inline-flex;align-items:center;padding:.2em .6em;border-radius:6px;font-size:12px}.praise-card-date{font-size:12px;color:#666;white-space:nowrap}.praise-card .card-body{flex:1;font-size:15px;overflow:hidden;display:block;text-align:left;white-space:normal}.praise-card .card-body img[alt=手書きメッセージ]{max-width:100%;max-height:100%;height:auto;width:auto;object-fit:contain;display:block}@media(min-width:1200px){.card-list[data-tab-panel=received],.card-list[data-tab-panel=sent],.card-list[data-tab-panel=timeline]{grid-template-columns:repeat(4,1fr)}}@media(max-width:1199px)and (min-width:900px){.card-list[data-tab-panel=received],.card-list[data-tab-panel=sent],.card-list[data-tab-panel=timeline]{grid-template-columns:repeat(3,1fr)}}@media(max-width:899px)and (min-width:600px){.card-list[data-tab-panel=received],.card-list[data-tab-panel=sent],.card-list[data-tab-panel=timeline]{grid-template-columns:repeat(2,1fr)}}@media(max-width:599px){.card-list[data-tab-panel=received],.card-list[data-tab-panel=sent],.card-list[data-tab-panel=timeline]{grid-template-columns:1fr}}.card-list[data-tab-panel=received],.card-list[data-tab-panel=sent],.card-list[data-tab-panel=timeline]{background:radial-gradient(#d6a982 2px,transparent 3px),radial-gradient(#d6a982 2px,transparent 3px),#c69c6d;background-position:0 0,25px 25px;background-size:50px 50px;border-radius:8px;padding:2rem;position:relative;box-shadow:inset 0 0 30px #0000001a}.praise-card{background-color:#fffdf8;border:1px solid #d2b48c;border-radius:8px;box-shadow:0 4px 8px #613f0033;position:relative;padding-top:1.5rem}.praise-card:before{content:"";position:absolute;top:.5rem;left:50%;transform:translate(-50%) rotate(-15deg);width:20px;height:20px;border-radius:50%;z-index:3;background:radial-gradient(circle at 30% 35%,#ff7070,#a80000 80%);box-shadow:-1px 2px 3px #0006,inset -2px 2px 3px #fff9,inset 2px -1px 2px #0003}.praise-card:nth-child(5n+1):before{background:radial-gradient(circle at 30% 35%,#ff7070,#a80000 80%)}.praise-card:nth-child(5n+2):before{background:radial-gradient(circle at 30% 35%,#6ba9ff,#003eaa 80%)}.praise-card:nth-child(5n+3):before{background:radial-gradient(circle at 30% 35%,#72e37f,#1d6b2d 80%)}.praise-card:nth-child(5n+4):before{background:radial-gradient(circle at 30% 35%,#ffe066,#c49d00 80%)}.praise-card:nth-child(5n):before{background:radial-gradient(circle at 30% 35%,#ff8bd1,#a0006a 80%)}.praise-card:after{content:"";position:absolute;top:1.6rem;left:50%;transform:translate(-50%) rotate(-15deg) skew(-10deg);width:14px;height:5px;background:radial-gradient(ellipse at center,rgba(0,0,0,.25) 0%,transparent 70%);border-radius:50%;z-index:1;filter:blur(.5px)}.praise-card:before:after{content:"";position:absolute;top:18px;left:9px;width:2px;height:10px;background:linear-gradient(to bottom,#aaa,#555);transform:rotate(10deg)}.praise-card:nth-child(odd){transform:rotate(-2deg)}.praise-card:nth-child(2n){transform:rotate(2deg)}.praise-card:hover{transform:translateY(-5px) scale(1.02) rotate(0);z-index:4}.timeline-filter-area .filter-row{display:flex;flex-wrap:wrap;gap:1rem}.timeline-filter-area .filter-group.min{min-width:200px;flex:0 0 auto}@media(max-width:599px){.timeline-filter-area .filter-row{flex-direction:column}.timeline-filter-area .filter-group.min{width:100%}}.howto-btn{padding:6px 10px;font-size:14px;background-color:#41a5de;color:#fff;border:none;border-radius:6px;cursor:pointer;white-space:nowrap}.howto-btn:hover{background-color:#2f7ead}