:root {
	height: 100dvh;
	--bg: #ffffffa6;
	--text: #1f140cdb;
	--background: #ffffffba;
	--background-color:#ffffff;
	--ghost-contrast: rgba(128, 128, 128, 0.062);
	--faint-contrast: #7676763b;
	--faint-contrast-trans: #76767663;
	--mild-contrast: rgba(77, 77, 77, 0.267);
	--comment-contrast: rgba(58, 58, 58, 0.85);
	--good-contrast: rgba(36, 36, 36, 0.445);
	--grid-contrast: rgba(48, 48, 48, 0.14);
	--button-bg: #eeeeee9c;
	--button-text: #1f140cdb;
	--focus-color: #1f140cdb;
	--separator: " – ";
	--success: #ffffffd8;
	--deepprevew: #0000009e;
}
:root .theme-dark {
	--bg:rgba(11, 10, 9, 0.8);
	--text: #ff9900;
	--good-contrast: #ff9900;
	--button-bg-hover: #16141198;
	--button-text: #ff9900;
	--button-bg: #16141100;
	color-scheme: dark;
	--ghost-contrast: rgba(48, 48, 48, 0.16);
	--faint-contrast: rgba(58, 58, 58, 0.86);
	--mild-contrast: rgba(58, 58, 58, 0.267);
	--comment-contrast: rgba(158, 158, 158, 0.65);
	--grid-contrast: rgba(48, 48, 48, 0.48);
	background-color:#0b0a09;
	--focus-color: #ff9900;
	--text-high-contrast: #ff9900;
	--success: #0b0a09ab;
	--warning: #0b0a09ab;
	--link: #ff9900;
}
:root .theme-dark .highlightedText,
:root .theme-dark .file-menu a:hover,
:root .file-menu .theme-dark a:hover {
	color: var(--button-text);
}
:root .theme-dark a {
	color: var(--button-text);
}
:root .theme-dark .dialog-closer {
	background:rgb(78, 25, 0);
}
:root .theme-dark .dialog-icon {
	color:#ff9900;
}
:root .theme-dark .dialog-icon .icon {
	color:#ff9900;
}
:root .theme-dark .dialog-backdrop {
	/*backdrop-filter:blur(1px);*/
  background-color:var(--deepprevew);
}
:root .theme-dark .error-msg {
	color:#b88;
	background-color:#623;
}
/*admin按鈕*/
:root .theme-dark button.toggled {
	text-shadow: 0 0 8px var(--good-contrast);
	color:var(--button-text);
}
:root .theme-light button.toggled {
	text-shadow: 0 0 6px  var(--good-contrast);
	color: var(--button-text);
}

:root .toggled {
	background-color:var(--button-bg);
	text-shadow: 0 0 1px var(--bg);
}


