img{ -webkit-user-drag:none; }
a{ text-decoration:none; color:inherit; }
body{
	background-color:#17181a;
	user-select:none; overflow-y:auto;
	height:100%; width:100%; margin:0px; padding:0px;
	display:flex;
	
	overscroll-behavior:none;
	-webkit-appearance:none;
}
html{ height:100%; width:100%; touch-action:pan-x pan-y;}
*{ box-sizing:border-box; scroll-behavior:smooth; }

/* 右侧列表通用容器 */
#item_container{display:block;flex-grow:1;height:100vh;overflow:hidden auto;min-width:calc(100% - 80px)}
.flex_container{display:flex;flex-wrap:wrap;}
.options_frame{width:100%;height:calc(100vh - 190px);min-height:200px;border:none;border-radius:5px;}

.flex_hint_stripe{clear:both;display:flex;width:calc(100% - 14px);padding:10px;margin:7px;text-align:center;justify-content:center;font-size:small;background-color:var(--s-color-surface-container-high);color:var(--s-color-on-surface-variant);border:1px solid #3b3b3b3b;border-radius:12px;}

/* 条形消息卡片 */
.thinstrip_msgBox{background:transparent;border:1px solid #3b3b3b3b;border-radius:10px;padding:8px 10px;margin:5px;width:90%;margin-left:calc(5% - 10px)}
.thinstrip_msgBox_headline{display:flex;vertical-align:center;line-height:31px;margin:5px 0px}
.thinstrip_msgBox_headline img{border-radius:30px;width:30px;height:30px;margin-right:5px}
.thinstrip_msgBox_headline span{margin-left:5px;font-weight:bold;font-size:15px}
.thinstrip_msgBox_contentline .quote{background:#33333333;border-radius:4px;padding:5px;margin:5px 0px;border-left:4px solid #003344;width:98%;font-size:12px;font-style:italic;white-space:pre-wrap;word-wrap:break-word;font-family:inherit;}
.thinstrip_msgBox_contentline .content{width:fit-content;max-width:98%;white-space:pre-wrap;word-wrap:break-word;font-size:13px;font-family:inherit;margin:5px 0px}
.thinstrip_msgBox_contentline .time{width:fit-content;max-width:98%;white-space:pre-wrap;word-wrap:break-word;font-size:11px;font-family:inherit;margin:5px 0px;opacity:0.8}

/* 页面主体 */
#dynamic_loader{ position:fixed; bottom:0; left:0px; width:100vw; z-index:120; opacity:1; }
#global_refresh_btn{ position:fixed; right:24px; bottom:24px; z-index:101; }

/* 播放器 */
#player_container{position:fixed;top:0px;left:0px;z-index:103;width:100vw;height:100vh;background:var(--s-color-surface-container-low);display:flex;flex-direction:column;justify-content:center;align-items:center}
.player_row{display:flex;width:100vw;flex-direction:row;justify-content:center;align-items:center}
.player_videoContainer{max-width:calc(100vw - 360px);flex-grow:1;outline:none;height:calc(100vh - 40px);border:none;border-radius:8px}
#player_title{margin-left:15px;font-size:18px;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#player_descArea{user-select:text;word-wrap:break-word;word-break:break-all;white-space:pre-wrap;height:calc(100vh - 132px);font-size:16px;overflow:hidden auto}
#player_descArea hr{margin:3px;border:none;border-bottom:1px solid var(--s-color-surface-container-high)}
#player_videoList{user-select:none;word-wrap:break-word;word-break:break-all;width:100%;height:calc(100vh - 132px);font-size:16px;overflow-y:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}
#player_simpleDanmu{width:fit-content;max-width:calc(100vw - 360px);min-width:300px;position:fixed;top:50px;left:10px;z-index:104;font-size:16px;word-wrap:break-word;word-break:break-all;white-space:pre-wrap;}
.player_danmuText{width:fit-content;max-width:500px;font-size:18px;font-weight:bold;opacity:0.8;z-index:104;position:fixed;color:#EEEEEE;text-shadow:0 0 2px #000;}
.player_cidListItem{margin:3px;width:fit-content;cursor:pointer;user-select:none;white-space:nowrap}
.player_blockTitle{font-size:large;font-weight:400;color:var(--s-color-primary);padding:0px 10px;border:0;border-left:8px solid;margin:3px 0px;}
#player_sidebarTab{background-color:inherit;}

/* 直播播放器 */
#live_container{position:fixed;top:0px;left:0px;z-index:103;width:100vw;height:100vh;background:var(--s-color-surface-container-low);display:flex;flex-direction:column;justify-content:center;align-items:center}
#live_videoContainer{max-width:calc(100vw - 360px);flex-grow:1;outline:none;height:calc(100vh - 40px);border:none;border-radius:8px}
#live_title{margin-left:15px;font-size:18px;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#live_commentArea{user-select:text;word-wrap:break-word;word-break:break-all;white-space:pre-wrap;height:calc(100vh - 84px - 80px);font-size:16px;overflow:hidden auto}
#live_descArea{user-select:text;word-wrap:break-word;word-break:break-all;white-space:pre-wrap;height:calc(80px);flex-grow:1;font-size:16px;overflow:hidden auto}
#live_commentArea .messageBubble{width:fit-content;max-width:calc(100% - 20px);padding:6px 9px; background:var(--s-color-surface-container-high);border-radius:0 12px 12px 12px;margin:5px 3px;word-wrap:break-word;word-break:break-all;white-space:pre-wrap;}
#live_commentArea .messageBubble_sys{width:fit-content;max-width:calc(100% - 20px);color:var(--s-color-on-surface-variant);padding:0;margin:5px 3px;font-style:italic;font-size:small;}

/* 评论回复样式 */
.reply_container{width:calc(100% - 2px);margin-top:5px;user-select:text;font-size:0.875em;line-height:1.5em;display:flex;flex-direction:column;white-space:normal;}
.reply_container hr{margin:3px;color:var(--s-color-surface-container-high);border:none;border-bottom:1px solid #848484;position:relative;top:0;left:calc(50% + 6px);transform:translateX(-50%);max-width:400px}
.reply_container .reply_item{margin-bottom:5px;padding:5px 0;max-width:400px;position:relative;top:0;left:50%;transform:translateX(-50%);max-width:400px;border-bottom:1px solid var(--s-color-surface-container-high);width:(100% - 5px);}
.reply_container .reply_item>.username{font-size:inherit;font-weight:bold;display:inline-flex;flex-direction:row;}
.reply_container .reply_item>.username::before{display:block;content:'';background:var(--s-color-on-surface);width:10px;height:10px;border-radius:30px;margin:5px 5px 5px 0px;}
.reply_container .reply_item .content{margin-left:15px;width:calc(98% - 20px);word-wrap:break-word;}
.reply_container .reply_item .other_detail{color:var(--s-color-on-surface-variant);margin-left:15px;font-size:small;font-weight:lighter;}
.reply_container .reply_item .image{width:80px;height:80px;border-radius:8px;margin:3px;}
.reply_container .more_reply{padding:0;margin:10px;border-radius:8px;max-width:400px;overflow:hidden;display:flex;flex-direction:column;flex-wrap:nowrap;}
.reply_container .more_reply .more_reply_item{width:inherit;padding:3px 5px;box-sizing:border-box;background-color:var(--s-color-surface-container-high);}
.reply_container .more_reply .more_reply_item .username{font-weight:normal;color:var(--s-color-primary);}


/* 自定义对话框 */
#dlg_container{position:fixed;top:0px;left:0;z-index:102;width:100vw;height:100vh;background:rgba(0,0,0,0.3)}
.dlg_container_real{position:relative;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);width:clamp(300px,65%,1200px);height:calc(100% - 140px);background:var(--s-color-surface-container-low);color:var(--s-color-on-surface);border-radius:8px;border:1px solid rgba(197,217,241,0.063)}
#dlg_content{width:100%;height:100%;background:var(--s-color-surface-container-low);overflow-y:auto;overflow-x:hidden;color:var(--s-color-on-surface);font-size:medium;max-height:calc(100vh - 80px);}
#dlg_title{margin-left:15px;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 视频卡片组件（封面突出） */
.common_video_card { margin:7px; width:280px; flex-shrink:0; flex-grow:0; height:fit-content; }
.common_video_card a{ color:inherit; -webkit-user-drag:none; }
.common_video_card div[slot="subhead"]{ height:1.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.common_video_card div[slot="text"]{ height:1.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.common_video_card div[slot="image"] img{width:100%;height:100%;object-fit:cover}

/* 视频卡片组件（列表型） */
.slim_video_card{display:flex;align-items:center;margin:6px 8px;width:calc(100% - 16px);height:90px;min-width:300px;max-width:none;overflow:hidden}
.slim_video_card .card-image{flex-shrink:0;width:fit-content;height:80px;border-radius:10px;overflow:hidden;margin:5px;}
.slim_video_card .card-image img{width:100%;height:100%;object-fit:cover}
.slim_video_card .card-content{display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;overflow:hidden}
.slim_video_card .card-subhead{font-size:medium;color:inherit;height:40px;overflow:hidden;margin:5px 0px;}
.slim_video_card .card-text{font-size:small;color:#AAAAAA99;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:5px 0px;}

/* 顶部标签栏 */
.tabbar{ display:flex; flex-direction:row; align-items:center; margin:10px 0px 2px 4px }
.tabbar s-chip{ margin:0px 3px; }
.tab_container{ align-content:flex-start; }

/* Toast提示消息 */
s-snackbar{ z-index:9999; }
s-snackbar a{ color:#00AEEC; }

/* 动态页 - UP主列表 */
#dynamic_container { margin:0; width:100%; height:100%; border:0; padding:0; }
.dynamic_list { }
.dynamic_listItem { width:calc(100% - 10px); display:flex; align-items:center; height:fit-content; overflow:hidden; flex-direction:row; margin:5px 5px; }
.dynamic_listItem .avatar { width:35px; height:35px; border-radius:100%; margin:10px; }
.dynamic_listItem .title {  font-weight:lighter; font-size:medium; flex-grow:1; }
.dynamic_listItem .badge { margin-right:10px; }
#dynamic_container .dialog { font-size:medium; display:flex; flex-direction:column; }
#dynamic_container .dialog_titlebar { font-weight:lighter; width:calc(100% - 10px); height:fit-content; padding:3px 5px; background:var(--s-color-surface); border-bottom: 1px solid var(--s-color-surface-variant); }
#dynamic_container .dialog_content { width:calc(100% - 10px); flex-grow:1; padding:3px 5px; overflow:hidden auto; height:calc(100vh - 50px); }

/* 用户个人空间 */
.myspace_topInfoBox{ margin:10px; width:calc(100% - 20px); height:120px; min-width:300px; max-width:none; display:inline-flex; }
.myspace_topInfoBox div[slot="image"]{height:100%; width:fit-content; margin-right:5px; }
.myspace_topInfoBox div[slot="image"] img { height:100%; }
.myspace_topInfoBox div[slot="headline"]{ height:100%; margin-right:10px; flex-grow:1; min-width:140px; overflow:hidden; flex-shrink:1; line-height:1.2; }
.myspace_topInfoBox div[slot="headline"] .usrSign { font-size:medium; font-weight:normal; margin:3px 0; padding:0; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.myspace_topInfoBox div[slot="headline"] s-chip { margin:3px 2px; }
.myspace_topInfoBox div[slot="subhead"] { width:fit-content; }
.myspace_topInfoBox div[slot="subhead"] s-icon-button { margin:32px 5px; }

.myspace_subSection { width:calc(50% - 20px); min-width:300px; max-width:none; margin:10px; display:flex; flex-direction:row; flex-shrink:0; break-inside: avoid; }
.myspace_subSection div[slot="headline"]{ width:fit-content; float:left; font-weight:bold; font-size:17px; }
.myspace_subSection s-icon-button[slot="action"]{ float:right; }
.myspace_subSection a { margin:10px; flex-grow:1; }

/* 用户空间动态 */
.common_dynamic_card{ margin:0; width:60%; min-width:250px; max-width:500px; font-size:16px; overflow:hidden; padding:10px; cursor:pointer; color:var(--s-color-on-surface); border-bottom:1px solid var(--s-color-surface-container-high); }
.common_dynamic_card .videopic{ width:100%; border-radius:10px; -webkit-user-drag:none; }
.common_dynamic_card .dailypic{ width:100px; height:100px; object-fit:contain; border-radius:5px; -webkit-user-drag:none; margin:5px; }
.common_dynamic_card .username{ color:var(--s-color-on-surface-variant); font-size:small; width:100%; overflow:hidden; display:flex; flex-direction:row; align-items:center; gap:5px; }
.common_dynamic_card .userpic{ width:30px; height:30px; border-radius:30px }
.common_dynamic_card .title{ width:100%; margin:5px 0px }

/* UP主/用户卡片（少量信息） */
.common_user_card_slim { width:280px; max-width:calc(100% - 10px); display:flex; align-items:center; height:fit-content; overflow:hidden; flex-direction:row; margin:5px 5px; overflow-y: hidden; background-color:inherit; }
.common_user_card_slim .avatar { width:35px; height:35px; border-radius:100%; margin:10px; }
.common_user_card_slim .right { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; flex-grow:1; }
.common_user_card_slim .right .name { display:block; width:100%; font-weight:lighter; font-size:medium; }
.common_user_card_slim .right .level { padding:0px 4px; margin:0px 1px; font-size:12px; border-radius:3px; background:var(--s-color-secondary-container); }
.common_user_card_slim .right .sign { margin:0; font-size:small; color:var(--s-color-on-surface-variant); text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:inline-block; width:215px; }

/* 消息页 - 私聊框 */
#chat_container { margin:6px 0px 0px 7px; width:calc(100% - 14px); height:calc(100% - 58px); border:solid 1px #777680; border-radius:8px; padding:0px; }
.chat_list { overflow: hidden auto; }
.chat_listItem { width:calc(100% - 8px); display:flex; align-items:center; height:fit-content; overflow:hidden; flex-direction:row; margin:5px 5px; }
.chat_listItem .avatar { width:35px; height:35px; border-radius:100%; margin:10px; }
.chat_listItem .title { font-weight:lighter; font-size:medium;}
#chat_container .dialog { font-size:medium; display:flex; flex-direction:column; }
#chat_container .dialog_titlebar { font-weight:lighter; width:calc(100% - 10px); height:fit-content; padding:3px 5px; background:var(--s-color-surface); border-bottom: 1px solid var(--s-color-surface-variant); }
#chat_container .dialog_content { width:calc(100% - 10px); flex-grow:1; padding:3px 5px; height:calc(100vh - 50px - 70px); }
#chat_container .dialog_msgBubble { width:fit-content; max-width:80%; padding:6px 9px; background:var(--s-color-surface-container-high); border-radius:0 12px 12px 12px; margin:5px 3px; user-select:text;  }
#chat_container .dialog_msgBubble_me { width:fit-content; max-width:80%; padding:6px 9px; background:var(--s-color-surface-container-high); border-radius:12px 0px 12px 12px; margin:5px 3px; margin-left:auto; user-select:text; }

/* 搜索页 */
.search_historyItem { margin:2px 3px; }
.search_pageSwitcher { margin:10px auto; position:relative; left:50%; transform: translateX(-50%); }
.search_typeTab { justify-content:left; }
.search_titlebar { font-size:medium; font-weight:lighter; width:calc(100%); height:fit-content; padding:3px 5px; background:var(--s-color-surface); border-bottom: 1px solid var(--s-color-surface-variant); }
.search_title {margin-top:5px; user-select:text; text-decoration:underline; }
.search_backBtn {}
.keyword { color:var(--s-color-secondary); font-style: normal; }

.space_container { width:100%; height:calc(100vh - 50px); border-radius: 8px; }
#space_list { height:100%; overflow: hidden auto; }

/* 宽度自适应 */
@media screen and (max-width:400px) {
	#player_container{
		overflow: hidden auto;
		display: block;
		justify-content: inherit;
		align-items: inherit;
	}
    .player_row{
		flex-wrap: wrap;
		flex-direction: row;
		height:fit-content!important;
		min-height:1rem;
    }
	#player_videoContainer {
		width: 100%!important;
		height:fit-content;
		max-width: none;
		border-radius: 0px;
	}
	#player_title {
		font-size: 14px;
		width: calc(100vw - 100px);
	}
	#player_descArea, #player_videoList{
		height:calc(100vh - 130px - 100vw * 9 / 16);
	}
	
	
	#live_container{
		overflow: hidden auto;
		display: block;
		justify-content: inherit;
		align-items: inherit;
	}
	#live_videoContainer {
		width: 100%!important;
		height:fit-content;
		max-width: none;
	}


	#dlg_title {
		width: calc(100vw - 200px);
		font-size: 14px;
		display:inline-block;
		overflow: hidden;
	}
}

/* 滚动弹幕动画 */
@keyframes DanMuAnimation {
    from {
        transform: translateX(calc(100vw - 400px));
    }
    to {
        transform: translateX(-500px));
    }
}



/*
	z-index层级：
	104:滚动弹幕，自定义对话框（isTop=true）
	103:播放器
	102:自定义对话框（isTop=false）
	101:刷新按钮
	120:加载球
*/