@charset "UTF-8";
:root {
  /* 定义亮模式下的CSS变量 */
  --body-bg-color: white;
  --body-text-color: black;
}
body.dark {
  /* 切换到Dark模式时修改body的背景色和文本颜色 */
  background-color: #1e1e1e;
  color: #868686;
}
body.dark :root {
  /* 切换到Dark模式时修改CSS变量的值 */
  --body-bg-color: black;
  --body-text-color: white;
}
body {
  font-family: Arial,"宋体", sans-serif;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--body-bg-color);
  color: var(--body-text-color);
}
a {
    color: #6e6e6e;
    text-decoration: none; /* 去除下划线 */
    transition: color 0.3s ease; /* 颜色变化的过渡效果 */
}
a:hover {color: #c3c3c3;}
a:focus {outline: 2px dashed #0066cc; /* 焦点时的轮廓 */}
a:visited {color: #df5050; /* 已访问链接的颜色 原：#a77d7d */}
a:active {color: #e1e1e1; /* 活动状态的颜色 */}
ul {list-style-type: none;}
ol {list-style-type: none;counter-reset: myCounter;}
li::before {color: #494646;}
ol li::before {
    counter-increment: myCounter;
    content: counter(myCounter) " ";
    color: #857e7e;
    text-align: center;
}
iframe {
    width: 100%;
    height: 100%;
    border: none;
    box-shadow: none;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    padding: 4px 4px;
    /*border: 1px solid #ddd;*/
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    max-width: 300px;
    transition: all 0.2s;
}
input:focus {
    border-color: #4a9eff;
    box-shadow: 0 0 0 3px rgba(74,158,255,0.1);
    outline: none;
}
select {
    padding: 4px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    width: 120px;
    max-width: 300px;
    background: #ffffff;
    color:#000000;
    cursor: pointer;
}
textarea {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    max-width: 400px;
    min-height: 100px;
    resize: vertical;
}
button {
    padding: 2px 4px;
    color: #060606;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;  /* 禁止文本换行 */
    overflow: hidden;     /* 隐藏溢出的文本 */
    /* text-overflow: ellipsis; 溢出文本显示为省略号 (...) */
}
button:hover {
    color: #df5050; /* 原：#ffffff background: #3d8ce4;*/
}
input[type="radio"],
input[type="checkbox"] {
    margin-right: 6px;
}
input[type="range"] {
    width: 100%;
    max-width: 300px;
}
input[type="color"] {
    width: 50px;
    height: 30px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
input[type="file"] {
    padding: 8px;
    border: 1px dashed #ddd;
    border-radius: 4px;
    width: 100%;
    max-width: 300px;
    cursor: pointer;
}
label {
    display: inline-flex;
    align-items: center;
    margin-right: 16px;
    font-size: 14px;
    color: #333;
}
form > p {
    margin: 16px 0;
}
.dark{
    input{
        /*border: 1px solid #454545;*/
        background: #1e1e1e;
        color:#ffffff;
    }
    select {
        border: 1px solid #454545;
        background: #1e1e1e;
        color:#ffffff;
        /*width: 120px;*/
    }
}