body {
	background-size: contain;
	background-color:var(--bg);
	margin:0;
	font-family:poppins;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
/*body,
button,
select,
input {
font-family: poppins;
font-size:12pt;
}*/
header {
	/*按鈕欄*/
	/*background-image: -webkit-linear-gradient(#1b1a19, #1b1a19 10%, #1b1a19);
	background-image: -o-linear-gradient(#1b1a19, #1b1a19 10%, #1b1a19);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#1b1a19), color-stop(10%, #1b1a19), to(#1b1a19));
	background-image: linear-gradient(#1b1a19, #1b1a19 10%, #1b1a19);
	background-repeat: no-repeat;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0);
	-webkit-filter: none;*/
	filter: none;
	font-size: 14px;
	top: 0;
	padding: .2em;
	backdrop-filter:blur(20px);
	z-index: 3;
	border: 1px solid var(--faint-contrast);
	border-radius: 0.3em;
	position:sticky;
	text-shadow: 0px 0px 2px var(--bg);
  box-shadow: 0px 6px 9px 0px #0000006b;
}
kbd {
	background-color:var(--button-bg);
	border-radius:3px;
	border:1px solid var(--faint-contrast);
	color:var(--button-text);
	display:inline-block;
	font-size:.85em;
	font-weight:700;
	line-height:1;
	padding:2px 4px;
	white-space:nowrap;
	margin-right:.5em;
	box-shadow: 0 0 0px rgba(0, 0, 0, .2), 0 0 rgba(255, 255, 255, .1) inset;
}
#root {
	max-width: 100%;
	margin: auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/*font-size: 14px;*/
}
#root>div {
	max-width: 100%;
	text-align: left;
	/*center會影響文件文字間距*/
	text-overflow: ellipsis;
	box-shadow: 1px 4px 5px 0px #0000004f;
}
.list-wrapper {
	/*整個文件列表外框架*/
	max-width: 100%;
	min-height: 99vh;
	background-color: var(--bg);
	border: 1px solid var(--ghost-contrast);
	border-radius: 0.5em;
	padding: 0.2em;
	margin:0vh 0vw 0vh 0vw;
	display:flex;
	flex-direction:column;
}
.breadcrumb {
	padding:.2em .6em .2em;
	line-height:1.8em;
	border-radius:.3em;
	color:var(--button-text);
	/*日間home按鈕*/
	background-color: var(--button-bg);
	border: 1px solid var(--faint-contrast);
	margin: 1px 2px auto;
	margin-right:0.01em;
	/*路徑按鈕間隙*/
	display: inline-block;
	min-width: 10px;
	text-align: center;
	text-shadow: 0px 0px 2px var(--bg);
	word-break: break-word;
	transition: all 0.25s ease;
	/*backdrop-filter:blur(1px);模糊*/
	z-index: 10;
	height: 25px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 8em;
}
/*.breadcrumb:nth-child(-n+3) .icon { */
.breadcrumb:nth-child(-n+3) {
	/*home鍵 返回鍵*/
	padding:.2em;
	text-decoration: none;
	border-radius: .3em;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid var(--faint-contrast);
	transition: all 0.25s ease;
}
.breadcrumb:hover {
	background-color: var(--button-bg-hover);
	text-shadow: 0px 0px 1px var(--bg);
}
ul.dir {
	/*小播放按鈕 時間日期 標簽*/
	flex: 1;
	padding: 1px;
	overflow: hidden;
	margin: auto;
	min-width: 100%;
	max-width: 100%;
	font-size: 14px;
	/*text-shadow: 0px 0px 2px var(--bg);*/;
}
ul.dir li {
	/*小圖標列表*/
	display: block;
	min-height:1.8em;
	list-style-type: none;
	padding: .2em;
	/*列表上下間距*/
	border-bottom: 0.5px solid var(--faint-contrast);
	/*下劃綫*/;
}
ul.dir li:nth-of-type(odd) {
	background-color:var(--ghost-contrast);
}
ul.dir li input[type=checkbox] {
	z-index: 1;
	margin-right:0.8em;
}
@media (hover: none) {
	ul.dir li .link-wrapper .popup-menu-button {
		display:none;
	}
}
@media (hover: hover) {
	ul.dir li .link-wrapper:not(:hover) .popup-menu-button {
		display:none;
	}
	ul.dir li .link-wrapper:hover {
		padding:1em;
		margin:-1em;
	}
}
ul.dir li .link-wrapper a:last-of-type {
	/*列表顯示的文件名*/
	overflow: hidden;
	/*white-space: nowrap;*/
	text-overflow: ellipsis;
	/*以上超出則隱藏*/
	word-break:break-word;
	padding-right:.3em;
}
ul.dir li .link-wrapper a .icon {
	margin-right:.3em;
	display:inline-block;
	text-align:center;
}
ul.dir li .link-wrapper a img.icon {
	vertical-align:bottom;
	position:relative;
	align-items:center;
	/*後加*/
	top:1px;
}
ul.dir li .link-wrapper a:hover {
	text-decoration:underline;
}
ul.dir li .entry-panel {
	float:right;
	padding-top:.3em;
	display:flex;
	align-items:center;
}
ul.dir li .entry-panel .file-menu-button {
	margin:-3px 0 -3px .4em;
}
ul.dir li .entry-panel .entry-details {
	color:var(--good-contrast);
	/*附加时间内容颜色*/
	font-size: 80%;
	margin-left: 2px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
ul.dir li .entry-panel .entry-details .entry-size-unit {
	margin-left:.3em;
}
ul.dir li>div:last-of-type {
	clear:both;
}
ul.dir li.page-separator {
	margin-top:1.25em;
	position:relative;
}
ul.dir li.page-separator:before {
	content:attr(label);
	position:absolute;
	top:-1.65em;
	font-size:smaller;
	margin-left:calc(50% - 1em);
	opacity:.9;
  animation: blink 0.8s step-start 0s infinite;
}
#paging button.toggled {
	border: 1px solid var(--good-contrast);
 border-radius: 0.4em;
animation: blink 1.6s infinite;
}
.entry-comment {
	/*小標簽*/
	font-size:10px;
	color: var(--comment-contrast);
}
.entry-comment:after {
	/*font-family:serif;*/
	line-height:1px;
	position:relative;
}
.entry-comment:before {
	content:"“";
	margin-left:.5em;
	margin-right:.1em;
	top:.2em;
}
.entry-comment:after {
	content:"”";
	top:.2em;
	margin-left:.1em;
}
#menu-bar {
	margin-bottom:.1em;/*按鈕上下行間距*/
	display:flex;
	justify-content:space-evenly;
	flex-wrap:wrap;
}
#menu-bar>* {
	flex:1;
	margin:.1em;
}
#menu-bar>*:first-child {
	margin-left:0;
}
#menu-bar>*:last-child {
	margin-right:0;
}
#menu-bar button {
	padding:min(1vh,.5em) 0;
}
#searched {
	margin:.2em;
}
#user-panel {
	display:flex;
	flex-direction:column;
	gap:1em;
}
#user-panel a>button {
	width:100%;
}
button .label {
	/*font-family:poppins;*/
	cursor:inherit;
	margin-left:.4em;
}
button .icon {
	margin: -.1em 0 auto;
}

