* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
  --errS:10px;
  --bordR:5px;
  --bordBR:30px;
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --secondary: #8b5cf6;
  --accent: #06b6d4;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-surface: #334155;
  --bg-hover: #475569;
  --bg-val:#e3f2fd;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border: #475569;
  --border-light: #64748b;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 var(--bordR) 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px var(--bordR) -6px rgba(0, 0, 0, 0.4);
  --radius-sm: 0.375rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--secondary));
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--primary-light));
  --gradient-val: linear-gradient(145deg, var(--bg-val), var(--accent));
  --gradient-surface: linear-gradient(145deg, var(--bg-secondary), var(--bg-surface));
}
.theme {
  margin-top: 47px;
  position:fixed;
}
.theme-toggle {
  margin-top:0;
  --base-scale: 12px;
  --toggle-width: 5.625em;
  --toggle-height: 2.5em;
  --radius-pill: 100em;
  --sun-diameter: 2.125em;
  --sun-offset: calc((var(--toggle-height) - var(--sun-diameter)) / 2);
  --bg-toggle-light: #3d7eae;
  --bg-toggle-dark: #1d1f2c;
  --color-sun: #ecca2f;
  --color-moon: #c4c9d1;
  --color-crater: #959db1;
  --color-star: #fff;
  --color-cloud-front: #f3fdff;
  --color-cloud-back: #aacadf;
  --shadow-primary: rgba(0, 0, 0, 0.25);
  --shadow-highlight: rgba(255, 255, 255, 0.94);
  --halo-color: rgba(255, 255, 255, 0.1);
}
*::before, *::after{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background-color: #f5f7fa;
  color: #333;
  padding: 0;
}
.MEN {
  position: fixed;
  top: 60px;
  z-index:10;
  img{
    width:10vw;
    height: 10vw;
    cursor: pointer;
  }
}
:root {
  --bg-color: #f0f0f0;
  --transition-standard: 0.3s ease;
  --bg-toggle-dark: #1d1f2c;
}
html.dark * {
  --bg-color: #000; 
  background-color: var(--bg-toggle-dark);
  color: aliceblue;
  textarea{
    border: 1px solid #eee;
  }
}
.top_bar{
  position: sticky;
  top: 0;
  z-index:1;
  border-bottom:5px solid #777;
  background-color:white;
}
.top {
  display: grid;
  align-content: center;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 80px;
  text-align: center;
  align-items: center;
}
div#Tbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  padding: 0;
  /*  border-bottom:1px solid black; */
}
.result::before {
  content: '';
  font-weight: 900;
  color: #e3f;
}
.result {
  border: 3px solid green;
  border-radius: var(--bordR);
  padding: 3px;
  margin: 3px;
  display:flex;
  flex-direction: column;
  img{
    border-radius:10px;
    width:100%;
  }
}
.res img {
  width: 98%;
  border-radius: var(--bordR);
  border: 1px solid green;
  width:-webkit-fill-available;
}
.container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
form {
  background: #cef;
  padding: 0px;
  border-radius: var(--bordR);
}
.panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.full-width {
  grid-column: 1 / -1;
}
h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
}
h2 {
  margin-bottom: 15px;
  color: #3498db;
  border-bottom: 1px solid #eee;
  padding-bottom: var(--bordR);
}
h3 {
  margin: 15px 0 var(--bordR);
  color: #2c3e50;
}
input, select, textarea {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  vertical-align: middle;
  outline:none;
}
textarea {
  width: 100%;
  padding: 15px 5px 5px 5px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: monospace;
  font-size: 14px;
  resize: vertical;
  position: relative;
  top: -1.3em;
  margin-bottom: -1.3em;
  border:1px solid black;
}
button {
  background-color: #3498db;
  color: white;
  border: 2px solid white;
  padding: 3px 5px;
  border-radius: var(--bordBR);
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
  box-shadow:2px 2px 12px black;
}
button:hover {
  background-color: #2980b9;
}
button.secondary {
  background-color: #95a5a6;
}
button.secondary:hover {
  background-color: #7f8c8d;
}
.preview {
  min-height: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  background-color: #f9f9f9;
}
.example {
  background-color: #f8f9fa;
  padding: var(--bordR);
  border-radius: 4px;
  margin-top: var(--bordR);
  font-family: monospace;
  font-size: 13px;
  white-space: pre-wrap;
}
.controls {
  display: flex;
  gap: var(--bordR);
  margin-top: 15px;
  flex-wrap: wrap;
}
.form-group {
  margin-bottom: 0;
  position: relative;
}
textarea:hover,input:hover {
  border:1px solid green;
}
textarea:focus,input:focus {
  border:3px solid red;
}
/* *inspector-stylesheet:1 */
textarea:hover {
  border:3px solid green;
}
.form-group label {
  /* margin-bottom: 5px; */
  display: inline-flex;
  border-radius:6px;
  font-weight: 600;
  position: relative;
  font-weight: 600;
  background-color:white;
  padding:0 0.5em;
  color:green;
  z-index: 3;
  margin-left: 18px;
  border:1px solid black;
}
textarea:placeholder-shown{
  background-color:red;
}
/* 行内表单组 - 用于同一行的文本和输入框 */
.form-inline {
  display: flex;
  align-items: center;
  gap: var(--bordR);
  margin-bottom: 15px;
}
.form-inline label {
  margin-bottom: 0;
  min-width: 80px;
  flex-shrink: 0;
}
.form-inline input,
.form-inline select,
.form-inline textarea {
  flex: 1;
}
.Cmenu {
  display: flex;
  justify-content: center;
  font-size:20px;
  margin-bottom: 10px;
  font-weight: 600;
  z-index:3;
  flex-direction: row;
  align-items: center;
}
.Cmenu::before{
  margin:8px;
  cursor:pointer;
}
/* 单选框和复选框的特殊样式 */
input[type="checkbox"],
input[type="radio"] {
  margin: 0 5px 0 0;
  vertical-align: middle;
  transform: scale(1.2);
}
/* 表单行内对齐 */
.form-row {
  display: flex;
  align-items: center;
  gap:10px;
  flex-wrap: wrap;
  justify-content: center;
}
.form-row label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  vertical-align: middle;
  min-width: auto;
}
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="range"],
.form-row select {
  flex: 1;
  min-width: 60px;
}
/* Range输入样式 */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #bbb;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  border-radius: 3px;
  cursor: pointer;
  padding:0;
}
input[type="range"]:hover {
  opacity: 1;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #3498db;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #3498db;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input[type="range"]::-webkit-slider-thumb:hover {
  background: #2980b9;
  transform: scale(1.1);
}
input[type="range"]::-moz-range-thumb:hover {
  background: #2980b9;
  transform: scale(1.1);
}
/* Range值显示 */
.range-value {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  padding: 4px 8px;
  background: var(--gradient-val);
  border: 1px solid #3498db;
  border-radius: 4px;
  font-weight: 500;
  color: #2c3e50;
  margin-left: var(--bordR);
}
.range-container {
  display: flex;
  align-items: center;
  gap: var(--bordR);
  flex: 1;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}
