/**************** U Controller - User Profile Page **************/
/* 创建日期: 2024-12-08 */

/* U页面 sidebar 宽度覆盖：左30% 右70% */
@media(min-width:768px){
    .sidebar-left{width:30%;position:sticky;top:84px;height:calc(100vh - 124px);overflow-y:auto}
    .sidebar-right{width:70%;height:auto;overflow-y:visible}
}

/********** Left Panel - User Card **********/
.ul-wrap{width:100%;color:var(--m-text-primary)}
.ul-card{background: var(--m-bg-primary);border-radius:.5rem;padding:1.5rem;margin-bottom:1rem;box-shadow:0 2px 8px rgba(0,0,0,.05);text-align:center}

.ul-avatar{width:100px;height:100px;margin:0 auto 1rem;border-radius:50%;overflow:hidden;border:3px solid var(--e-primary-color);background:var(--m-border-light);display:flex;align-items:center;justify-content:center;position:relative}
.ul-unread-badge{position:absolute;top:0;right:0;background:#e74c3c;color:#fff;font-size:.7rem;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}
.ul-avatar img{width:100%;height:100%;object-fit:cover}
.ul-info{text-align:center}
.ul-username{margin:0 0 .5rem;font-size:1.25rem;font-weight:bold;color:var(--m-text-primary)}
.ul-meta{font-size:.8rem;color:var(--f-black-9);margin-bottom:1rem}
.ul-meta i{margin-right:.25rem}
.ul-actions{margin-top:1rem}
.ul-follow-btn,.ul-msg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:100px;padding:.5rem 1rem;border-radius:2rem;cursor:pointer;font-size:.9rem;text-decoration:none;transition:all .2s}
.ul-follow-btn{background:var(--e-primary-color);color:#fff;border:1px solid var(--e-primary-color)}
.ul-follow-btn:hover{opacity:.85}
.ul-follow-btn.following{background:var(--m-bg-secondary);color:var(--m-text-primary);border:1px solid var(--m-border-color)}
.ul-follow-btn.following:hover{background:var(--m-border-light);color:#d32f2f;border-color:#d32f2f}
.ul-msg-btn{background:var(--m-bg-secondary);color:var(--m-text-primary);border:1px solid var(--m-border-color);margin-left:.5rem}
.ul-msg-btn:hover{background:var(--e-primary-color);color:#fff;border-color:var(--e-primary-color)}

/********** Bio & Links **********/
.ul-about{margin-top:1rem;background:var(--m-bg-primary);border-radius:.5rem;padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.ul-bio-text{font-size:.85rem;line-height:1.6;color:var(--m-text-secondary);margin:0;word-break:break-word}
.ul-links{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.ul-links:first-child{margin-top:0}
.ul-link-item{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--m-text-primary);font-size:.8rem;border-radius:.25rem;transition:background .2s}
.ul-link-item:hover{color:var(--e-primary-color)}
.ul-link-item i{font-size:.875rem;width:1.1rem;text-align:center;flex-shrink:0;color:var(--e-primary-color)}
.ul-link-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/********** Stats **********/
.ul-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.ul-stat-item{background: var(--m-bg-primary);border-radius:.5rem;padding:1rem;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.ul-stat-value{font-size:1.5rem;font-weight:bold;color:var(--e-primary-color)}
.ul-stat-label{font-size:.8rem;color:var(--f-black-9);margin-top:.25rem}

/********** Right Panel - Sections **********/
.ur-wrap{width:100%;display:flex;flex-direction:column;gap:1.5rem}
.ur-section{padding:0}
.ur-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem}
.ur-section-title{margin:0;font-size:1rem;font-weight:600;color:var(--m-text-primary);display:flex;align-items:center;gap:.4rem}
.ur-section-title i{color:var(--e-primary-color);font-size:.9rem}
.ur-section-count{font-size:.8rem;color:var(--f-black-9);font-weight:400}
.ur-privacy-hint{margin-left:.4rem;font-size:.7rem;color:var(--f-black-9);cursor:help;position:relative}
.ur-privacy-hint i{font-size:.65rem}
.ur-sort-btns{display:flex;gap:.5rem}
.ur-sort-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem;background:rgba(0,0,0,.05);border:none;border-radius:.375rem;color:inherit;font-size:.8rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.ur-sort-btn:hover{background:rgba(0,0,0,.1)}
.ur-sort-btn.active{background:var(--e-primary-color);color:#fff}

/********** Grid Layout **********/
.ur-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.ur-grid-4{grid-template-columns:repeat(4,1fr);gap:.5rem}

/* Bookmark Card: vertical layout (top image, bottom text) in grid */
.ur-bookmark-card{display:grid;grid-template-rows:1fr auto;padding:.5rem;overflow:hidden;background:var(--f-white);border-radius:.5rem;text-decoration:none;color:inherit;transition:all .2s;height:200px;box-sizing:border-box}
.ur-bookmark-card:hover{background-color:#f1f1f1;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.ur-bookmark-card .ur-bookmark-poster{width:100%;height:100%;min-height:0;position:relative;overflow:hidden;background:var(--m-border-light);border-radius:.25rem}
.ur-bookmark-card .ur-bookmark-poster img{width:100%;height:100%;object-fit:cover}
.ur-bookmark-card .ur-bookmark-info{padding:.35rem 0 0}
.ur-bookmark-card .ur-bookmark-name{font-weight:600;font-size:.875rem;margin-bottom:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--m-text-primary)}
.ur-bookmark-card .ur-bookmark-summary{font-size:.7rem;color:var(--m-text-secondary);overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis;line-height:1.3}
.ur-bookmark-card .ur-bookmark-meta{display:flex;gap:.4rem;font-size:.65rem;color:var(--f-black-9);margin-top:.2rem}

/********** List Items **********/
.ur-list{display:flex;flex-direction:column;gap:.5rem}

/* Bookmark Item */
.ur-bookmark-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--f-white);border-radius:.5rem;text-decoration:none;color:inherit;transition:all .2s}
.ur-bookmark-item:hover{background-color:#f1f1f1;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.ur-bookmark-poster{width:100px;height:75px;flex-shrink:0;border-radius:.25rem;overflow:hidden;background:var(--m-border-light);position:relative}
.ur-bookmark-poster img{width:100%;height:100%;object-fit:cover;background:var(--m-border-light)}
.ur-bookmark-info{flex:1;min-width:0}
.ur-bookmark-name{font-weight:600;font-size:.9rem;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur-bookmark-summary{font-size:.8rem;color:var(--m-text-secondary);margin-bottom:.25rem;overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis;line-height:1.4}
.ur-bookmark-meta{display:flex;gap:.75rem;font-size:.75rem;color:var(--f-black-9)}
.ur-bookmark-meta i{margin-right:.2rem}

/* Article Item */
.ur-article-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--f-white);border-radius:.5rem;text-decoration:none;color:inherit;transition:all .2s;min-width:0;box-sizing:border-box;overflow:hidden}
.ur-article-item:hover{background-color:#f1f1f1;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.ur-article-poster{width:120px;height:90px;flex-shrink:0;border-radius:.25rem;overflow:hidden;background:var(--m-border-light);position:relative}
.ur-article-poster img{width:100%;height:100%;object-fit:cover;background:var(--m-border-light)}
.js-home-poster-box .js-home-poster-img{position:relative;z-index:1;transition:opacity .18s ease;background:var(--m-border-light) url('/public/img/loading.svg') center center no-repeat;background-size:80% auto}
.js-home-poster-box .js-home-poster-img.is-loaded,.js-home-poster-box .js-home-poster-img.is-error{background-color:var(--m-border-light);background-image:none}
.js-home-poster-box.is-loading .js-home-poster-img{opacity:0}
.js-home-poster-box.is-loading::after{content:'';position:absolute;inset:0;z-index:2;background:var(--m-border-light) url('/public/img/loading.svg') center center no-repeat;background-size:80% auto;pointer-events:none}
.js-home-poster-box.is-loaded .js-home-poster-img{opacity:1}
.ur-article-info{flex:1;min-width:0;overflow:hidden}
.ur-article-title{font-weight:600;font-size:.9rem;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur-article-summary{font-size:.8rem;color:var(--m-text-secondary);margin-bottom:.25rem;overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis;line-height:1.4}
.ur-article-meta{display:flex;gap:.75rem;font-size:.75rem;color:var(--f-black-9)}
.ur-article-meta i{margin-right:.2rem}

/* Comment Item */
.ur-comment-item{display:block;padding:.75rem;background:var(--f-white);border-radius:.5rem;text-decoration:none;color:inherit;transition:all .2s}
.ur-comment-item:hover{background-color:#f1f1f1;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.ur-comment-text{font-size:.9rem;line-height:1.5;margin-bottom:.5rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.ur-comment-meta{font-size:.75rem;color:var(--f-black-9)}
.ur-comment-meta i{margin-right:.2rem}

/* Empty State */
.ur-empty{padding:3rem 1rem;text-align:center;color:var(--f-black-9)}
.ur-empty i{font-size:2.5rem;margin-bottom:.75rem;display:block}

/* Loading State */
.ur-loading{padding:3rem 1rem;text-align:center;color:var(--f-black-9)}
.ur-loading i{font-size:1.5rem;line-height:1;color:var(--e-primary-color);display:inline-block}

/* Loading Overlay - covers content without removing it */
.ur-section{position:relative}
.ur-loading-overlay{position:absolute;inset:0;z-index:10;border-radius:.5rem;background:rgba(255,255,255,.5) url('/public/img/loading.svg') center center no-repeat;background-size:30% auto;pointer-events:none}

/* Pagination - 2024-12-08 */
.ur-pagination{display:flex;justify-content:right;align-items:center;padding:.75rem 0;margin-top:.75rem;border-top:1px solid var(--m-border-light);flex-wrap:wrap;gap:.5rem}
.ur-page-info{font-size:.8rem;color:var(--f-black-9)}
.ur-page-btns{display:flex;align-items:center;gap:.25rem}
.ur-page-btn{width:32px;height:32px;border:none;background:rgba(0,0,0,.05);border-radius:.375rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.ur-page-btn:hover:not(:disabled){border-color:var(--e-primary-color);color:var(--e-primary-color)}
.ur-page-btn:disabled{opacity:.4;cursor:not-allowed}
.ur-page-num{padding:0 .75rem;font-size:.85rem;color:var(--m-text-secondary)}

/********** Recommended Users **********/
.ul-recommend{margin-top:1rem;background: var(--m-bg-primary);border-radius:.5rem;padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.ul-rec-title{font-size:.9rem;font-weight:600;margin-bottom:.75rem;color:var(--m-text-primary)}
.ul-rec-title i{margin-right:.5rem;color:var(--e-primary-color)}
.ul-rec-list{display:flex;flex-direction:column;gap:.5rem}
.ul-rec-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:.5rem;transition:background .2s}
.ul-rec-item:hover{/*background:var(--m-bg-secondary);*/background-color:var(--f-white-c);}
.ul-rec-link{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;text-decoration:none;color:inherit}
.ul-rec-follow{width:28px;height:28px;border:none;border-radius:50%;background:var(--e-primary-color);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.75rem;transition:all .2s}
.ul-rec-follow:hover{opacity:.85}
.ul-rec-follow.following{background:var(--m-bg-secondary);color:var(--f-black-9);border:1px solid var(--m-border-color)}
.ul-rec-follow.following:hover{background:var(--m-border-light);color:#d32f2f;border-color:#d32f2f}
.ul-rec-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}
.ul-rec-avatar img{width:100%;height:100%;object-fit:cover}
.ul-rec-info{flex:1;min-width:0}
.ul-rec-name{font-size:.9rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ul-rec-meta{font-size:.75rem;color:var(--f-black-9);display:flex;gap:.75rem}

/********** Activity Item (right_my.html) - PC单行/移动端三行 **********/
.ur-activity-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:var(--m-bg-content);border-radius:.5rem;transition:all .2s;color:var(--m-text-primary);overflow:hidden}
.ur-activity-item:hover{background-color:var(--f-white-c);box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* 头像+标签+用户名 */
.ur-activity-row1{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.ur-activity-avatar{display:block;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--m-border-light);flex-shrink:0}
.ur-activity-avatar img{width:100%;height:100%;object-fit:cover}
.ur-activity-label{background:var(--e-primary-color);color:#fff;padding:.1rem .4rem;border-radius:.25rem;font-size:.75rem;font-weight:500;flex-shrink:0}
.ur-activity-user{color:var(--e-primary-color);font-weight:500;text-decoration:none;font-size:.85rem}
.ur-activity-user:hover{text-decoration:underline}
/* 动态内容 */
.ur-activity-row2{flex:1;min-width:0;font-size:.85rem;color:var(--m-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur-activity-row2 a{color:var(--m-text-primary);text-decoration:none;font-weight:500}
.ur-activity-row2 a:hover{color:var(--e-primary-color)}
.ur-activity-row2 i{margin-right:.2rem;color:var(--e-primary-color)}
/* 时间 */
.ur-activity-time{font-size:.75rem;color:var(--f-black-9);flex-shrink:0}
.ur-activity-time i{margin-right:.25rem}

/********** User List Item (followers/following) **********/
.ur-user-list{gap:.5rem}
.ur-user-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--m-bg-content);border-radius:.5rem;text-decoration:none;color:var(--m-text-primary);transition:all .2s;overflow:hidden}
.ur-user-item:hover{background-color:var(--f-white-c);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.ur-user-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--m-border-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ur-user-avatar img{width:100%;height:100%;object-fit:cover}
.ur-user-avatar i{font-size:1.5rem;color:var(--f-black-9)}
.ur-user-info{flex:1;min-width:0;overflow:hidden}
.ur-user-name{font-weight:600;font-size:.95rem;margin-bottom:.25rem;color:var(--m-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur-user-meta{font-size:.75rem;color:var(--f-black-9)}
.ur-user-meta i{margin-right:.2rem}
.ur-follow-btn{padding:.4rem 1rem;background:var(--e-primary-color);color:#fff;border:none;border-radius:2rem;font-size:.8rem;cursor:pointer;transition:all .2s;flex-shrink:0}
.ur-follow-btn:hover{opacity:.85}
.ur-follow-btn.following{background:var(--m-bg-secondary);color:var(--m-text-primary);border:1px solid var(--m-border-color)}

/********** right_my.html Tab Toggle **********/
#tab-activities:checked ~ .ur-tab-activities{display:block}
#tab-followers:checked ~ .ur-tab-followers{display:block}
#tab-following:checked ~ .ur-tab-following{display:block}

/* Visitor /u/{id}: <=1200 文章列表1列 */
@media(max-width:1200px){
    #articles-list .ur-grid{grid-template-columns:1fr;gap:.6rem}
}

/* Tablet: 768-1000 访客页右侧书签2列、文章1列 */
@media(min-width:768px) and (max-width:1000px){
    .ur-grid{grid-template-columns:1fr;gap:.6rem}
    .ur-grid-4{grid-template-columns:repeat(2,1fr);gap:.6rem}
}

/********** Mobile Responsive **********/
@media(max-width:767px){
    /* 左侧面板宽度 */
    .sidebar-left{width:70%}
    
    /* Sections */
    .ur-wrap{gap:1rem}
    .ur-section-header{flex-direction:column;align-items:flex-start;gap:.4rem}
    .ur-sort-btns{flex-wrap:wrap}
    .ur-sort-btn{font-size:.7rem;padding:.35rem .6rem}
    
    /* Grid: articles 1 col, bookmarks 2 col on mobile */
    .ur-grid{grid-template-columns:1fr;gap:.4rem}
    .ur-grid-4{grid-template-columns:repeat(2,1fr)}
    
    /* 分页 */
    .ur-pagination{padding:.5rem}
    
    /* 活动列表 - 移动端三行 */
    .ur-activity-item{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.6rem;overflow:visible}
    .ur-activity-row1{gap:.4rem}
    .ur-activity-avatar{width:28px;height:28px}
    .ur-activity-label{font-size:.7rem;padding:.05rem .3rem}
    .ur-activity-user{font-size:.8rem}
    .ur-activity-row2{font-size:.8rem;width:100%;white-space:normal;overflow:visible}
    .ur-activity-time{font-size:.7rem;width:100%}
    
    /* 用户列表 */
    .ur-user-item{padding:.75rem}
    .ur-user-avatar{width:40px;height:40px}
    .ur-user-name{font-size:.9rem}
    .ur-follow-btn{padding:.3rem .75rem;font-size:.75rem}
    
    /* 消息列表 */
    .ur-msg-header{flex-wrap:wrap;gap:.5rem}
    .ur-msg-link{padding:.4rem .75rem;font-size:.8rem}
    .ur-msg-list{max-height:calc(100vh - 300px)}
    .ur-msg-item{padding:.75rem;overflow:visible}
    .ur-msg-item-content{overflow:visible}
    .ur-msg-item-avatar{width:36px;height:36px}
    .ur-msg-item-title{font-size:.8rem}
    .ur-msg-item-preview{font-size:.75rem}
    
    /* 分页 */
    .ur-pagination{padding:.75rem;flex-wrap:wrap;gap:.5rem}
    .ur-page-btn{padding:.4rem .6rem;font-size:.75rem}
    
    /* 左侧统计 */
    .ul-stats{grid-template-columns:repeat(4,1fr);gap:.5rem}
    .ul-stat-item{padding:.75rem .5rem}
    .ul-stat-value{font-size:1.25rem}
    .ul-stat-label{font-size:.7rem}
}

/********** Dark Theme **********/
:root[app-theme='dark']{
    .ul-card,.ul-stat-item,.ul-recommend,.ul-about{background:var(--f-black-2);box-shadow:0 1px 3px rgba(0,0,0,.2)}
    .ur-bookmark-card,.ur-bookmark-item,.ur-article-item,.ur-comment-item{background:var(--f-black-2);box-shadow:0 1px 3px rgba(0,0,0,.2)}
    .ur-bookmark-card:hover,.ur-bookmark-item:hover,.ur-article-item:hover,.ur-comment-item:hover{background:var(--f-black-3);box-shadow:0 2px 8px rgba(0,0,0,.4)}
    .ur-bookmark-poster,.ur-article-poster{background-color:var(--f-black-4)}
    .js-home-poster-box .js-home-poster-img{background-color:var(--f-black-4)}
    .js-home-poster-box .js-home-poster-img.is-loaded,.js-home-poster-box .js-home-poster-img.is-error{background-color:var(--f-black-4)}
    .js-home-poster-box.is-loading::after{background-color:var(--f-black-4)}
    .ur-sort-btn:not(.active){background:#374151;color:#e5e7eb}
    .ur-sort-btn:not(.active):hover{background:#4b5563}
    .ul-follow-btn.following,.ur-follow-btn.following{background:var(--f-black-4);color:var(--f-white-c);border-color:var(--m-text-secondary)}
    .ul-msg-btn{background:var(--f-black-4);color:var(--f-white-c);border-color:var(--m-text-secondary)}
    .ul-msg-btn:hover{background:var(--e-primary-color);color:#fff;border-color:var(--e-primary-color)}
    .ur-page-btn{background:#374151;color:#e5e7eb}
    .ur-page-btn:hover:not(:disabled){background:#4b5563}
    .ul-rec-item:hover{background:var(--f-black-3)}
    .ur-user-avatar{background:var(--f-black-5)}
    .ur-activity-row2{color:var(--f-white-d)}
    .ur-activity-row2 a{color:var(--f-white-c)}
    .ur-loading-overlay{background:rgba(0,0,0,.5) url('/public/img/loading.svg') center center no-repeat;background-size:30% auto;color:var(--f-white-c)}
}