button#user-button.toggled .icon {
	animation: blink 1.6s step-start 0s infinite;
}
button#select-button.toggled .icon {
	animation: blink 1s step-start 0s infinite;
}

.dialog-backdrop
.working {
	font-size:5em;
	animation:1s fade-in;
}
.dialog-content {
	padding:.8em /*上傳框等各種*/;
}
.dialog-alert .dialog-content {
	text-align:center;
}
.dialog-alert .dialog-content p {
	text-align:left;
	display:inline-block;
}
.dialog {
	min-width:11em;
	font-size: 80%;
	/*--color: var(--button-bg)*/
	background-color:var(--bg);
}
.dialog-icon .icon {
	margin-left:-1px;
	font-size:95%;
	margin-top:.2em;
	border-radius:.6em 0;
}
/*下頁面導航按鈕*/
#paging {
	/* align-items: left;
	overflow: auto;
	max-width: 80%;*/
	position:sticky;
	bottom:0;
	display:flex;
	gap:.1em;
	background-color: var(--bg);
	padding:0 .1em .1em;
}
#paging>button {
	z-index:1;
}
#paging button {
    box-shadow: 0 0 .3em .3em rgba(0, 0, 0, .0);
}
#paging #paging-middle {
	padding:0 .4em;
	margin:0 -.3em;
	display:flex;
	gap:.1em;
	flex:1;
	overflow-x:auto;
}
#paging #paging-middle>button {
	/*font-family: poppins;*/
	flex:1;
	padding-top:0;
	padding-bottom:0;
}
#paging button {
	background:var(--button-bg);
	text-align:center;
	white-space:nowrap;
	padding:.1em;
}
.upload-toolbar {
	position:sticky;
	top:-4px;
}
.upload-progress:before {
	content:var(--separator);
}
.entry-size:after {
	content:var(--separator);
}
.upload-progress {
	min-width:4em;
	display:inline-block;
	margin-left:.5em;
}
.upload-list {
	font-size: 12px;
	margin-top:.5em;
}
.upload-list td:nth-child(1) {
	width:0;
}
.upload-list td:nth-child(2) {
	text-align:right;
	width:0;
	white-space:nowrap;
	padding-left:.5em;
}
.upload-list td:nth-child(3) {
	padding:.2em .5em;
	word-break:break-word;
}
.nowrap {
	white-space:nowrap;
}
.dialog-login form {
	display:flex;
	flex-direction:column;
	gap:1.2em;
}
.dialog-login label {
	display:block;
	margin-bottom:.5em;
	margin-left:.1em;
}
.miss-perm {
	margin:0 .3em;
}
.popup-menu-button {
	background: none;
	border: none;
	outline: none;
	border-radius: .3em;
	font-size:.8em;
	padding:.2em .6em .3em .3em;
	position:absolute;
	opacity:.8;
	white-space:nowrap;
}
.popup-menu-button:hover {
	opacity:1;
}
.file-dialog .dialog {
	min-width:13em;
}
.file-dialog-properties {
	word-break:break-word;
	line-height:1.5em;
	margin:0;
}
.file-dialog-properties dt {
	font-weight:700;
}
.file-dialog-properties dd {
	margin-left:1.5em;
}
.file-menu {
	/*文件詳細頁面*/
	z-index: 10;
	margin-top:1em;
	padding-top:1em;
	border-top:1px solid var(--faint-contrast);
	display:flex;
	flex-direction:column;
	gap:.4em 1em;
	justify-content:space-between;
}
.file-menu a {
	z-index: 10;
	font-size: 15px;
	display:flex;
	align-items:center;
	border: 1px solid var(--faint-contrast);
  border-radius: 0.4em;
  height: 2.2em;
  min-width: 12em;
}
.file-menu a label {
	margin-top:.1em;
}
.file-menu a label small {
	display:block;
}
.file-menu a .icon {
	margin-right:.5em;
}
.unauthorized {
	text-align:center;
}
#clipBar {/*剪切欄*/
	position:sticky;
	bottom:0;
	background:var(--bg);
	display:flex;
	align-items:center;
	gap:.5em;
	z-index: 3;
	backdrop-filter: blur(2px);
}
.tiles-mode {
	/*大圖標間距*/
	max-width:none;
	--tile-size: 2;
	--name-lines: 3;
  --name-height: calc(4.8em + var(--tile-size) * 1.6em + 1em * var(--name-lines));
  --tile-width: calc(5em + 1.4em * var(--tile-size));
}
.tiles-mode ul.dir {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(var(--tile-width),1fr));
	grid-auto-rows:calc(var(--name-height) + 1.3em);
	gap:0 2px;
	row-gap:2px;
}
.tiles-mode ul.dir li {
	text-align:center;
	position:relative;
	display:flex;
	flex-direction:column;
	/*border-bottom:1px solid #27272a;*/
	overflow-x:clip;
	padding:.1em 0 0;
	border: 1px solid var(--grid-contrast);/*縮略圖框框*/
	border-radius: 0.4em;
	justify-content: space-evenly;
}
.tiles-mode ul.dir li .link-wrapper:not(:hover) {
	max-height:var(--name-height);
	display:block;
	display:-webkit-box;
	overflow:hidden;
	-webkit-line-clamp:calc(var(--name-lines) + 1);/*文件名行數？*/
	-webkit-box-orient:vertical;
}
.tiles-mode ul.dir li .link-wrapper a:last-of-type {
	padding:0;
}
.tiles-mode ul.dir li .link-wrapper a span {
	display:block;
}
.tiles-mode ul.dir li .link-wrapper a .icon
.icon {
	font-size:calc(0.7rem + .7rem * var(--tile-size));
	/*縮略圖占比*/
	height: 1.5em;
}
.tiles-mode ul.dir li .link-wrapper a img.icon {
	width:100%;
	height:2.9em;/*縮略圖占比*/
	object-fit: cover;
	padding:0em;/*拉滿裁切*/
}
.tiles-mode ul.dir li .link-wrapper a .icon {
	font-size:4rem;
	display:block;
	margin:auto;
}
.tiles-mode ul.dir li .link-wrapper:hover {
	overflow:visible;
	display:block;
	z-index:1;
}
.tiles-mode ul.dir li .link-wrapper:hover .icon:before {
	text-decoration:none;
}
.tiles-mode ul.dir li .link-wrapper:hover {
	padding:0;
	margin:0;
}
/*.tiles-mode ul.dir li:nth-of-type(odd):not(:hover) {
background-color:#18181b
}*/
.tiles-mode ul.dir li:hover {/*去掉縮略圖hover的背景*/
    --bg: var(--bg);
}
.tiles-mode ul.dir li .entry-panel {
	justify-content:center;
	font-size:10pt;
}
.tiles-mode ul.dir li {
	font-size:100%;
}
.tiles-mode ul.dir li.page-separator:before {
	content:"";
}
.tiles-mode ul.dir li input[type=checkbox] {
	margin:0;
	position:absolute;
	top:.3em;
	right:1em;
}
.tiles-mode ul.dir li .link-wrapper a {
	display:inline;
}
.tiles-mode ul.dir li:hover {
	/*--bg: #1717171e;*/
	background:var(--bg);
}
.tiles-mode ul.dir li:hover .link-wrapper,
.tiles-mode ul.dir li:hover .entry-panel {
	z-index:0;
	background:var(--bg);
}
.tiles-mode ul.dir li:hover input[type=checkbox] {
	z-index:3;
}
.tiles-mode ul.dir li:hover .entry-panel {
	padding-bottom:.3em;
}
.tiles-mode .entry-size:after {
	content:none;
}
.tiles-mode .entry-ts {
	display:none;
}
.tiles-mode .popup-menu-button {
	position:absolute;
	top:0;
	left:0;
}
.tiles-mode #filter-bar {
	margin-bottom:1em;
}
.tiles-mode #paging {
	z-index:1;
}
#root .file-show {
	font-size: 10px;
	/*控制預覽標題文字*/
	--nav-size: min(25vh, 25vw, 13em)/* --nav-size: min(25vh, 25vw)*/;
		backdrop-filter:blur(2px);
}
.fullWidth {
	.showing-container, .showing {
		width: 100%;
	}
}
#root .file-show .showing-container {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
backdrop-filter:blur(4px);
background-color:var(--deepprevew);
}
#root .file-show .showing {
	/*留邊縫修正max-width:calc(100% - var(--nav-size) * 0.1);*/
	z-index: 0;
	max-width:100%;
	max-height:100%;
}
#root .file-show audio.showing {
	min-width:60%;
}
#root .file-show audio.showing,
#root .file-show img.showing {
	max-width:100%;
}
#root .file-show .main {
	flex:1;
	position:relative;
	max-height:100%;
	overflow:hidden;
}
#root .file-show .freeY .main,
#root .file-show .fullWidth .main {
	overflow-y:auto;
}
#root .file-show .freeY .showing,
#root .file-show .fullWidth .showing {
	max-height:initial;
	margin:auto;
}
#root .file-show .freeY .showing-container,
#root .file-show .fullWidth .showing-container {
	overflow:auto;
	align-items:flex-start;
}
#root .file-show .fullWidth .showing-container,
#root .file-show .fullWidth .showing {
	width:100%;
}
#root .file-show .nav {
	position:absolute;
	width:1.0em;
	font-size:4em;
	/*font-size:var(--nav-size);*/
	cursor:pointer;
	opacity:0.0;
	color: rgb(80, 80, 80);
	user-select:none;
	transition:opacity .5s;
	z-index:10;
}
#root .file-show .nav:hover {
	opacity:.3;
	z-index:10;
}
#root .file-show .nav
.nav-hidden {
	opacity:.00;
	z-index:10;
}
#root .file-show .bar {
	padding:.2em;
	opacity:.8;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
	gap:.2em .2em;
	backdrop-filter:blur(2px);
