.xyrj-main-layout {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.nav__item a:not(.active):hover {
  color: #0ba360 !important;
}
.nav__item a.active:hover {
  color: #fff !important;
}

.xy-oj {
    position: relative;
    width: 100%;
}
.box {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 20px 40px rgba(103, 118, 128, 0.03);
    padding: 1.875rem;
    position: relative;
    transition: box-shadow .3s 
    ease-in-out;
}
@media (min-width: 992px) {
    .xyrj-left {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
		padding-right: 15px;
    }
    .xyrj-right {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
}

.xyrj-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}

.xyrj-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav__item {
    user-select: none;
    display: block;
    height: 6.25rem;
    margin-bottom: 1rem;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.nav__item a.active {
    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
    box-shadow: inset -0.25rem -0.25rem 0.3125rem rgba(0, 0, 0, 0.1), inset 0.25rem 0.25rem 0.3125rem rgba(255, 255, 255, 0.23);
    color: #fff;
}

.nav__item a {
    background-color: #F7F9FA;
    border-radius: 1.25rem;
    color: #5E6E80;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    text-decoration: none;
    transition: all 0s;
}

.nav__item a i {
    display: block;
    font-size: 2.25rem;    
    margin-top: 0.25rem;   
    margin-bottom: 0.5rem;  
}

.nav__item a > * {
    min-width: 0;
}

.xyrjbox-content {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.875rem;
    position: relative;
    transition: box-shadow .3s ease-in-out;
}

.xyrjbox-content::after {
    content: "";
    display: table;
    clear: both;
}

@media only screen and (max-width: 1200px) {
    .xyrjsidebar {
        padding: 1.5rem;
    }

    .nav__item {
        height: 5.125rem;
    }

    .nav__item a {
        border-radius: 1rem;
        font-size: 0.75rem;
    }

    .nav__item a i {
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
    }
}

@media only screen and (max-width: 991px) {
    .xyrjsidebar {
        border-bottom: 1px solid #EBF0F2;
        border-radius: 20px 20px 0 0;
        padding: 1.875rem;
    }

    .xyrj-nav {
        justify-content: space-between;
    }

    .nav__item {
        margin-bottom: 0;
        width: calc(20% - 1rem);
    }
	
    .xyrjbox-content {
        border-radius: 0 0 20px 20px;
    }
}

@media only screen and (max-width: 768px) {
    .nav__item {
        width: calc(20% - .5rem);
    }

    .nav__item a {
        font-size: 0.6875rem;
    }

    .nav__item a i {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 580px) {
	.nav__item a.active:hover {
	  	color: #0ba360 !important;
	}
    .xyrjsidebar {
        border-bottom: 0;
        border-radius: 0;
        box-shadow: 0px 1px 10px rgba(103, 118, 128, 0.2);
        padding: 0.5rem 0.9375rem;
        position: fixed;
        top: 50px;
        left: 0;
        width: 100%;
        z-index: 10;
    }
    
    .box {
        padding: 0rem 1rem 0rem 1rem;
    }

    .xyrj-nav {
		padding: 0.5rem;
        justify-content: center;
    }

    .nav__item {
        height: auto;
        width: calc(20% - 0rem);
    }

    .nav__item a.active {
        background-image: none;
        box-shadow: none;
        color: #039c80;
    }

    .nav__item a i {
        font-size: 1.0625rem;
        margin-top: 0.375rem;
    }

	.xyrj-right {
        padding-top: 60px;
    }
	
	.xyrjbox-content {
        border-radius: 13.3333333333px;
    }
}


.title-2fa {
    position: relative;
    color: #3B4B5E;
    font-size: 1.5rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.class-2fa, hr {
    float: left;
    width: 100%;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.div-2fa {
    margin-bottom: 0.65rem;
    font-size: 0.88rem;
}

.input-2fa {
    background-color: #F7F9FA;
    border: 0px;
    border-radius: 0.55rem;
    box-shadow: none;
    color: #5E6E80;
    padding: 0.875rem 1.375rem 0.8125rem;
    outline: none !important;
    position: relative;
    width: 100%;
    box-shadow: inset 0px 0px 1px 1px rgb(50 174 77);
    font-size: 0.88rem;
    font-weight: 600;
}

.btn-get {
    background-image: linear-gradient(142.17deg, #009688 6.66%, #00d708de 91.48%);
    box-shadow: inset -0.25rem -0.25rem 0.3125rem rgba(0, 0, 0, 0.1), inset 0.25rem 0.25rem 0.3125rem rgba(255, 255, 255, 0.23);
    border-radius: 0.35rem;
    border: 0;
    color: #fff;
    cursor: pointer;
    /*font-size: 1rem;*/
    font-weight: 600;
    padding: 0.50rem 0.88rem;
}

.div-2fa>span {
    margin-left: 0.55rem;
    font-weight: 600;
}
.message-class {
    font-weight: 300 !important;
}

.btn-qr {
    float: right;
    border: 0;
    background-image: linear-gradient(142.17deg, #009688 6.66%, #00d708de 91.48%);
    box-shadow: inset -0.25rem -0.25rem 0.3125rem rgba(0, 0, 0, 0.1), inset 0.25rem 0.25rem 0.3125rem rgba(255, 255, 255, 0.23);
    border-radius: 0.25rem;
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.30rem 0.80rem;
}
.btn-get:hover, .btn-qr:hover {
    background: none;
    color: #000;
    box-shadow: inset 0px 0px 1px 1px rgb(50 174 77);
}

.xyrj-footer {
    color: #8D99A6;
    font-size: 0.875rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}

.del_2fakeys {
    background-image: linear-gradient(142.17deg, #ff6767 6.66%, #ae4c1ade 91.48%) !important;
}
.del_2fakeys:hover {
    box-shadow: inset 0px 0px 1px 1px rgb(249 78 78);
    background-image: none !important;
    color: red;
}

button:not(:disabled) {
    cursor: pointer;
}
textarea {
    background-color: #F7F9FA;
    border: 0px;
    border-radius: 0.55rem;
    padding: 2px 4px;
    box-shadow: none;
    color: #5E6E80;
    width: 100%;
    height: 120px !important;
    box-shadow: inset 0px 0px 1px 1px rgb(50 174 77);
    outline: none !important;
}
textarea {
    overflow: auto;
    resize: vertical;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
* {
    word-break: break-all;
}
*, ::before, ::after {
    background-repeat: no-repeat;
    box-sizing: border-box;
}
#notification-container { position: fixed; top: 20px; right: 20px; z-index: 9999;}
.notification { background-color: #030303bf; color: #fff; padding: 15px; border-radius: 4px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateX(100%); transition: opacity 0.5s, transform 0.5s;}
.notification.show { opacity: 1; transform: translateX(0);}

/* --- START: 原始新增样式 --- */
.tool-panel {
    display: none;
    width: 100%;
    float: left;
}
.tool-panel.active {
    display: block;
}
.qr-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    width: 100%;
    /* float: left; (不再需要，因为父级不是 float) */
    margin-top: 1rem;
}
.div-2fa select.input-2fa {
    height: calc(1.5em + 1.75rem + 2px); 
    padding: 0.875rem 1.375rem 0.8125rem;
}
#qr-code-output {
    width: 276px;
    height: 276px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F7F9FA;
}
/* --- START: 新增样式 for API Image --- */
#qr-code-output-img {
    max-width: 100%;
    height: auto;
    display: none; /* 初始隐藏 */
}
/* --- END: 新增样式 for API Image --- */
.title-p, .placeholder-p {
	color: #5E6E80;
	width: 100%;
    float: left;
    /*font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;*/
}
/* --- END: 原始新增样式 --- */

/* --- START: 布局修改 - QR 双列布局 --- */
.qr-layout-wrapper::after {
    content: "";
    display: table;
    clear: both;
}
.qr-settings-column {
    float: left;
    width: 60%;
    padding-right: 20px;
    box-sizing: border-box;
}
.qr-display-column {
    float: right;
    width: 40%;
    padding-left: 20px;
    box-sizing: border-box;
}
/* --- END: 布局修改 --- */

/* --- START: 文本工具按钮样式 --- */
.text-tool-buttons {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap; /* 允许按钮换行 */
    /*gap: 10px;  按钮之间的间距 */
}
/* 继承 .btn-get 样式，但用于更小的按钮 */
.btn-get-sm {
    background-image: linear-gradient(142.17deg, #009688 6.66%, #00d708de 91.48%);
    box-shadow: inset -0.25rem -0.25rem 0.3125rem rgba(0, 0, 0, 0.1), inset 0.25rem 0.25rem 0.3125rem rgba(255, 255, 255, 0.23);
    border-radius: 0.35rem;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
	margin: 0 5px 5px 0;
    padding: 0.40rem 0.75rem; /* 稍微小一点的 padding */
    font-size: 0.88rem; /* 字体大小与 .div-2fa 一致 */
}
.btn-get-sm:hover {
    background: none;
    color: #000;
    box-shadow: inset 0px 0px 1px 1px rgb(50 174 77);
}
.del_2fakeys_sm {
    background-image: linear-gradient(142.17deg, #ff6767 6.66%, #ae4c1ade 91.48%) !important;
}
.del_2fakeys_sm:hover {
    box-shadow: inset 0px 0px 1px 1px rgb(249 78 78);
    background-image: none !important;
    color: red;
}

/* 自动复制设置的样式 */
.div-2fa-flex {
    margin-bottom: 0.65rem;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.div-2fa-flex label {
    font-weight: 600;
    margin: 0;
}
.div-2fa-flex select.input-2fa {
    width: auto; /* 自动宽度 */
    flex-grow: 1;
    min-width: 100px;
}
/* --- END: 文本工具按钮样式 --- */

/* --- START: 为单选框添加新样式 --- */
.radio-group {
    display: flex;
    align-items: center;
    gap: 5px;
}
.radio-group input[type="radio"] {
    /* 隐藏默认单选框 */
    appearance: none;
    -webkit-appearance: none;
    width: 1.15em; /* 调整大小 */
    height: 1.15em;
    border: 2px solid #5E6E80;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    top: 2px; /* 微调垂直对齐 */
}
.radio-group input[type="radio"]:checked {
    border-color: #0ba360;
    background-color: #fff;
}
/* 创建内部圆点 */
.radio-group input[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 0.65em; /* 圆点大小 */
    height: 0.65em;
    background-color: #0ba360;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.radio-group label {
    font-weight: normal !important; /* 覆盖父级 .div-2fa 的加粗 */
    margin: 0;
    padding-right: 10px;
    cursor: pointer;
}
/* --- END: 为单选框添加新样式 --- */


 /* --- START: 新增图标库样式 --- */
		 @media (max-width: 990px) {
			.main-layout {
				margin: -10px 10px;
				max-width: 870px;
			}
		}
        .breadcrumb a {
            color: #888; /* 设置面包屑导航中链接的颜色为灰色 */
        }
        .breadcrumb a:hover {
            color: #333; /* (可选) 设置鼠标悬停时链接的颜色为深灰色 */
        }

        .comment-form {
            margin-top: 20px;
        }
        .comment-form textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; 
            min-height: 100px;
        }
        .comment-form .form-submit {
            margin-top: 10px;
        }
        .comment-form .submit {
            background-color: #333;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .comment-form .submit:hover {
            background-color: #555;
        }
        .comment-list {
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }
        .comment-item {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
        }
        .comment-item:last-child {
            border-bottom: none;
        }
        .comment-body p {
            margin: 0 0 10px;
        }
        .comment-meta {
            font-size: 12px;
            color: #888;
        }
        .comment-contact {
            margin-left: 10px;
            color: #555;
            font-style: italic;
        }
        
        .comment-form p {
             margin: 10px 0;
        }
        .comment-form label {
            margin-right: 5px;
            font-size: 14px;
            color: #555;
            vertical-align: middle; 
        }

        .comment-form-bottom-row {
            display: flex;
            flex-wrap: wrap; 
            align-items: center; 
            justify-content: flex-start; 
            margin-top: 10px;
        }

        .comment-form-bottom-row p {
            margin: 5px 15px 5px 0; 
        }
        .comment-form-bottom-row .form-submit {
            margin-right: 0; 
        }

        #contact-type,
        #contact-value,
        #captcha-input,
        .comment-form-bottom-row .submit {
            height: 36px; 
            padding-top: 5px;
            padding-bottom: 5px;
            box-sizing: border-box; 
            vertical-align: middle;
        }
        
        #contact-type {
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        #contact-value {
            width: 130px; 
            margin-left: 5px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        
        #captcha-input {
            width: 60px; /* 验证码输入框宽度 */
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        
        .comment-form-bottom-row .submit {

            padding-left: 20px;
            padding-right: 20px;
        }

/* ========== START: 图标展示 ========== */
       .xyrj-page.is-active {
			display: block;
			animation: fadeIn .3s;
		}
		.page-header {
			position: relative;
			text-align: center;
			margin: 15px 0 15px 0; /* 移到 wrapper 上 */
		}
		/* 搜索框样式 */
		.search-wrapper {
			position: relative;
			margin: 15px 0 15px 0; /* 移到 wrapper 上 */
		}
		
		#icon-search-input {
			width: 100%;
			padding: 8px 30px 8px 10px; /* 右侧留出空间给 'x' */
			font-size: 14px;
			border: 1px solid #ddd;
			border-radius: 4px;
			box-sizing: border-box;
		}
		
		#clear-search-btn {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			color: #aaa;
			cursor: pointer;
			display: none; /* 默认隐藏 */
		}
		#clear-search-btn:hover {
			color: #333;
		}
		
		/* 网格布局 */
		#icon-grid {
			display: grid;
			/* 调整列宽以适应更多图标，并减少间距 */
			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
			gap: 10px; /* 减小网格间距 */
		}
		
		.icon-item-group {
			border: 1px solid #eee;
			border-radius: 5px;
			transition: all 0.2s ease; /* 动画更快 */
			background: #fff;
			overflow: hidden; /* 防止内容溢出 */
		}
		.icon-item-group:hover {
			box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* 阴影更轻 */
			transform: translateY(-1px); /* 悬停效果更轻 */
		}
		
		.icon-item-group-title {
			padding: 8px 10px; /* 减小内边距 */
			font-size: 14px; /* 减小字体 */
			font-weight: 500; /* 字体更细 */
			border-bottom: 1px solid #eee;
			background: #fcfcfc; /* 背景更浅 */
			color: #444; /* 颜色略深 */
			border-radius: 5px 5px 0 0;
			white-space: nowrap; /* 防止标题换行 */
			overflow: hidden; /* 隐藏溢出文字 */
			text-overflow: ellipsis; /* 显示省略号 */
		}
		
		/* 图标变体 flex 布局 */
		.icon-variants {
			display: flex;
		    flex-wrap: nowrap;
		    padding: 5px;
		    justify-content: center;
		    flex-direction: row;
		}
		
		.icon-variant {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 60px; /* 减小宽度 */
			height: 60px; /* 减小高度 */
			margin: 3px; /* 减小外边距 */
			border-radius: 4px;
			cursor: pointer;
			transition: background-color 0.2s ease;
		}
		.icon-variant:hover {
			background-color: #f0f0f0; /* 悬停背景更浅 */
		}
		.icon-variant i {
			font-size: 20px; /* 减小图标大小 */
			color: #666; /* 颜色更浅 */
			margin-bottom: 5px; /* 减小外边距 */
		}
		.icon-variant span {
			font-size: 10px; /* 减小标签字体 */
			color: #777; /* 标签颜色更浅 */
			background: #e9e9e9; /* 标签背景更浅 */
			padding: 1px 3px; /* 减小内边距 */
			border-radius: 3px;
		}
		
		/* 复制成功提示框 */
		#copy-notification {
			position: fixed;
			top: 280px; /* 位置更高 */
			left: 50%;
			transform: translateX(-50%);
			background-color: rgba(0, 0, 0, 0.75); /* 背景更透明 */
			color: #fff;
			padding: 8px 15px; /* 减小内边距 */
			border-radius: 4px; /* 圆角更小 */
			font-size: 13px; /* 字体更小 */
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.2s, visibility 0.2s; /* 动画更快 */
			z-index: 9999;
		}
		#copy-notification.show {
			opacity: 1;
			visibility: visible;
		}

		/* --- END: 新增图标库样式 --- */