table, th, td {
  border: 1px solid #ddd;
}
th, td {
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
  min-height: 40px;
}
/* 表格对齐样式 */
.table-align-left {
  text-align: left;
}
.table-align-center {
  text-align: center;
}
.table-align-right {
  text-align: right;
}
th {
  background-color: #f2f2f2;
  font-weight: 600;
}
video{
  border-radius:10px;
}
/* 表格中的表单元素样式 */
table input,
table select,
table textarea,
table button {
  margin: 0;
  vertical-align: middle;
}
table label {
  margin: 0;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.flex-vertical {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  gap: var(--bordR);
  justify-items: stretch;
  padding: 5px;
  background: aqua;
  /* margin: 3px;     align-items: start;*/
  border: 1px solid white;
  border-radius: var(--bordR);
  justify-content: center;
  align-content: start;
}
.flex-horizontal {
  display: grid;
  gap: 5px;
  align-content: center;
  padding:3px 3px;
  background-color: #a9d7ff;
  border-radius: 4px;
  flex-wrap: wrap;
  border-radius:10px;
  align-items: center;
  justify-items: center;
}
.inline-container {
  display: inline-flex;
  gap: var(--bordR);
  margin: 5px;
  padding: 5px;
  background-color: #f8f9fa;
  border-radius: 4px;
}
.video-container {
  width: 100%;
  margin-bottom: 15px;
}
video{
  border-radius:10px;
}
.success {
  color: #27ae60;
  font-weight: bold;
}
.error {
  color: #e74c3c;
  font-weight: bold;
}
.output-area {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px dashed #ccc;
}
.output-title {
  font-weight: bold;
  margin-bottom: var(--bordR);
  color: #2c3e50;
}
.file-upload {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, auto));
  label{
    text-align:center;
    justify-content: center;
  }
}
.syntax-guide {
  margin-top: 20px;
}
.syntax-item {
  margin-bottom: var(--bordR);
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}
.syntax-prefix {
  font-weight: bold;
  color: #e74c3c;
}
.syntax-desc {
  margin-left: var(--bordR);
}
.brace {
  color: #e74c3c;
  font-weight: bold;
}
.websocket-status {
  padding: 8px;
  border-radius: 4px;
  margin: 5px 0;
  text-align: center;
  font-weight: bold;
}
.websocket-connected {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.websocket-disconnected {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.websocket-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 2px solid #dc3545;
  font-weight: bold;
  padding: var(--bordR);
  text-align: center;
  animation: pulse 2s infinite;
}
.websocket-message {
  background-color: #e2e3e5;
  padding: 8px;
  border-radius: 4px;
  margin: 5px 0;
  font-family: monospace;
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}
.table-container {
  margin-bottom: 15px;
  padding: var(--bordR);
  background-color: #fff3cd;
  border-radius: 4px;
}
.image-container img{
  border-radius:10px;
}
/* 图片容器样式 */
.wcml-image-container {
  margin: var(--bordR) 0;
  text-align: center;
}
.wcml-image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 音频容器样式 */
.wcml-audio-container {
  margin: var(--bordR) 0;
  text-align: center;
}
.wcml-audio-container audio {
  width: 100%;
  max-width: 400px;
}
/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
  color: #2c3e50;
  font-weight: 600;
  border-radius:10px;
  padding:0 7px;
}
h1 {
  font-size: 2.5em;
  border-bottom: 2px solid #3498db;
  padding-bottom: var(--bordR);
  box-shadow:2px -2px black;
  margin-top: var(--bordR);
}
h1 {
  font-size: 2em;
  color: white;
  text-shadow: 2px 2px BLACK;
  /* border-bottom: 2px solid #3498db; */
  /* padding-bottom: var(--bordR); */
  /* box-shadow: 2px -2px black; */
  border-top: 2px double #ffffff92;
  border-left: 2px outset #0000007e;
  border-right: 2px solid #e94fcab3;
  margin-top: var(--bordR);
  filter: brightness(1.1) saturate(0.5) hue-rotate(30deg);
  background-origin: border-box;
  background-clip: content-box,border-box;
  background: linear-gradient(45deg, #eea 0%,#acf 10%,#3fa 15%,#eac 28%,#cca 45%,#3ee 53%,#34a 58%,#cae 65%,#eec 75%,#c2d 85% ,#eca 95%,#ccd 100%);
}
h2 {
  font-size: 2em;
  border-bottom: 1px solid #bdc3c7;
  padding-bottom: 8px;
}
h3 {
  font-size: 1.5em;
  color: #34495e;
}
h4 {
  font-size: 1.25em;
  color: #34495e;
}
h5 {
  font-size: 1.1em;
  color: #5d6d7e;
}
h6 {
  font-size: 1em;
  color: #5d6d7e;
  font-style: italic;
}
/* 段落样式 */
p {
  margin: var(--bordR) 0;
  line-height: 1.6;
  color: #333;
  text-indent: 2em;
}
/* 文件上传进度样式 */
.upload-progress {
  margin-top: var(--bordR);
  padding: var(--bordR);
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f9fa;
}
.progress-bar {
  width: 100%;
  height: 12px;
  background-color: #e9ecef;
  border-radius: var(--bordR);
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2980b9);
  width: 0%;
  transition: width 0.3s ease;
  border-radius: var(--bordR);
}
.upload-status {
  font-size: var(--errS);
  font-weight: 500;
  text-align: center;
}
.upload-preparing {
  color: #6c757d;
}
.upload-uploading {
  color: #007bff;
}
.upload-success {
  color: #28a745;
  font-weight: bold;
}
.upload-error {
  color: #dc3545;
  font-weight: bold;
}
.upload-cancelled {
  color: #ffc107;
  font-weight: bold;
}
input[type=radio]:checked+label, input[type=checkbox]:checked+label {
  /* border: 1px solid gold; */
  border:0;
  /* padding: 0.2vh 0.5vh; */
  color: red;
  font-weight: bold;
  /* font-size: 2vh; */
  background: aquamarine;
  box-shadow: inset 2px 2px 2px black;
  /* margin: 5px; */
  /* width:auto; */
  text-wrap: auto;
  transition: 0.1s;
}
input[type=radio]+label:hover, input[type=checkbox]+label:hover {
  transform: translateY(-3px);
}
.top input[type=radio]+label:hover,.top input[type=checkbox]+label:hover {
  transform: translateY(3px);
}
/* border: 0.1vh solid black; */
.Tbar input[type=radio]+label,.Tbar input[type=checkbox]+label {
  background:var(--gradient-accent);/* #acc;*/
}
input[type=radio]:checked+label{
  /* padding:5px 0; */
  background:#3ae;
  /* margin:5px 0; */ 
  color:red;
  box-shadow:2px 2px 2px black inset;
}
input[type=radio], input[type=checkbox] {
  display: none;
}
input#watermark_text {
  width: 140px;
}
input#submit {
  background: var(--gradient-primary);
  box-shadow: 3px 2px 12px black;
  border-radius: var(--bordR);
  cursor: pointer;
  color:white;
  font-weight:800;
}
input#submit:hover{
  transform: translateY(-3px);
  padding:10px;
  background: red;
}
#JDT,#jdt{
  border-radius: 0.5vw;
}
#JDT{
  border:1px solid black;
}
#jdt{
  background-color: #3fb4cb;
  height:10px;
}
.VT {
  display: grid;
  grid-template-columns:60px 3fr 60px;
  gap: var(--bordR);
  grid-template-areas: "jdt"
  "jdb";
  align-content: center;
  align-items: center;
}
.top input[type=radio]:checked+label{
  padding:0 0.5vh;
  background:#fff;
  margin: 0; 
  color:red;
  box-shadow:0 2px red;
}
/* */
.theme-toggle {
  font-size: 9px;
  background: none;
  border: none;
  padding: 0px 0px;
}
.theme-toggle__container {
  width: var(--toggle-width);
  height: var(--toggle-height);
  background-color: var(--bg-toggle-light);
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-standard);
  overflow: hidden;
  box-shadow: 0.06em 0.06em 0.125em var(--shadow-highlight);
}
.theme-toggle__container::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.5) inset;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.theme-toggle__sun {
  width: var(--sun-diameter);
  height: var(--sun-diameter);
  background-color: var(--color-sun);
  border-radius: 50%;
  position: absolute;
  top: var(--sun-offset);
  transform: translateX(var(--sun-offset));
  box-shadow: 0.05em 0.125em 0.125em var(--shadow-primary),
  0em 0.05em 0.125em var(--shadow-primary),
  0.05em 0.05em 0.05em 0em rgba(254, 255, 239, 0.61) inset,
  0em -0.05em 0.05em 0em #a1872a inset, 0 0 0 0.625em var(--halo-color),
  0 0 0 1.25em var(--halo-color), 0 0 0 1.875em var(--halo-color);
  transition: transform var(--transition-standard);
  overflow: hidden;
}
html.dark .theme-toggle__container .theme-toggle__sun {
  transform: translateX(
  calc(var(--toggle-width) - var(--sun-diameter) - var(--sun-offset))
  );
}
.theme-toggle__moon-mask {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--color-moon);
  border-radius: inherit;
  transform: translateX(100%);
  transition: transform var(--transition-standard);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
  0em -0.062em 0.062em 0em #969696 inset;
}
html.dark .theme-toggle__container .theme-toggle__moon-mask {
  transform: translateX(0);
}
.theme-toggle__crater {
  position: absolute;
  background-color: var(--color-crater);
  border-radius: 50%;
  box-shadow: 0em 0.03em 0.06em var(--shadow-primary) inset;
}
.theme-toggle__crater:nth-of-type(1) {
  top: 0.75em;
  left: 0.3em;
  width: 0.75em;
  height: 0.75em;
}
.theme-toggle__crater:nth-of-type(2) {
  top: 0.9em;
  left: 1.375em;
  width: 0.375em;
  height: 0.375em;
}
.theme-toggle__crater:nth-of-type(3) {
  top: 0.3em;
  left: 0.8em;
  width: 0.25em;
  height: 0.25em;
}
.theme-toggle__stars {
  position: absolute;
  left: 0.3em;
  transform: translateY(-2em);
  transition: transform var(--transition-standard);
  width: 2.75em;
  color: var(--color-star);
}
html.dark .theme-toggle__container .theme-toggle__stars {
  transform: translateY(0.5em);
}
.theme-toggle__clouds {
  position: absolute;
  left: 0.3em;
  top: 2em;
  transform: translateY(0);
  width: 1.25em;
  height: 1.25em;
  background-color: var(--color-cloud-front);
  border-radius: 50%;
  box-shadow: 0.937em 0.312em var(--color-cloud-front),
  1.437em 0.375em var(--color-cloud-front), 2.187em 0 var(--color-cloud-front),
  2.937em 0.312em var(--color-cloud-front),
  3.625em -0.062em var(--color-cloud-front),
  4.5em -0.312em var(--color-cloud-front),
  4.625em -1.75em 0 0.437em var(--color-cloud-front),
  -0.312em -0.312em var(--color-cloud-back),
  0.5em -0.125em var(--color-cloud-back),
  1.25em -0.062em var(--color-cloud-back),
  2em -0.312em var(--color-cloud-back), 2.625em 0em var(--color-cloud-back),
  3.375em -0.437em var(--color-cloud-back),
  4em -0.625em var(--color-cloud-back),
  4.125em -2.125em 0 0.437em var(--color-cloud-back);
  transition: transform var(--transition-standard);
}
html.dark .theme-toggle__container .theme-toggle__clouds {
  transform: translateY(3em);
}
.theme-toggle__container:hover .theme-toggle__sun {
  transform: translateX(calc(var(--sun-offset) + 0.187em));
}
html.dark .theme-toggle__container:hover .theme-toggle__sun {
  transform: translateX(calc(var(--toggle-width) - var(--sun-diameter) - var(--sun-offset) - 0.187em));
}
/* */
.flex-vertical .flex-vertical{
  background-color: #efdf;
  grid-template-columns: inherit;
}
.flex-vertical .flex-horizontal{
  /* grid-template-columns: repeat(auto-fit, minmax(0, 1fr));*/
  grid-template-columns:auto auto auto;
}
html.dark .flex-vertical .flex-vertical{
  background-color: #000;
}
.green {
  color: green;
  font-weight: 900;
}
.red{
  color:red;
  font-weight: 900;
}
.translate {
  padding: var(--bordR);
  color: green;
  border: 1px solid;
  border-radius: var(--bordR);
}
.showI img {
  width: 100%;
  border-radius: var(--bordR);
}
.Hide{
  display:none;
}
.flex-vertical .flex-vertical .flex-vertical {
  display: flex;
  flex-direction: column;
}
div#chatHistory,div#thinkL {
  background-color: #dbffe4;
  border-radius: var(--bordR);
  margin: 3px;
  border: 1px solid black;
  padding: 1px;
  overflow:auto;
}
div#chatHistory{
  height: 40vh;
}
div#thinkL {
  background: #9cffdb;
  height: 12vh;
}
div#thinkL::before {
  content: "🤔";
}
.HH {
  display: grid;
  grid-template-columns: 1fr 75px;
  padding: 3px;
  gap: 3px;
  align-items: center;
  justify-items: stretch;
}
.VV {
  display: grid;
  gap: 3px;
}
.message {
  max-width: 90%;
}
.user-message {
  text-align: right;
  margin-left: auto;
}
.ollama-message {
  text-align: left;
  margin-right: auto;
}
.User {
  background-color: #ddd;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
}
.AI {
  background-color: aquamarine;
  display: inline-block;
  padding: 3px;
  border-radius: 5px;
}
.ollama-message .content {
  background-color: #f0f2f5;
  color: #333;
  padding: var(--bordR) 15px;
  border-radius: 12px 12px 12px 0;
  white-space: pre-wrap;
}
select#modelSelect {
  background-color: coral;
  width: 100%;
}
table.hang_code_tab{
  margin:0;
  p{
    margin:0;
  }
}
.content p{
  margin:0;
}
td.code_hnum {
  /* user-select: none!important; */
  /* -moz-user-select: none!important; */
  width: 18px;
  -webkit-user-select: none!important;
  text-align: right;
  background-color: #689c9c;
  border-radius: 0;
  padding: 0 5px;
  border-right: 2px solid white;
  font-size: x-small;
  color:black;
}
td.code_ydm {
  border-radius: 0;
  background-color: #bcafbd;
  /* font-size: x-small; */
  white-space: pre-wrap;
  word-wrap: break-word;
  /*  float: left; */
  line-break: anywhere;
  width:100%;
  text-align:left;
}
xmp.CO#gr {
  color: #fff;
  border: none;
  padding: 1px 3px;
  /* -webkit-border-radius: 3px; */
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: #5A9600;
}
xmp.CO#flo {
  color: #0051e5;
}
span.gol {
  background: blueviolet;
  border-radius: 5px;
  padding: 2px;
  margin: 5px;
}
span.gold {
  background-color: gold;
  padding: 3px;
  border-radius: 5px;
}
span.bold {
  font-weight: 900;
}
.co#yinh {
  color: green;
}
.co#bliang {
  color: #fe0000;
}
.co#uid {
  color: darkmagenta;
}
.co#gjz {
  color: blue;
}
.co#headz {
  color: springgreen;
}
.co#jq {
  color: magenta;
}
.co#php {
  color: green;
}
.co#sys {
  color: firebrick;
}
.co#jieshi{
  color: #636363;
}
.con_text{
  overflow:scroll;
  height:100%;
}
span.bar_cd {
  width: 200px;
  background-color: #bdbd86;
  float: left;
  border-radius: 8px;
}
span.percent_jd {
  background-color: cadetblue;
  border-radius: 8px;
  float: left;
}
td.PML{
  width:10%
}
.PMY{
  width:50%;
  max-width: 600px;
}
.PmkYL {
  max-width: 600px;
  background-color: #fff;
}
textarea.PMK{
  width:100%;
}
.tred,.red{
  color:red;
}
.Tred{
  background: #cff5ff;
  box-shadow: 0 0 0 1px #09f;
  border: 0;
  border-radius: 5px;
  padding: 0 3px;
}
span.Tblue {
  background-color: turquoise;
  border-radius: 6px;
  box-shadow: 0 0 0 1px darkmagenta;
}
div.end_bar#bar {
  text-align: center;
}
blockquote {
  color: #ccc;
  padding: 0.5em 0;
  background: #222;
  border-color: #333;
  border-left: 4px solid #ddd;
  margin-left: 0;
  font-size: 14px;
  font-style: italic;
  border-left-color: aquamarine;
  border-left: 5px solid aquamarine;
}
table.PT_tab {
  background-color: #efe;
  /* border: 1px solid black; */
  box-shadow: 2px 2px 2px;
  border-radius: 8px;
  width:auto;
}
table.PT_tab tr:first-child {
  background-color: #9A0;
  border: 1px solid black;
}
pcode {
  background-color: greenyellow;
  padding: 0 6px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px black;
  color: black;
}
button.fa {
  font-size: large;
  padding: 3px;
  margin: 2px;
}
.PT_tab td {
  /**   border: 1px solid; **/
  border-radius: 3px;
  /* box-shadow: inset 1px 1px 1px green; */
  box-shadow: inset 1px 1px 1px #ddd;
  padding: 5px;
}
xmp {
  white-space: pre-wrap;
  display: initial;
}
a.PHML {
  color: #000;
  /*  text-decoration: auto;*/
}
.L{
  float: left;
  left: 3px;
}
.B{
  bottom: 40px;
}
.T{
  top:40px;
}
.R{
  float:right;
  right:4px;
}
.PML .ML{
  background-color:#fff;
}
.ML {
  position: fixed;
  background: initial;
  border-radius: 5px;
  background: #fff;
  box-shadow: 2px 2px 2px black;
  width:auto;
  margin: 0 2%;
}
.ML * {
  font-size: 12px;
  border-left: 0;
  color: #111;
  margin: 0;
  padding: 0;
}
.IN {
  width:40px;
}
table.hang_code_tab td {
  padding: 2px 3px;
}
ol {
  margin: 0 2.8em;
}
ul.no {
  list-style: none;
}
ol.chk {
  list-style: upper-alpha;
}
ul li, .PmkYL ul li{
  /* padding: 0 0 0 1.5em; */
  /* margin: 0 0 1em 1em; */
  /* background-image: url(./assets/img/pt.png); */
  background-repeat: no-repeat;
  background-size: var(--bordR);
  background-position: left;
}
.YLcode {
  background-color: #eee;
  border-radius: 15px;
  box-shadow: inset 2px 2px 2px;
  border: solid green 2px;
  margin: 20px 0;
  /* display: table-cell; */
}
table.tab#YDtab div.YLcode img {
  max-width: 90%;
}      
table.tab#YDtab div.YLcode {
  max-width:300px;
}
.YLcode *,.SHcode * {
  margin: 0;
  width: auto;
  padding: 3px;
}
input#goID {
  width: 60px;
}
.YLcode h6:first-child {
  background-color: green;
  margin: 0;
  color:#fff;
  border-right: green solid 6px;
  border-top: 0;
  text-indent: 0.3em;
  border-bottom: 1px solid blue;
  border-radius:10px 10px 0 0;
}
.YLcode li {
  background-image: none;
  margin: 0 20px;
}
.YLcode H1, .YLcode H2, .YLcode H3, .YLcode H4, .YLcode H5, .YLcode H6 {
  border: 0;
}
code {
  color: #df8686;
  border: none;
  padding: 1px 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: #5A9600;
}
button:disabled {
  background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
  color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
  border-color: light-dark(rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
}
.result#AIresult input[type=radio]+label,.result#AIresult  input[type=checkbox]+label {
  /* border: 0.1vh solid black; */
  border: 2px solid white;
  border-radius: 0.5vw;
  box-shadow: 2px 2px 12px black;
  background-color: #36b;
  cursor: pointer;
  padding: 3px 2px;
  color: white;
  /* line-height: 28px; */
  /* width: 100%; */
  white-space: break-spaces;
}
.result#AIresult input[type=radio]:checked+label {
  padding: 5px 0;
  background: #1400ff;
  margin: 5px 0;
  color: red;
  box-shadow: 2px 2px 2px black inset;
}
div#ProHistory {
  display: flex;
  gap: var(--bordR);
  flex-wrap:wrap;
}
input[type=radio]+label{
  white-space:break-spaces;
}
input[type=radio]+label ,.Tmenu label{
  white-space: break-spaces;
  border-radius: 10px;
  box-shadow: 8px 8px 16px #b6b9ba, 1px 3px 16px #fafafd;
  /*     background-image: linear-gradient(145deg, #b6b9ba, #f6f4f8); */
  /* background-image:linear-gradient(145deg, #a9dced, #cfaef0); */
  padding: 5px;
}
input#ResizeWH {
  width: 100px;
}
div#ChatL {
  display: grid;
  gap:10px;
  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
}
.chat#chat div.flex-vertical#id_0 {
  display: grid;
  gap: 3px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));/* 2fr 1fr 2fr;*/
  .flex-vertical {
    display: block;
    gap: 3px;
    grid-template-columns: 1fr 1fr 2fr;
  }
  label{
    padding:3px;
  }
  .ChatL label{
    text-align:center;
  }
}
.imgLL {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 5px;
  background: cadetblue;
  padding: 3px;
  border-radius: 5px;
}
.Plog ,.Pget {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(80px,1fr));
  gap: var(--bordR);
  text-align: center;
}
div.List div:not(.resImg,.NSFW div,.useTime div) {
  background-color: #a0e8d0;
  text-align: center;
  border-radius: var(--bordR);
  padding: 5px;
  display: flex;
  align-items:center;
  justify-content: center;
  box-shadow:1px 2px 3px;
  margin:0;
}
.List.L1#img{
  display: grid;
  gap: 0.5vw;
  grid-template-columns: 0.4fr 1.5fr 1.5fr 2.1fr;
  grid-template-rows: repeat(6,auto);
  border-radius:10px;
  background-color: #e8bbbb;
  margin-bottom: var(--bordR);
  padding:5px;
  .xh {
    grid-row: 1/7;
    grid-column: 1/1;
  }
  .Dti {
    grid-row: 6/7;
    grid-column: 2/4;
  }
  .NSFW{
    grid-row: 5/6;
    grid-column: 2/4;
  }
  .useTime {
    grid-row: 3/4;
    grid-column: 2/4;
  }
  .lx {
    grid-row: 1/1;
    grid-column: 2/3;
  }
  .prompt {
    grid-row: 4/5;
    grid-column: 2/4;
  }
  .modelName {
    grid-row: 1/1;
    grid-column:3/4;
  }
  .Psize {
    grid-row: 2/3; 
    grid-column: 2/4;
  }
  .result {
    grid-row: 1/7;
    grid-column: 4/4;
    .resImg {
      background-color: #a0e8d0;
      display: grid;
      gap:3px;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }
  }
  .resImg img {
    max-height: -webkit-fill-available;
  }
}
.List.L2#img{
  display: grid;
  gap: 0.5vw;
  grid-template-columns: 0.4fr 1.5fr 0.5fr 1fr 2.1fr;
  grid-template-rows: repeat(5,auto);
  border-radius:10px;
  background-color: #e8bbbb;
  margin-bottom: var(--bordR);
  padding:5px;
  .xh {
    grid-row: 1/5;
    grid-column: 1/1;
  }
  .Dti {
    grid-row: 4/5;
    grid-column: 2/5;
  }
  .useTime {
    grid-row: 2/2;
    grid-column: 3/5;
  }
  .lx {
    grid-row: 1/2;
    grid-column: 2/3;
  }
  .prompt {
    grid-row: 3/3;
    grid-column: 2/5;
  }
  .modelName {
    grid-row: 1/2;
    grid-column:3/4;
  }
  .Psize {
    grid-row: 1/2; 
    grid-column: 4/5;
  }
  .result {
    grid-row: 1/5;
    grid-column: 5/6;
    .resImg {
      background-color: #a0e8d0;
      display: grid;
      gap:3px;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
  }
  .NSFW{
    grid-row: 2/3;
    grid-column: 2/3;
  }
  .resImg img {
    max-height: -webkit-fill-available;
  }
}
.List.L3#img{
  display: grid;
  gap: 0.5vw;
  grid-template-columns: 0.4fr 0.5fr 1fr 2fr 1.5fr;
  grid-template-rows: repeat(5,auto);
  border-radius:10px;
  background-color: #e8bbbb;
  margin-bottom: var(--bordR);
  padding:5px;
  .xh {
    grid-row: 1/5;
    grid-column: 1/1;
  }
  .Dti {
    grid-row: 4/5;
    grid-column: 2/5;
  } 
  .useTime {
    grid-row: 3/4;
    grid-column: 2/4;
  }
  .NSFW {
    grid-row: 2/2;
    grid-column: 3/4;
  }
  .lx {
    grid-row: 1/2;
    grid-column: 2/3;
  }
  .prompt {
    grid-row: 1/4;
    grid-column: 4/5;
  }
  .modelName {
    grid-row: 2/3;
    grid-column:2/3;
  }
  .Psize {
    grid-row: 1/2; 
    grid-column: 3/4;
  }
  .result {
    grid-row: 1/5;
    grid-column: 5/6;
    .resImg {
      background-color: #a0e8d0;
      display: grid;
      gap:3px;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }
  }
  .resImg img {
    max-height: -webkit-fill-available;
  }
}
div.List#faceSwap {
  display: grid;
  gap: 5px;
  grid-template-columns: 2fr 5fr 5fr 8fr;
  grid-template-rows:1fr 4fr;
  background-color:#e3a;
  padding:3px;
  margin:3px;
  border-radius:10px;
  img{
    width:100%;
  }
  *:hover img,*:focus-visible img ,*:focus img{
    position: fixed;
    width: 60%;
    margin: 0 auto;
    top: 15%;
    left: 15%;
    border-radius:15px;
    box-shadow:2px 2px 12px;
  }
  .xh {
    grid-row: 1/3;
    grid-column: 1/1;
  }
  .size {
    grid-row: 1/1;
    grid-column: 2/4;
  }
  .face {
    grid-row: 2/3;
    grid-column: 2/3;
  }
  .swap {
    grid-row: 2/3;
    grid-column: 3/4;
  }
  .path {
    grid-row: 1/3;
    grid-column: 4/5;
  }
}
div.AIvL#List, div.AIL#List{
  display: flex;
  flex-direction: row;
  align-items: center;
}
span.sels {
  width: auto;
}
label.L_set {
  background: var(--gradient-primary);
}
div.set#set {
  background: var(--gradient-val);
  padding: 3px;
  /* border: 1px solid black; */
  border-radius: 10px;
  display: flex;
  justify-content: end;
}
.iAi .flex-vertical .flex-vertical#id_71 {
  background-color: #efdf;
  grid-template-columns: inherit;
  max-height: 700px;
  overflow:auto;
}
.speak::after{
  content:"🕪";
}
.smallSpeak::after{
  content:"🕩";
}
.muted::after{
  content:"🕨";
}
label[for=prompt]::before{
  content: "🖋️";
}
label[for=negative_prompt]::before {
  content: "✏️";
}
.Tmenu label[for=jk_chat]::before,.Tmenu label[for=dh_chat_ollama]::before {
  content: "🗨️";
}
.Tmenu label[for=temperature]::before {
  content: "🌡️";
}
.Tmenu label[for=topP]::before {
  content: "🎩";
}
.Tmenu label[for=maxTokens]::before {
  content: "🎭";
}
.Tmenu label[for=seed]::before {
  content: "🎰";
}
.Tmenu label[for=num_images_per_round]::before {
  content: "🎳";
}
.Tmenu label[for=total_rounds]::before {
  content: "🎱";
}
.Tmenu label[for=steps]::before {
  content: "👣";
}
.Tmenu label[for=watermark_position]::before {
  content: "💺";
}
.Tmenu label[for=resize]::before {
  content: "🔍";
}
.Tmenu label[for=jk_jkSet]::before {
  content: "🎄";
}
.Tmenu label[for=jk_translate]::before,.Tmenu #Tmenu_dh_chat::before, .Tmenu label[for=dh_chat_llama]::before {
  content: "🎭";
}
.Tmenu label[for=jk_t2i]::before,.Tmenu #Tmenu_dh_img::before, .Tmenu label[for=dh_chat_lms]::before {
  content: "🎫";
}
.Tmenu label[for=jk_Presize]::before {
  content: "🖼️";
}
.Tmenu label[for=jk_tAi]::before {
  content: "🖻";
  margin:5px 5px -5px 5px;
}
.Tmenu label[for=jk_i2i]::before,.Tmenu #Tmenu_dh_video::before,.Tmenu label[for=dh_video_t2v]::before {
  content: "📇";
}
.Tmenu label[for=jk_iAi]::before , .Tmenu label[for=dh_img_KT]::before,.Tmenu label[for=dh_video_iiv]::before {
  content: "🎎";
}
.Tmenu label[for=jk_t2v]::before, .Tmenu label[for=dh_img_SD]::before,.Tmenu label[for=dh_fixed_hc]::before ,.Tmenu label[for=dh_video_i2v]::before{
  content: "🎑";
}
.Tmenu label[for=jk_faceSwap]::before {
  content: "👹";
}
.Tmenu label[for=jk_t2s]::before,.Tmenu #Tmenu_dh_audio::before , .Tmenu label[for=dh_audio_clone]::before {
  content: "🗣️";
}
.Tmenu label[for=jk_i2v]::before,.Tmenu label[for=dh_fixed_convert]::before {
  content: "🎥";
}
.Tmenu label[for=jk_c2s]::before {
  content: "🎶";
}
.Tmenu label[for=jk_t2m]::before,.Tmenu #Tmenu_dh_fixed::before {
  content: "📺";
}
.Tmenu label[for=jk_a2t]::before, .Tmenu label[for=dh_audio_t2a]::before{
  content: "🎤";
}
.Tmenu label[for=jk_iiv]::before {
  content: "📽️";
}
.Tmenu label[for=jk_s2M]::before {
  content: "🎇";
}
.Tmenu #Tmenu_lo::before ,.Tmenu .loSr_localhost::before{
  content: "💻";
}
.Tmenu #Tmenu_jk::before {
  content: "🔗";
}
.Tmenu #Tmenu_fj::before {
  content: "⚽";
}
.Tmenu #Tmenu_zw::before {
  content: "💰";
}
.Tmenu #Tmenu_lg::before {
  content: "📓";
}
.Tmenu #Tmenu_gy::before {
  content: "🤳";
}
.Tmenu .loSr_server::before {
  content: "🔭";
}
.Tmenu .model_choice::before {
  content: "🤖";
}
/* .Tmenu .::before { */
/*   content: ""; */
/* } */
.resImg .img:hover ,.imgL .img:hover{
  height: 80%;
  width:80%;
  position: fixed;
  top: 10%;
  left: 10%;
  object-fit:contain;
  z-index:10;
}
.NSFW ,.useTime{
  display: grid !important;
  grid-template-columns: 1fr;
}
#Lset div.flex-horizontal#id_0 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  align-items: stretch;
}
.EMJ{
}
#DSP:before {
  content: '🖵';
  color: darkcyan;
  font-size: xxx-large;
}
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius:5px;
  margin:2px 0;
}
.INFO {
  background-color: aquamarine;
  padding: 3px;
  margin: 2px;
  border-radius: 5px;
}
div.JDT, div.JDT div {
  border-radius: 15px;
  /* margin: 2px 0; */
  /* height: 16px; */
}
span.ZYo {
  height: 30px;
  display: inline-table;
}
div#info {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}
.mapMEM#mapMEM{
  width:100%;
  height:340px;
}
.up::before {
  background: green;
  box-shadow: 0 0 10px green;
}
.down::before {
  background: red;
  box-shadow: 0 0 10px red;
}
.NNet {
  display: grid;
  background-color:#a190a2;
  text-align: center;
  margin:12px 0;
  padding:2px;
  border-radius:5px;
  .Net{
    margin:3px;
    border-radius:5px;
    padding:3px;
    background:#3ef;
  }
  #Niface:before{
    content:'网卡: ';
  }
  #Niface{
    grid-column:1/2;
    grid-row:1/2;
  }
  div#Nip4 {
    grid-column: 2/3;
    grid-row:1/2;
  }
  #Nip4:before{
    content:'IP4地址: ';
  }
  div#Nip6 {
    grid-column: 1/4;
    grid-row: 2/3;
  }
  #Nip6:before{
    content:'IP6地址: ';
  }
  div#Nspeed {
    grid-column: 3/4;
    grid-row: 1/2;
  }
  #Nspeed:before{
    content:'网卡速率: ';
  }
}
span.info-label {
  font-size: large;
  font-weight: 900;
}
.NETS {
  display: grid;
  background: #eea2fa;
  text-align:center;
  .Net{
    margin:2px;
    border-radius:5px;
    padding:3px;
    background-color:#eafe2a;
  }
  .Net::before{
    font-size: large;
    color: aqua;
    font-weight: 900;
  }
  #iface{
    grid-column:1/2;
    grid-row:1/3;
    color:#33efaa;
    font-size: larger;
    padding: 22px 0;
    font-weight: 900;
  }
  #iface::before{
    /* content:'网卡: '; */
  }
  #rx{
    grid-column:2/3;
    grid-row:1/2;
  }
  #tx{
    grid-column:2/3;
    grid-row:2/3;
  }
  #rx_bytes{
    grid-column:3/4;
    grid-row:1/2;
  }
  #rx_bytes::before,#tx_bytes::before{
    content:'总: ';
  }
  #rx_dropped{
    grid-column:4/5;
    grid-row:1/2;
  }
  #rx_dropped::before,#tx_dropped::before{
    content:'丢: ';
  }
  #rx_errors{
    grid-column:5/6;
    grid-row:1/2;
  }
  #rx_errors::before,#tx_errors::before{
    content:'错: ';
    color:red;
  }
  #rx_sec{
    grid-column:6/7;
    grid-row:1/2;
  }
  #rx_sec::before, #tx_sec::before {
    content:'速: ';
    color:green;
  }
  #tx_bytes{
    grid-column:3/4;
    grid-row:2/3;
  }
  #tx_dropped{
    grid-column:4/5;
    grid-row:2/3;
  }
  #tx_errors{
    grid-column:5/6;
    grid-row:2/3;
  }
  #tx_sec{
    grid-column:6/7;
    grid-row:2/3;
  }
}
div.USER {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
div#user img {
  width: 100%;
}
.user#user .flex-vertical {
  margin:10px;
  background-color:#eaf;
}
img.header, img.Header {
  border-radius: 50%;
  border: 2px solid green;
}
.User#User .info-item{
  padding:5px 10px;
  margin:3px;
  background-color:#eaa;
}
div#menH {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(26px,1fr));
  gap: 3px;
  text-align: center;
}
.flex-vertical.ALLINFO{
  .flex-vertical {
    display:block;
    /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
  }
  display:grid;
}
div#Psl {
  background-color: chartreuse;
  padding: 3px;
  border-radius: 5px;
  .info-item{
    background-color:#ca3;
    margin:2px;
    border-radius:5px;
    padding:2px 5px;
  }
}
.left_menu  {
  .lmenHide{
    position: relative;
    z-index:990;
    transition: all 0.3s ease; /* 平滑动画 */
    cursor:pointer;
  }
  input[type=radio]:checked+label {
    background:red;
    color: #a3e;
    text-shadow: 1px 1px 5px white;
    transform: translateY(0%) translateX(0px) scale(1.2);
    padding:2px;
  }
}
.lmenHide:hover{
  color:red;
}
.lmenHide:hover+div{
  position: absolute;
  display:block;
  width:100%;
  animation: showSpan 0.1s ease forwards;
}
/* 定义动画 */
@keyframes showSpan {
  0% {
    opacity: 0;
    transform: translateY(0%) translateX(100px) scale(0.2);
  }
  100% {
    opacity: 1;
    transform: translateY(0%) translateX(0) scale(1);
  }
}
label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.cont {
  display: grid;
  gap:5px;  
  grid-template-columns: 50px repeat(auto-fit,minmax(150px,100%));
  /* 50px minmax(10px,5fr); */
  padding:2px var(--bordR) 0 0;
}
.left {
  position: relative;
  display:unset;
  z-index: 10;
}
.userH,.WInFo {
  position: fixed;
  background: #060101;
  border:2px solid #222;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  /* margin: 0 2px 2px 0; */
  /* box-shadow: 2px 2px 2px black; */
  cursor: pointer;
}
.RWX {
  width: 51px;
}
.userH:hover{
  img{
    background:red;
    opacity: 0.8;
  }
}
.WInFo {
  margin-top: 0px;
  border-radius: 5px;
  display: grid;
  margin-top: 72px;
  grid-template-columns: 45px minmax(380px,1fr);
  height: auto;
  background: inherit;
  text-align: center;
}
.RWxx{
  margin-left: 10px;
  display:none;
  background: #acacd5;
  padding: 10px;
  border-radius: 5px;
  left:50px;
  position:fixed;
}
.WInFo:hover {
  box-shadow: unset;
  z-index: 100;
  .RWxx{
    /* display:block; */
  }
  .RWtotal{
    background:red;
  }
}
.left_menu {
  position: fixed;
  display: grid;
  gap: 5px;
  grid-template-columns:auto;
  margin-top: 72px;
  border-right: 1px solid black;
  text-align: center;
  z-index: 99;
  height:100%;
  left: 0;
  background-color: #333;
  border-radius: var(--bordR);
  padding: var(--bordR);
  box-shadow:2px 2px var(--bordR);
  align-content: start;
}
.left_menu  input[type=radio]+label,.Tmenu label{
  background:inherit;
  box-shadow:none;
  border:0;
  transition:0.3s;
}
.left_menu input[type=radio]+label:before,.Tmenu label:before{
  font-size:22px;
}
.left_menu input[type=radio]+label:hover,.Tmenu label:hover{
  position: relative;
  background:#676262;
}
img.mheader {
  width: 50px;
  border: 2px solid #2ee7ff;
  border-radius: 50%;
  /* animation: action 2s linear infinite alternate; */
  /* border-radius: 23% 77% 24% 76% / 65% 34% 66% 35%; */
  opacity: 0.6;
  /* box-shadow: inset 2px 4px 6px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.3), 3px 3px 6px rgba(0, 0, 0, 0.05), inset -2px -2px 3px rgba(250, 250, 250, 0.8); */
}
div#userxx {
  padding: 10px;
  border-radius: 10px;
  border: 3px solid #eac;
  background: antiquewhite;
  display: flex;
  flex-direction: column;
  .header{
    width:100%;
    margin:0 auto;
  }
}
.RWtotal {
  font-size: 25px;
  text-align: center;
  font-weight: 800;
  color: blue;
  background: #92d8d2;
  text-shadow: 1px 1px 2px white;
  box-shadow:2px 2px 2px black;
  line-height: 25px;
  border-radius: 5px;
}
.Stab {
  background: azure;
  padding: 3px;
  border-radius: var(--bordR);
}
.RWLs {
  background: aquamarine;
  padding: 3px;
  border-radius: var(--bordR);
  margin-top:3px;
  border:1px solid white;
}
.listRW {
  display: grid;
  grid-template-columns: 1.5fr 2fr  2fr ;
  /* justify-items: center; */
  align-items: center;
  background: linear-gradient(145deg, #a9dced, #cfaef0);
  margin: 2px 1px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px black;
}
.lmenHide,.llmen {
  display: none;
}
.llmen {
  background: blue;
  z-index: 991;
  border-radius: 10px;
  position: fixed;
  left: 0;
  width: 150px;
  top: 1px;
}
.left_menu:hover{
  .lmenHide,.zmenl .lmenHide {
    display:block;
    color:white;
    font-weight:900;
  }
}
.Tmenu .lmenHide:hover{
  label{
    display:flex;
  }
  .zmenl{
    display:grid;
    grid-template-columns: 40px auto;
    align-items: center;
  }
}
.zmenl:hover{
  .lmenHide {
    display: block;
  }
  .llmen {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 150px;
  }
  display:grid;
  position:relative;
  grid-template-columns: 40px auto;
  align-items: center;
}
div#set,div#more {
  font-size: larger;
  margin:0 5px;
}
span#HisN_value:after {
  content: "个";
}
span#maxTokens_value:after{
  content: "K";
}
.chatH .message{
  margin-top:10px;
  background-color:#eea;
}
.PLMD {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(40px,1fr));
  align-items: center;
  background:#efe;
  border-radius:10px;
  .Plmd label{
    opacity: 0.9;
    justify-content: center;
    /* background:none; */
    /* background:linen; */
    background:initial;
    color: blue;
    text-align: center;
    border-radius:0;
    padding:3px;
    margin:0;
    border:0;
    box-shadow:2px 2px 12px black inset;
    box-shadow:none;
  }
  .Plmd input:checked+label{
    margin:0;
    padding:3px;
    /* background:#e3f; */
    background:linear-gradient(45deg, #eea 0%, #acf 10%, #3fa 15%, #eac 30%, #cca 45%, #3ee 60%, #34a 75%, #cae 90%,  #ccd 100%);
    border-radius:23% 77% 24% 76% / 65% 34% 66% 35% ;
    color:red;
    box-shadow: inset 2px 4px 6px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.3), 3px 3px 6px rgba(0, 0, 0, 0.05), inset -2px -2px 3px rgba(250, 250, 250, 0.8);
    /* animation:action 2s linear infinite alternate; */
  }
  .Plmd input:checked+label:after{
    content:'';
    width:3px;
    height:3px;
    position:absolute;
    top:10%;
    left:15%;
    background-color:rgba(255,255,255,0.8);
    border-radius:50% 50% 63% 37% / 54% 63% 37% 46%;
  }
  span:first-child label{
    border-radius:10px 0 0 10px;
  }
  span:last-child label{
    border-radius:0 10px 10px 0;
  }
}
@keyframes action{
  25%{
    border-radius: 28% 72% 37% 63% / 53% 50% 50% 47% ;
  }
  50%{
    border-radius:12% 88% 16% 84% / 69% 30% 70% 31% ;
  }
  75%{
    border-radius:32% 68% 38% 62% / 54% 42% 58% 46% ;
  }
  100%{
    border-radius:14% 78% 16% 84% / 69% 36% 74% 36% ;
  }
}
div.Plmd#sm {
  margin: 3px 0;
  border-radius: 5px;
  text-align: left;
  padding: 3px;
  color:green;
  text-shadow:1px 1px 10px white;
  font-weight:800;
  font-size:small;
}
div.Plmd#sm:before {
  content:'说明：';
  color:black;
}
div#slpbox {
  top:30%;
  position: absolute;
  /* border:1px solid black; */
  /* width: 40%; */
  z-index: 14;
  right: 20%;
  background: white;
  border-radius: 10px;
}
.box .title {
  background: linear-gradient(45deg, #eea 0%, #acf 10%, #3fa 15%, #eac 30%, #cca 45%, #3ee 60%, #34a 75%, #cae 90%,  #ccd 100%);
  border-radius: 10px 10px 0 0;
  font-weight:900;
  padding: 3px;
}
.box .Mcont {
  font-size: small;
  color: green;
  padding:10px;
}
.Str ,.Str1{
  display: grid;
  /* gap: 10px; */
  background: aquamarine;
  border-radius: 5px;
  margin: 2px;
  font-size: small;
  align-items: center;
  justify-content: center;
  justify-items: center;
  button{
    font-size:12px;
    padding:3px 5px;
  }
}
.Str{
  grid-template-columns:0.8fr 1fr 2fr 3fr 5fr 2fr 2fr;
  .zBTn{
    border:1px solid white;
    padding:1px;
    width:20px;
    height:20px;
    box-shadow:unset;
  }
  .zBTn:hover{
    color:red;
    background:#eea;
    font-weight:900;
    transform: scale(1.4);
  }
  .zBTn.zt_0:hover::after, .rBTn.zt_2:hover::after,.zBTn.zt_2:hover::after{
    content:"点击启动";
    position:fixed;
    font-weight:900;
    transform: scale(1.4);
    width:100px;
    font-size:14px;
    color:red;
    background-color:white;
    border-radius:5px;
    margin-left:25px;
    padding:3px;
  }
  .zBTn.zt_2:hover::after{
    content:"点击触发关闭";
  }
  .rBTn.zt_2:hover::after{
    content:"点击后 清理完成的，未完成的重新加入队列";
    z-index:5;
  }
}
.Str1{
  grid-template-columns:2fr 1fr 6fr 3fr 2fr;
}
div.Szt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
div.Szt#zt_0 {
  background: linear-gradient(-45deg, #3c3c3c, #ebebeb,#ffe);
  box-shadow:inset 0 0 10px rgba(250,250,250,0.3),1px 1px 3px #ddd,2px 2px 12px rgba(177,177,177,0.6),inset 4px 4px 14px rgba(30,30,30,0.8);
}
div.Szt#zt_1 {
  background: linear-gradient(-45deg, #3c3c3c, #99c,#ffe);
  box-shadow: inset 0 0 10px rgba(250, 250, 150, 0.3), 1px 1px 12px #989898, 2px 2px 12px rgba(177, 177, 17, 0.6), inset 4px 4px 14px rgba(230, 230, 2, 0.8);
}
div.Szt#zt_2 {
  background: linear-gradient(-45deg, #03a, #3dc, #ffa);
  box-shadow:inset 0 0 10px rgba(250,150,250,0.3),1px 1px 12px #ddd,2px 2px 12px rgba(177,17,177,0.6),inset 4px 4px 14px rgba(2,230,230,0.8);
}
div.Szt#zt_3 {
  background: linear-gradient(-45deg, blue,red);
  box-shadow: inset 0 0 10px rgba(250, 50, 150, 0.3), 1px 1px 12px #989898, 2px 2px 12px rgba(177, 77, 17, 0.6), inset 4px 4px 14px rgba(230, 30, 2, 0.8);
  /* animation:deng 2.3s linear infinite; */
}
div.Szt#zt_4 {
  background: linear-gradient(-45deg,red,red);
  box-shadow: inset 0 0 10px rgba(250, 50, 150, 0.3), 1px 1px 12px #989898, 2px 2px 12px rgba(177, 77, 17, 0.6), inset 4px 4px 14px rgba(230, 30, 2, 0.8);
  /* animation:deng 2.3s linear infinite; */
}
@keyframes deng{
  0%,100%{
    opacity:1;
  }
  25%{
    opacity:0.8;
    background:red;
  }
  50%{
    opacity:0.5;
    background:black;
  }
  75%{
    opacity:0.8;
    background:red;
  }
}
div.StrGpu {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  margin: 3px 0;
  border-radius: var(--bordR);
  padding: var(--radius-sm);
}
div.StrGpu#tit {
  background: aquamarine;
}
div.StrGpu#mx {
  background: #7bff8c;
}
div.Str#tit,div.Str1#tit {
  padding:5px;
  background: aqua;
}
.VVV0 {
  display: grid;
  grid-template-columns:1fr 1fr;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 3px;
  background-color:#3366ff;
  border-radius:var(--bordR);
  margin:5px 1px;
}
.VVV {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 3px;
  margin:10px 0;
}
div.Str2 {
  display: grid;
  grid-template-columns: 1fr 10fr;
  gap: 3px;
  justify-items: center;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin:10px 0;
  border-radius:var(--bordR);
  text-align: center;
  padding:1px;
  input.DJ{
    width:70px;
    text-align:center;
    padding:2px 1px;
  }
  input.remark{
    width:100%;
  }
  div{
    width:100%;
  }
  .VVV{
    display:grid;
    grid-template-columns:3fr 2fr 3fr;
    justify-content: flex-end;
    margin:5px 0;
    background-color:#fa3;
    padding:2px 1px;
    text-align:end;
    border-radius:var(--bordR);
  }
  .VVV1{
    display:grid;
    justify-content: flex-end;
    margin: 5px 0;
    background-color: #fa3;
    padding: 2px 1px;
    border-radius: var(--bordR);
    word-break: break-word;
    grid-template-columns: 5fr 4fr;
    align-items: center;
    justify-items: center;
    text-align: center;
  }
}
div.Str2#tit{
  background-color:#e3f;
  padding:3px 1px;
  font-size:large;
  font-weight:800;
}
div.Str2#mx{
  background-color:#3ef;
}
div.Str2#mx1{
  background-color:#3399ff;
}
div.Str2#mx2{
  background-color:#c5cb84;
}
div.Str2#mx3{
  background-color:#9898ff;
}
.tb {
  writing-mode:tb;
}
div.footBarMen {
  position: fixed;
  border-radius:0 10px 10px 0;
  bottom: 50px;
  left: 52px;
  padding: 5px;
  color: white;
  background: black;
  display: block;
}
button#zt_0,button.zt_0 {
  background: red;
}
div.VocList {
  display: flex;
  align-content: center;
  align-items: center;
  /* grid-template-columns: repeat(auto-fit,minmax(60px,1fr)) !important; */
  flex-direction: column;
}
video.audio{
  display:none;
}
button.Play {
  border: 0;
  background: none;
  box-shadow: unset;
  font-size: 25px;
}
.SztXX {
  display:none;
  position: fixed;
  padding: 3px;
  width: 250px;
  background-color: white;
  border-radius: 5px;
  border: 1px solid black;
  z-index:30;
  margin-left:20px;
}
div.Szt:hover{
  .SztXX{
    display:block;
  }
}
input.DJ {
  width: 70px;
  padding:2px 2px;
}
div.JGfw,div.JGfw4 {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  align-items: center;
  justify-items: center;
  border-bottom:1px solid black;
  padding:2px 1px;
  background:#bae;
  border-radius:5px;
  margin:2px 0;
}
div.JGfw#bt,div.JGfw4{
  background:#b1e;
}
div.JGfw4{
  grid-template-columns: 1fr 1.5fr 2fr 3fr;
  div{
    justify-items:center;
  }
}
input[type=checkbox].KG{
}
input[type=checkbox].KG+label{
  left:10px;
  display:inline-block;
  width:70px;
  height:25px;
  font-size:12px;
  /* line-height:16px; */
  border-radius:50px;
  background:#ccc;
  border:unset;
  box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.5);
  position:relative;
}
input[type=checkbox].KG+label{
  text-align:right;
  transition:all .3s ease-in-out;
  margin:3px 10px 0 3px;
}
input[type=checkbox].KG:checked+label{
  text-align:left;
  background-color:#3ef;
}
input[type=checkbox].KG+label::before{
  content:'OFF';
  width:30px;
  height:30px;
  left:-10px;
  font-size:14px;
  text-align:center;
  background:#fff;
  border-radius:100%;
  display:inline-block;
  color:#ccc;
  line-height:30px;
  position:absolute;
  top:-3px;
  box-shadow:0 0 2px 1px #ccc inset;
  transition:all .3s ease-in-out;
}
input[type=checkbox].KG:checked+label::before{
  content:'ON';
  left:50px;
  color:#3ef;
}
div.box#msgbox {
  position: fixed;
  background: white;
  padding: 0;
  border-radius:10px;
  background:#ccf;
  left: 1%;
  width: 98%;
  top: 20px;
  /* bottom:20px; */
  z-index:20;
  .TITLE .tit{
    display:block;
    position:relative;
    .gbicon{
      position:absolute;
      right:5px;
    }
  }
  .boxCC img{
    width:100%;
  }
  .Rst {
    display: grid;
    gap:5px;
    padding:5px;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    max-height:600px;
    overflow-y:scroll;
  }
  .OneRow {
    background:#eea;
    border-radius:var(--bordR);
    display: grid;
    grid-template-columns: 1fr;
    .mx{
    }
  }
}
input#qcsl {
  width: 120px;
}
div.TOKEN#listT, div.TOKEN#list{
  display: grid;
  grid-template-columns: 1fr 3fr 2fr 2fr 2fr 4fr 3fr;
  padding:3px 0;
  align-items: center;
  font-size: x-small;
  gap:3px;
  /* margin:5px 0; */
  text-align: center;
  button{
    font-size:smaller;
    padding:2px;
  }
}
div.TOKEN#listT{
  background-color:#e3a;
}
div.TOKEN#list{
  background-color:#ffcffc;
}
div.hide {
  display: none;
}
div.boxCC {
  padding: 0 20px;
}
div#slistT,div#slist  {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr;
  gap:2px;
  text-align:center;
}
div#slistT,div#listT{
  margin-top:10px;
  background-color:#ddd;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
div#slist,div#list{
  background-color:#eee;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-bottom:10px;
}
.onShow:hover{
  cursor:pointer;
  background-color:red;
  .hide{
    display:block;
    position:fixed;
    background-color:#fff;
    padding:10px;
    color:green;
    border-radius:10px;
    min-width: 250px;
  }
    border-radius:10px;
}
table.PT_tab {
  width:100%;
}
h2{
  margin: 100px 0 10px 0;
}