background-color:var(--bg);

}
#root .file-show .bar .entry-ts {
	display:inherit;
	font-size: 8px;控制預覽標題文字;
}
#root .file-show .bar .entry-size:after {
	display:none;
}
.file-show-help kbd {
	margin:.5em;
}
.file-show-help kbd:first-of-type {
	margin-top:1em;
}
#root .file-show .meta-tags {
    position: relative;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    text-shadow: 0 0 black;
    color: var(--link);
}
button {
	/*上工具欄*/
	background-color: var(--button-bg);
	color: var(--button-text);
	padding: .5em 1em;
	text-decoration: none;
	border-radius: .3em;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid var(--faint-contrast);
	text-shadow: 0px 0px 2px var(--bg);
	font-size: 14px;
	font-weight: bold;
	/*backdrop-filter:blur(1px);模糊*/
	transition: all 0.25s ease;

}
button:hover {
	background-color: var(--button-text);
	/*color: var(--button-bg-hover);*/
	color: var(--bg);
	text-shadow: 0px 0px 2px var(--bg);
	outline:1px solid var(--button-text);
}
button[disabled] {
	/*border: 1px solid var(--faint-contrast);*/
	color:var(--faint-contrast);
	background-color: var(--button-bg);
	border-inline: #f0f8ff00;
}
button.toggled {
	/*color:#7777772c;圖標活動顔色例如admin*/
	color: var(--button-text);
}
button:focus-visible,
.breadcrumb:focus-visible {
	outline:1px solid var(--button-text);
}
a {
	/*圖標文字*/
	text-decoration: none;
	color: var(--button-text);
	font-size: 14px;
	vertical-align: middle;
}
a>button {
	width:100%;
	height:100%;
}
input:focus-visible,
select:focus-visible,
ul a:focus-visible {
	border-radius:.3em;
	border-color:transparent;
	outline:1px solid var(--button-text);
}
@media (min-width: 1900px) {
	#player {
		position: fixed;
		top: auto;
		bottom: 2px;
		left: 2px;
		padding: .5%;
		min-width: calc((100vw - 800px) / 1.2);
		box-sizing: border-box;
		background: var(--bg);
		border-radius: 8px;
		border: 1px solid var(--faint-contrast);
		z-index: 3;
	}
}
@media (max-width: 42em) {
	.breadcrumb .icon {
		font-size: 18px;
	}
}
#player-title {
	/*color: var(--button-text);*/
	padding: .5em 1em;
	text-decoration: none;
	border-radius: .5em;
	vertical-align: middle;
	text-shadow: 0px 0px 2px var(--bg);
	font-size: 90%;
	font-weight: bold;
}
body,
input {
	color:var(--text);
}
code {
	font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;
}
input:not([type=checkbox],
[type=range]),
select,
textarea {
	/*輸入框選項框内框*/
	padding:.3em .4em;
	border-radius:.4em;
	background:var(--button-bg);
	border-color:var(--good-contrast);
	color:var(--good-contrast);
	max-width:100%;
	font-size: 14px;
	box-sizing:border-box;
	width:100%;
}
input[type=range] {
	width:calc(100% - 1px);
}
input[type=checkbox] {
	transform:scale(1.7);
	accent-color:var(--button-bg);
}
textarea {
	font-size:14pt;
}
label input[type=checkbox] {
	margin-right:.8em;
}
select {
	text-align:center;
}
.hidden {
	display:none!important;
}
[class^=fa-]:before,
[class*=" fa-"]:before {
	margin:0;
}
.icon {
	font-size:1.2em;
	height:1.4em;/*1.2圖標壓迫名字*/
	width:1.4em;
	display:inline-block;
	text-align:center;
}


