/* Pairing Master Styles */
.pm-tag-suggestions { margin-top: 5px; display: none; flex-wrap: wrap; gap: 5px; }
.pm-tag-suggest-btn { border: none; border-radius: 12px; padding: 4px 10px; font-size: 12px; cursor: pointer; background: #e0e0e0; color: #333; }
.pm-tag-suggest-btn:hover { opacity: 0.85; }
.pm-menu { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.pm-btn { padding: 10px 20px; background: #f0f0f0; border: none; border-radius: 5px; text-decoration: none; color: #333; cursor: pointer; display: inline-block; }
.pm-btn-primary { background:rgb(204, 206, 208); color: white; }
.pm-btn:hover { opacity: 0.8; }
.pm-category { margin-bottom: 30px; }
.pm-category h2 { font-size: 24px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.pm-icon { font-size: 24px; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.pm-card { background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.2s; }
.pm-card:hover { transform: translateY(-5px); }
.pm-card-header { padding: 15px; }
.pm-avatars { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pm-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.pm-connector { width: 60px; height: 2px; border-top: 3px solid; display: flex; align-items: center; justify-content: center; position: relative; }
.pm-connector .pm-icon { position: absolute; background: white; padding: 0 5px; font-size: 20px; }
.pm-connector .pm-icon i, .pm-connector .pm-icon span { color: inherit; }
.pm-card-body { padding: 15px; }
.pm-card-body h3 { margin: 0 0 10px; font-size: 18px; }
.pm-card-body h3 a { color: #333; text-decoration: none; }
.pm-card-body h3 a:hover { color: #007bff; }
.pm-quote { margin: 10px 0; padding: 10px; background: #f8f9fa; border-left: 3px solid #007bff; font-style: italic; color: #555; font-size: 14px; }
.pm-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.pm-tag { padding: 3px 8px; border-radius: 3px; font-size: 12px; color: white; }
.pm-card-date { margin-top: 10px; padding: 8px; background: #f0f0f0; border-radius: 5px; font-size: 13px; color: #666; text-align: center; }
.pm-card-actions { padding: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; }
.pm-card-actions a { color:rgb(125, 127, 129); text-decoration: none; font-size: 14px; }
.pm-card-actions a:hover { text-decoration: underline; }
.pm-form { max-width: 95%; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.pm-form-group { margin-bottom: 20px; }
.pm-form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; }
.pm-form-group input, .pm-form-group select, .pm-form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; box-sizing: border-box; }
.pm-form-group textarea { min-height: 100px; resize: vertical; }
.pm-form-group input:focus, .pm-form-group select:focus, .pm-form-group textarea:focus { outline: none; border-color: #007bff; }
.pm-form-actions { display: flex; gap: 10px; margin-top: 30px; }
.pm-empty { text-align: center; padding: 40px; color: #999; background: white; border-radius: 10px; }
.pm-error { background: #f8d7da; color: #721c24; padding: 15px; border-radius: 5px; margin-bottom: 20px; border: 1px solid #f5c6cb; }
.pm-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; }
.pm-stat-box { background: white; border-radius: 10px; padding: 25px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.pm-stat-icon { font-size: 48px; margin-bottom: 10px; }
.pm-stat-value { font-size: 32px; font-weight: bold; color: #007bff; margin-bottom: 5px; }
.pm-stat-label { font-size: 14px; color: #666; }
.pm-stats-section { background: white; border-radius: 10px; padding: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 30px; }
.pm-stats-section h2 { margin-top: 0; margin-bottom: 25px; font-size: 24px; color: #333; }
.pm-category-stats { display: flex; flex-direction: column; gap: 20px; }
.pm-category-stat-item { display: flex; flex-direction: column; gap: 8px; }
.pm-category-stat-header { display: flex; justify-content: space-between; align-items: center; }
.pm-category-stat-name { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.pm-category-stat-count { font-size: 14px; color: #666; }
.pm-category-stat-bar { width: 100%; height: 30px; background: #e0e0e0; border-radius: 15px; overflow: hidden; position: relative; }
.pm-category-stat-fill { position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 16px; box-sizing: border-box; color: white; font-weight: bold; font-size: 14px; background: transparent; }
.pm-category-stat-fill-bg { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background-color: var(--pm-fill-color, #ff6b6b); transform-origin: left center; transform: scaleX(calc(var(--pm-percent, 100) / 100)); animation: bar-fill 1.2s ease-out forwards; }
.pm-category-stat-label { position: relative; z-index: 1; }

/* Zwei-Spalten-Layout für Top User / Top Tags */
.pm-stats-two-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: flex-start; }

/* Top User Cards */
.pm-top-users { display: flex; flex-direction: column; gap: 12px; }
.pm-top-user-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #f8f9ff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transform: translateY(0); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pm-top-user-item:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.pm-top-user-medal { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; color: #fff; background: #54a0ff; animation: pm-medal-pop 0.6s ease-out; flex-shrink: 0; }
.pm-top-user-info { display: flex; flex-direction: column; gap: 2px; }
.pm-top-user-name a { color: #333; text-decoration: none; font-weight: 500; }
.pm-top-user-name a:hover { color: #007bff; }
.pm-top-user-meta { color: #666; font-size: 13px; }
.pm-top-users .pm-top-user-item:nth-child(1) .pm-top-user-medal { background: #feca57; }
.pm-top-users .pm-top-user-item:nth-child(2) .pm-top-user-medal { background: #c8d6e5; }
.pm-top-users .pm-top-user-item:nth-child(3) .pm-top-user-medal { background: #ff9f43; }

/* Top Tags List */
.pm-top-tags { display: flex; flex-direction: column; gap: 10px; }
.pm-top-tag-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 10px; background: #f8f9ff; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.pm-top-tag-chip { display: inline-flex; align-items: center; max-width: 70%; padding: 4px 10px; border-radius: 999px; font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-top-tag-meta { font-size: 13px; color: #666; }

@keyframes pm-medal-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pm-medal-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } }
@keyframes flow { 0% { transform: translateX(-10px); opacity: 0.5; } 50% { opacity: 1; } 100% { transform: translateX(10px); opacity: 0.5; } }
@keyframes wave { 0%, 100% { transform: translateY(0px); } 25% { transform: translateY(-3px); } 75% { transform: translateY(3px); } }
@keyframes bar-fill { 0% { transform: scaleX(0); } 100% { transform: scaleX(calc(var(--pm-percent, 100) / 100)); } }
.pm-anim-pulse .pm-icon, .pm-anim-pulse .pm-icon i, .pm-anim-pulse .pm-icon span { animation: pulse 2s ease-in-out infinite; }
.pm-anim-flow .pm-icon, .pm-anim-flow .pm-icon i, .pm-anim-flow .pm-icon span { animation: flow 3s ease-in-out infinite; }
.pm-anim-wave .pm-icon, .pm-anim-wave .pm-icon i, .pm-anim-wave .pm-icon span { animation: wave 2s ease-in-out infinite; }
.pm-anim-none .pm-icon { animation: none; }
@media (max-width: 768px) {
 .pm-stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
 .pm-grid { grid-template-columns: 1fr; }
 .pm-stat-icon { font-size: 36px; }
 .pm-stat-value { font-size: 24px; }
 .pm-menu { flex-direction: column; }
 .pm-btn { width: 100%; text-align: center; }
 .pm-stats-two-col { grid-template-columns: 1fr; }
}