* {
box-sizing: border-box;
}

html {
background: #f8fafc;
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
background: #f8fafc;
color: #111827;
}

a{color: rgb(30,159,255);font-weight:bold;}

.ai-tag-generator {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 16px;
}

.ai-tag-generator > .layui-form:first-child {
display: flex;
align-items: center;
gap: 10px 18px;
flex-wrap: wrap;
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #ffffff;
}

.ai-tag-generator > .layui-form:first-child .layui-input-block {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin: 0 !important;
}

.ai-tag-generator > .layui-form:first-child .layui-input-block:last-child {
margin-left: auto !important;
}

.ai-tag-generator > .layui-form:first-child .layui-form-label {
height: auto;
line-height: 1;
padding: 0 4px 0 0;
}
.r18{display:none}
.nr18{display:block}
th{padding:10px 10px 10px 10px}
td{padding:5px 10px 5px 10px}


#elements-container {
text-align: left;
width:100%;
border-width: 1px;
border-style: solid;
background-color: #f8fafc;
border-radius: 8px;
border-color: #e6e6e6;
margin-top: 14px;
}

.layui-form {
line-height: 1.5;
}

.layui-input-block {
margin-bottom: 8px;
}

.layui-textarea {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.draggable-element {
user-select: none;
display: inline-flex;
align-items: center;
text-align: center;
margin: 5px;
padding:0;
font-size: 14px;
min-height: 30px;
line-height: 1.2;
border-radius: 6px;
cursor: grab;
vertical-align: top;
}

.checked{
background:rgb(95,184,120)!important;
color: rgb(255, 255, 255)!important;
}

.minus{
display: inline-flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-style: solid;
border-radius: 4px;
border-color: #e6e6e6;
height: 28px;
width: 28px;
background: white;
color: black;
cursor: zoom-out;
font-weight: 700;
}
.plus{
display: inline-flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-style: solid;
border-radius: 4px;
border-color: #e6e6e6;
height: 28px;
width: 28px;
background: white;
color: black;
cursor: zoom-in;
font-weight: 700;
}
.del{
display: inline-flex;
align-items: center;
justify-content: center;
margin-left:0px;
border-width: 1px;
border-style: solid;
background-color: rgb(255,87,34);
border-radius: 4px;
border-color: #e6e6e6;
height: 28px;
width: 28px;
background: rgb(255,87,34);
color: white;
cursor: no-drop;
font-weight: 700;
font-size: 15px;
}

.tagtext{
background: rgb(95,184,120);
padding: 7px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
color:white;
border-radius: 4px;
font-weight: 600;
}

.tagtext:hover{
background: rgb(115,204,140);
}


.tagbutton{
user-select: none;
display: inline-flex;
align-items: center;
text-align: center;
margin: 5px;
padding:0;
font-size: 14px;
min-height: 30px;
line-height: 1.2;
border-radius: 6px;
vertical-align: top;
}

.buttext{
padding: 6px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
background:white;
color: black;
border-width: 2px;
border-style: solid;
border-radius: 6px;
border-color: #e6e6e6;
min-height: 30px;
}

.buttext:hover{
background: rgb(115,204,140);
color:white;
}

#toast{
    position: fixed;
    top: 15px;
    right: 15px;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 15px;
    width: 300px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    -moz-box-shadow: 0 0 12px #999;
    -webkit-box-shadow: 0 0 12px #999;
    box-shadow: 0 0 12px #999;
    color: #fff;
    z-index: 999;
    display: none;
}

.toast_success {
    background:#51a351;
}
.toast_warning {
    background:rgb(255,184,0);
}

/* 图片预览容器的样式 */
#image-preview {
  display: none; /* 默认隐藏 */
  position: absolute; /* 绝对定位 */
  z-index: 1000; /* 确保在其他元素之上 */
  border: 1px solid #ccc; /* 边框，可以根据需要调整 */
  background-color: white; /* 背景色 */
  padding: 5px; /* 内边距 */
}

/* 预览图片的样式 */
#image-preview img {
  max-width: 230px; /* 最大宽度，可以根据需要调整 */
  height: auto; /* 高度自适应 */
}
.english {
    display: none;
}

@media (max-width: 760px) {
.ai-tag-generator {
padding: 10px;
}

.layui-form-label {
padding-left: 0;
padding-right: 8px;
}

.ai-tag-generator > div[style*="flex-flow: row nowrap"] {
display: block !important;
}

.ai-tag-generator > div[style*="flex-flow: row nowrap"] > div[align="center"] {
width: 100% !important;
margin: 8px 0 14px !important;
text-align: left;
}

.layui-tab-title {
height: auto;
white-space: normal;
}

.layui-tab-title li {
min-width: auto;
}

.layui-tab-content {
height: 520px !important;
}
}