#thumbnailsPreview {/*去掉右下角預覽*/
    position: fixed;
    bottom: 0;
    right: 0;
    height: 0px;
    width: 0px;
}

img.file-icon {
	height:1em;
}
.file-icon {
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	vertical-align:text-bottom;
}
.icon
.mirror:before {
	transform:scaleX(-1);
}


.icon-button,
ul.dir li .entry-panel .file-menu-button {
	/*文件菜單小按鈕*/
	padding:.3em;
	margin-left:.1em;
	height: fit-content;
	vertical-align:middle;
}
button.small {
	padding: .5em;
	height: 30px;
}
.error-msg {
	background-color:#faa;
	color:#833;
	padding:.5em 1em;
}
.hide-back,
.upload-toolbar,
header {
	background-color:var(--bg);
}
@keyframes blink {
	0% {
		opacity:1;
	}
	50% {
		opacity:.5;
	}
}
@keyframes spin {
	to {
		transform:rotate(360deg);
	}
}
@keyframes fade-in {
	0% {
		opacity:0.4;
	}
	to {
		opacity:1;
	}
}

.spinner,.icon.spinner:before {
	animation:1.5s spin infinite linear;
	display:inline-flex;
	justify-content:center;
	align-items:center;
}
#folder-stats,
#filter-bar>span {
	font-size:80%;
	padding: .1em;
}
#folder-stats {
	margin-left:.5em;
	line-height:2em;
	float:right;
}
#folder-stats .icon {
	margin-right:.3em;
}
#filter {
	flex:1;
	box-sizing:border-box;
}
#filter-bar {
	display:flex;
	align-items:center;
	gap:.8em;
	margin:.2em 0 0;
	padding:2px 0 1px 3px;
	height:1.8em;
}
#filter-bar input[type=checkbox] {
	margin-top:.3em;
}
#filter-bar span:empty {
	display:none;
}
:root .theme-dark #root .dialog-backdrop {
    background: var(--deepprevew);
}
.dialog-backdrop {
	position:fixed;
	inset:0;
	background:var(--button-bg);
	/*backdrop-filter: blur(2px);*/
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:1000;
}
.dialog {
	padding:max(.5em,1vw,2vh);
	padding-top:0;
	border: 1px solid var(--good-contrast);
	border-radius:0.4em;
	position:relative;
	margin:0 3vw;
	overflow:hidden;
	max-height:calc(100vh - 2em);
	display:flex;
	flex-direction:column;
	justify-content:center;
	overflow: visible;
	font-size: 90%;
	z-index:10;
	box-shadow: 4px 6px 5px 0px #00000060;
}
.dialog-icon {
	color:var(--button-text);
	background-color:var(--color);
	position:absolute;
	top:0px;
	width:2em;
	height:1.8em;
	text-align:center;
	border-radius:.4em 0;
}
.dialog-icon-text {
	display:flex;
	align-items:center;
	justify-content:center;
}
.dialog-title {
	font-size:80%;
	margin:.3em 0;
	padding:0 .5em;
	min-height:1.2em;
}
.dialog-closer~
.dialog-title {
	margin-right:2em;
}
.dialog-type~
.dialog-title {
	margin-left:2em;
}
.dialog-icon~
.dialog-title {
	text-align:center;
}
.dialog-closer {
	border: none;
	border-radius:0 .3em;
	right:0;
	padding:0;
	background-color:rgba(139, 3, 3, 0.521);
}
.dialog-icon~
.dialog-content {
	margin-top:1em;
}
.dialog-type {
	left:0;
	top:0;
	overflow:hidden;
	opacity:.7;
}
.dialog-content {
	overflow:auto;
	max-height:calc(100vh - 4.5em);
}
.dialog-content p {
	white-space:pre-wrap;
	margin:.5em 0;
}
.dialog-confirm .dialog-content button {
	margin-top:1em;
}
.dialog-alert-info {
	--color: #282;
}
.dialog-alert-warning {
	--color: #c91;
}
.dialog-alert-error {
	--color: #822;
}
input[type=checkbox]:focus {
	outline: 1px dotted var(--button-text);
	outline-offset: -2px;
}
input[type=checkbox]:checked {
	color: var(--button-text);
	outline: 1px dotted var(--button-text);
	outline-offset: -2px;
}


