.icon{display:inline-block;vertical-align:middle;fill:currentColor;width:1em;height:1em;}
.icon.small{width:1.1em;height:1.1em;}
.icon.large{width:3em;height:3em;}
.main-content{max-width:1400px;margin:0 auto;padding:128px 20px 50px;min-height:calc(100vh - 80px);}
.breadcrumb{margin-bottom:25px;animation:fadeInDown 0.5s ease-out;}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-15px);}
to{opacity:1;transform:translateY(0);}
}
.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;list-style:none;gap:8px;}
.breadcrumb-item{display:flex;align-items:center;gap:8px;}
.breadcrumb-link{display:flex;align-items:center;gap:6px;color:var(--text-secondary);transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;padding:6px 12px;border-radius:8px;font-size:14px;}
.breadcrumb-link:hover{color:var(--primary-color);background:rgba(255,102,0,0.1);}
.breadcrumb-separator{color:var(--text-muted);}
.breadcrumb-current{display:flex;align-items:center;gap:2px;color:var(--primary-color);font-weight:600;font-size:14px;}
.user-header{background:linear-gradient(135deg,rgba(255,102,0,0.12) 0%,rgba(255,136,51,0.06) 50%,rgba(255,102,0,0.04) 100%);border:2px solid rgba(255,102,0,0.25);border-radius:24px;padding:14px 26px;margin-bottom:30px;box-shadow:0 8px 32px rgba(255,102,0,0.15),0 4px 12px rgba(0,0,0,0.06);transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),transform 0.4s cubic-bezier(0.4,0,0.2,1),background-color 0.4s cubic-bezier(0.4,0,0.2,1),color 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;animation:headerFadeIn 0.8s ease-out;}
@keyframes headerFadeIn{from{opacity:0;transform:translateY(30px);}
to{opacity:1;transform:translateY(0);}
}
.user-header::before{content:'';position:absolute;top:-40%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,102,0,0.15),transparent 70%);pointer-events:none;animation:float 8s ease-in-out 1;}
.user-header::after{content:'';position:absolute;bottom:-30%;left:-5%;width:300px;height:300px;background:radial-gradient(circle,rgba(255,136,51,0.1),transparent 70%);pointer-events:none;animation:float 10s ease-in-out 1 reverse;}
@keyframes float{0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(-20px,-20px) scale(1.1);}
}
.user-header:hover{box-shadow:0 18px 64px rgba(255,102,0,0.25),0 6px 16px rgba(0,0,0,0.12);transform:translateY(-4px);border-color:rgba(255,102,0,0.45);}
[data-theme="light"] .user-header{background:linear-gradient(135deg,rgba(255,102,0,0.06) 0%,rgba(255,136,51,0.02) 100%);border-color:rgba(255,102,0,0.2);box-shadow:0 10px 40px rgba(0,0,0,0.06);}
[data-theme="light"] .user-header:hover{box-shadow:0 15px 60px rgba(255,102,0,0.15);}
.user-header-content{display:flex;gap:40px;align-items:center;position:relative;z-index:1;}
.user-header-left{display:flex;gap:25px;flex:1;align-items:flex-start;}
.user-header-right{flex:0 0 auto;min-width:280px;}
.user-avatar-large{width:120px;height:120px;border-radius:50%;overflow:hidden;border:4px solid var(--primary-color);box-shadow:0 8px 24px rgba(255,102,0,0.4);position:relative;flex-shrink:0;transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1),transform 0.3s cubic-bezier(0.4,0,0.2,1),background-color 0.3s cubic-bezier(0.4,0,0.2,1),color 0.3s cubic-bezier(0.4,0,0.2,1);background:linear-gradient(135deg,var(--bg-card),var(--bg-secondary));}
.user-avatar-large:hover{transform:scale(1.05) rotate(2deg);box-shadow:0 12px 32px rgba(255,102,0,0.6);}
.user-avatar-large img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s;}
.user-avatar-large:hover img{transform:scale(1.08);}
.user-avatar-large svg{width:60px;height:60px;fill:var(--primary-color);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.user-info-section{flex:1;display:flex;flex-direction:column;gap:12px;}
.user-name-large{font-size:32px;font-weight:800;background:linear-gradient(135deg,var(--primary-color),var(--primary-color-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px;filter:drop-shadow(0 2px 6px rgba(255,102,0,0.2));animation:usernameSlideIn 0.8s ease-out 0.2s both;line-height:1.2;}
@keyframes usernameSlideIn{from{opacity:0;transform:translateX(-20px);}
to{opacity:1;transform:translateX(0);}
}
.user-bio{font-size:15px;color:var(--text-secondary);line-height:1.6;max-width:600px;}
.user-action-buttons{display:flex;gap:12px;margin-top:4px;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1),transform 0.3s cubic-bezier(0.4,0,0.2,1),background-color 0.3s cubic-bezier(0.4,0,0.2,1),color 0.3s cubic-bezier(0.4,0,0.2,1);}
.btn-primary{background:linear-gradient(135deg,var(--primary-color),var(--primary-color-hover));color:white;box-shadow:0 4px 16px rgba(255,102,0,0.35);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,102,0,0.5);}
.btn-outline-primary{background:transparent;color:var(--primary-color);border:2px solid var(--primary-color);box-shadow:0 3px 12px rgba(255,102,0,0.15);}
.btn-outline-primary:hover{background:rgba(255,102,0,0.1);transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,102,0,0.25);}
.user-stats-large{display:flex;flex-direction:column;gap:12px;animation:statsSlideIn 0.8s ease-out 0.4s both;}
@keyframes statsSlideIn{from{opacity:0;transform:translateX(20px);}
to{opacity:1;transform:translateX(0);}
}
.stat-item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:rgba(255,102,0,0.06);border:1.5px solid rgba(255,102,0,0.15);border-radius:14px;transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;gap:12px;position:relative;}
.stat-item:hover{transform:translateX(-4px);background:rgba(255,102,0,0.1);border-color:rgba(255,102,0,0.3);box-shadow:0 4px 16px rgba(255,102,0,0.2);}
.stat-left{display:flex;align-items:center;gap:12px;}
.stat-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--primary-color-hover));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 12px rgba(255,102,0,0.3);transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;}
.stat-item:hover .stat-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 4px 16px rgba(255,102,0,0.5);}
.stat-icon .icon{width:20px;height:20px;fill:white;}
.stat-label{font-size:16px;color:var(--text-secondary);font-weight:600;}
.stat-number{font-size:24px;font-weight:800;color:var(--primary-color);text-shadow:none;position:relative;-webkit-text-fill-color:currentColor;z-index:1;}
[data-theme="light"] .stat-number{color:var(--primary-color);}
[data-theme="dark"] .stat-number{color:var(--text-primary);}
.user-details-section{margin-top:20px;padding-top:20px;border-top:1.5px dashed rgba(255,102,0,0.15);}
.user-details-grid{display:flex;gap:16px;flex-wrap:wrap;}
.detail-item{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(255,102,0,0.06);border:1.5px solid rgba(255,102,0,0.15);border-radius:12px;transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;}
.detail-item:hover{background:rgba(255,102,0,0.1);border-color:rgba(255,102,0,0.3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,102,0,0.2);}
.detail-item .icon{width:16px;height:16px;fill:var(--primary-color);}
.detail-value{font-size:14px;font-weight:600;color:var(--text-primary);}
.user-content-section{margin-top:40px;}
.user-tabs{display:flex;gap:10px;border-bottom:3px solid rgba(255,102,0,0.15);margin-bottom:35px;position:relative;animation:fadeInUp 0.6s ease-out 0.6s both;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}
.tab-btn{display:flex;align-items:center;gap:8px;padding:14px 24px;background:transparent;border:none;color:var(--text-secondary);font-size:16px;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-3px;transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;position:relative;}
.tab-btn::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,102,0,0.05);border-radius:12px 12px 0 0;opacity:0;transition:opacity 0.3s;}
.tab-btn:hover{color:var(--primary-color);}
.tab-btn:hover::before{opacity:1;}
.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color);}
.tab-btn.active::before{opacity:1;}
.tab-count{background:rgba(255,102,0,0.15);color:var(--primary-color);padding:2px 10px;border-radius:12px;font-size:13px;font-weight:700;}
.tab-btn.active .tab-count{background:var(--primary-color);color:white;}
.tab-content{display:none;animation:fadeIn 0.5s ease-out;}
.tab-content.active{display:block;}
@keyframes fadeIn{from{opacity:0;}
to{opacity:1;}
}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}
.page-title{font-size:26px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:12px;}
.page-title .icon{width:28px;height:28px;fill:var(--primary-color);}
.view-all-btn{display:flex;align-items:center;gap:6px;padding:10px 20px;background:rgba(255,102,0,0.1);color:var(--primary-color);border:2px solid rgba(255,102,0,0.3);border-radius:10px;font-weight:600;transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;}
.view-all-btn:hover{background:rgba(255,102,0,0.2);border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,102,0,0.3);}
.empty-state{text-align:center;padding:80px 30px;background:var(--bg-card);border:2px dashed var(--border-primary);border-radius:20px;color:var(--text-muted);}
.empty-state .icon{width:80px;height:80px;margin-bottom:20px;opacity:0.5;}
.empty-state p{font-size:18px;font-weight:500;}
.activity-timeline{display:flex;flex-direction:column;gap:20px;}
.activity-item{display:flex;gap:20px;padding:24px;background:var(--bg-card);border:2px solid var(--border-primary);border-radius:16px;transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;}
.activity-item:hover{border-color:var(--primary-color);transform:translateX(8px);box-shadow:0 8px 24px rgba(255,102,0,0.2);}
[data-theme="light"] .activity-item{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
[data-theme="light"] .activity-item:hover{box-shadow:0 8px 24px rgba(255,102,0,0.15);}
.activity-icon{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--primary-color-hover));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 15px rgba(255,102,0,0.3);}
.activity-icon .icon{width:24px;height:24px;fill:white;}
.activity-content{flex:1;}
.activity-text{font-size:16px;color:var(--text-primary);margin-bottom:8px;font-weight:500;}
.activity-text a{color:var(--primary-color);font-weight:600;transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;}
.activity-text a:hover{text-decoration:underline;}
.activity-time{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-muted);}
.activity-time .icon{width:14px;height:14px;fill:var(--text-muted);}
.user-about-info{display:flex;flex-direction:column;gap:30px;}
.about-section{background:var(--bg-card);border:2px solid var(--border-primary);border-radius:20px;padding:30px;transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;}
.about-section:hover{border-color:rgba(255,102,0,0.3);box-shadow:0 8px 24px rgba(255,102,0,0.15);}
[data-theme="light"] .about-section{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
[data-theme="light"] .about-section:hover{box-shadow:0 8px 24px rgba(255,102,0,0.12);}
.about-section h3{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.about-section h3 .icon{fill:var(--primary-color);}
.about-section p{font-size:16px;color:var(--text-secondary);line-height:1.8;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.stat-box{display:flex;align-items:center;gap:18px;padding:20px;background:linear-gradient(135deg,rgba(255,102,0,0.08),rgba(255,136,51,0.03));border:2px solid rgba(255,102,0,0.2);border-radius:16px;transition:opacity 0.3s,transform 0.3s,background-color 0.3s,color 0.3s;}
.stat-box:hover{border-color:var(--primary-color);transform:translateY(-5px);box-shadow:0 10px 25px rgba(255,102,0,0.25);}
.stat-box .stat-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--primary-color-hover));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(255,102,0,0.35);}
.stat-box .stat-icon .icon{width:28px;height:28px;fill:white;}
.stat-info{flex:1;}
.stat-box .stat-value{font-size:28px;font-weight:800;color:var(--primary-color);display:block;margin-bottom:4px;}
.stat-box .stat-label{font-size:14px;color:var(--text-secondary);font-weight:600;}
.info-list{display:flex;flex-direction:column;gap:15px;}
.info-item{display:flex;align-items:center;padding:14px 18px;background:rgba(255,102,0,0.05);border-radius:10px;border-left:4px solid var(--primary-color);}
.info-label{font-weight:600;color:var(--text-primary);min-width:120px;}
.info-value{color:var(--text-secondary);}
@media (max-width:968px){.user-header-content{flex-direction:column;gap:30px;}
.user-header-left{width:100%;}
.user-header-right{width:100%;min-width:auto;}
.user-stats-large{flex-direction:row;gap:10px;}
.stat-item{flex-direction:column;align-items:center;text-align:center;padding:18px 12px;flex:1;gap:10px;}
.stat-left{flex-direction:column;gap:8px;}
.stat-icon{width:48px;height:48px;}
.stat-icon .icon{width:24px;height:24px;}
.stat-label{font-size:13px;}
.stat-number{font-size:22px;}
}
@media (max-width:768px){.main-content{padding:80px 15px 40px;}
.breadcrumb{margin-bottom:20px;}
.breadcrumb-link,.breadcrumb-current{font-size:13px;padding:5px 10px;}
.user-header{padding:30px 20px;}
.user-header-left{width:100%;gap:20px;}
.user-avatar-large{width:100px;height:100px;}
.user-name-large{font-size:26px;}
.user-bio{font-size:14px;}
.stat-item{padding:16px 10px;}
.stat-icon{width:44px;height:44px;}
.stat-icon .icon{width:22px;height:22px;}
.stat-number{font-size:20px;}
.stat-label{font-size:12px;}
.user-details-grid{gap:12px;}
.detail-item{padding:8px 14px;font-size:13px;}
.user-tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.user-tabs::-webkit-scrollbar{display:none;}
.tab-btn{padding:12px 18px;font-size:14px;white-space:nowrap;}
.section-header{flex-direction:column;align-items:flex-start;gap:15px;}
.page-title{font-size:22px;}
.view-all-btn{width:100%;justify-content:center;}
.activity-item{flex-direction:column;padding:20px;}
.activity-item:hover{transform:translateY(-4px);}
.stats-grid{grid-template-columns:1fr;}
.stat-box{padding:18px;}
}
@media (max-width:480px){.user-header{padding:10px 10px;}
.user-header-left{width:100%;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.user-info-section{width:100%;align-items:center;gap:4px;}
.user-avatar-large{width:90px;height:90px;}
.user-name-large{font-size:22px;}
.user-bio{text-align:center;max-width:100%;}
.user-stats-large{gap:8px;}
.stat-item{padding:14px 8px;gap:8px;}
.stat-icon{width:40px;height:40px;}
.stat-icon .icon{width:20px;height:20px;}
.stat-number{font-size:18px;}
.stat-label{font-size:11px;}
.user-details-section{margin-top:0;padding-top:6px;}
.user-details-grid{gap:10px;justify-content:center;}
.detail-item{padding:3px 12px;font-size:12px;}
.detail-value{font-weight:400;}
.user-action-buttons{justify-content:center;}
.btn{margin-top:12px;padding:5px 28px;font-size:14px;min-height:8px;gap:4px;}
.btn .icon{padding-top:4px;}
.page-title{font-size:20px;}
.about-section{padding:20px;}
.stat-box{padding:16px;}
.stat-box .stat-icon{width:48px;height:48px;}
.stat-box .stat-value{font-size:24px;}
}