.file-dialog-properties {
	word-break: break-word;
	line-height: 1.5em;
	margin: 0;
	font-size: 14px;
}
/*播放器内標題*/
@supports (width: min(1px,2px)) {
	#root .file-show {
		--nav-size: min(25vh, 25vw, 13em);
		font-size: 12px;
/*color: var(--mild-contrast);		fixtemp*/
		
	}

}
/*
#preview-content {
background: #18181b;
border: 19px solid #27272a;
padding: 2em 2em;
border-radius: 0.5em;
}*/

.toasts {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  /*padding: 0.3em;*/
  gap: 0.3em;
  z-index: 1001;
  max-width: 100%; /* 确保容器不超过视口宽度 */
}

.toast {
  background-color: var(--bg);
  color: var(--button-text);
  transition: all 0.2s ease-in;
  display: flex;
  align-items: center;
  padding: 0.6em;
  border: 1px solid var(--button-text);
  border-radius: 0.4em;
  box-shadow: 0 0 0.3em rgba(136, 136, 136, 0);
  backdrop-filter: blur(2px);
  font-size: 90%;
  transform: translateX(0);
  /* 新增：防止内容过长溢出 */
  max-width: 350px; /* 限制最大宽度（可调整） */
  width: auto;      /* 自动宽度，但不超过 max-width */
  word-break: break-word; /* 长单词或URL强制换行 */
  overflow-wrap: break-word; /* 更智能的换行处理 */
}

.toast.before {
  transform: translateX(100%);
}

.toast.after {
  height: 0;
  padding: 0;
  margin-top: -0.6em;
  opacity: 0;
  transition: all 0.2s ease-in;
}

body  {
  background: 
    radial-gradient(circle at 1px 1px, rgba(150, 150, 150, 0.15) 1px, transparent 1px),
    white;
  background-size: 8px 8px;
}


* {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
}