/*
 * 黑灰磨砂风格 - 现代简约
 * 设计思路：黑灰色半透明磨砂效果
 * 优雅、内敛、现代感，如同深夜都市的玻璃幕墙
 */

.ui {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: min(98vw, 720px);
  margin: 0 auto;
  padding: clamp(4px, 1.5vw, 12px);
  color: #d0d0d0;
  line-height: 1.6;
  font-size: clamp(11px, 2.8vw, 15px);
  box-sizing: border-box;
}

.ui * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 卡片 - 磨砂玻璃质感 */
.cd {
  background: rgba(25, 25, 25, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(80, 80, 80, 0.3);
  border-radius: clamp(6px, 1.5vw, 12px);
  margin-bottom: clamp(4px, 1.2vw, 10px);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cd-h {
  padding: clamp(6px, 1.5vw, 12px) clamp(8px, 2vw, 16px);
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 8px);
  font-weight: 600;
  font-size: clamp(11px, 2.6vw, 14px);
  border-bottom: 1px solid rgba(80, 80, 80, 0.25);
  color: #e8e8e8;
  background: rgba(35, 35, 35, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cd-b {
  padding: clamp(8px, 2vw, 14px) clamp(8px, 2vw, 16px);
  background: rgba(20, 20, 20, 0.5);
}

/* 痕迹 - 冷灰流光 */
.tk {
  border-left: 3px solid #5a5a5a;
}

.tk summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 16px);
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 8px);
  font-weight: 600;
  font-size: clamp(11px, 2.6vw, 14px);
  color: #b0b0b0;
  transition: background 0.2s;
}

.tk summary:hover {
  background: linear-gradient(90deg, rgba(90, 90, 90, 0.15) 0%, transparent 100%);
}

.tk summary::-webkit-details-marker {
  display: none;
}

.tk summary::before {
  content: "▸";
  font-size: clamp(10px, 2.2vw, 13px);
  transition: transform 0.2s;
  display: inline-block;
  color: #6a6a6a;
}

.tk[open] summary::before {
  transform: rotate(90deg);
}

.tk .tc {
  padding: clamp(6px, 1.5vw, 12px) clamp(8px, 2vw, 16px);
  font-size: clamp(10px, 2.4vw, 13px);
  color: #a0a0a0;
  background: rgba(15, 15, 15, 0.6);
  border-top: 1px solid rgba(80, 80, 80, 0.2);
  line-height: 1.7;
}

/* 窥望 - 银灰冷光 */
.wd {
  border-left: 3px solid #707070;
}

.wd .cd-h {
  color: #c0c0c0;
  background: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.wg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(100px, 28vw, 160px), 1fr));
  gap: clamp(4px, 1vw, 8px);
}

.wi {
  background: rgba(30, 30, 30, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: clamp(4px, 1vw, 8px);
  padding: clamp(4px, 1.2vw, 8px) clamp(6px, 1.5vw, 10px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(70, 70, 70, 0.3);
}

.wl {
  font-size: clamp(9px, 2vw, 11px);
  color: #808080;
  font-weight: 500;
}

.wv {
  font-size: clamp(10px, 2.4vw, 13px);
  color: #d0d0d0;
  font-weight: 600;
}

/* 轮回 - 石墨铭文 */
.rp {
  border-left: 3px solid #606060;
  min-height: clamp(80px, 20vw, 200px);
}

.rp .cd-h {
  color: #b8b8b8;
  background: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rp .cd-b {
  font-size: clamp(11px, 2.8vw, 15px);
  line-height: 1.8;
  color: #c0c0c0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.rp .cd-b .nr {
  color: #909090;
}

.rp .cd-b .dg {
  color: #a0a0a0;
  font-style: italic;
}

.rp .cd-b .sp {
  color: #b8b8b8;
  font-weight: 500;
}

/* 行动面板 */
.at {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(4px, 1.2vw, 10px);
}

/* 攻击 - 暗红灰 */
.ac {
  border-left: 3px solid #5a4545;
}

.ac .cd-h {
  color: #c09090;
  background: rgba(35, 28, 28, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 防御 - 墨玉灰 */
.au {
  border-left: 3px solid #455555;
}

.au .cd-h {
  color: #90b0a8;
  background: rgba(28, 32, 32, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 属性面板 */
.ag {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 8px);
}

.ai {
  display: flex;
  flex-direction: column;
  gap: clamp(1px, 0.3vw, 3px);
  padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
  background: rgba(25, 25, 25, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: clamp(4px, 1vw, 8px);
  font-size: clamp(10px, 2.2vw, 13px);
  border: 1px solid rgba(70, 70, 70, 0.25);
}

.al {
  color: #808080;
  font-weight: 500;
}

.av {
  color: #c8c8c8;
  font-weight: 600;
  padding-left: clamp(8px, 2vw, 16px);
}

/* 选择栏 - 银灰抉择 */
.ch {
  border-left: 3px solid #6a6a6a;
}

.ch .cd-h {
  color: #c0c0c0;
  background: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cl {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.8vw, 6px);
}

.ci input[type="radio"] {
  display: none;
}

.ci label {
  display: flex;
  align-items: flex-start;
  gap: clamp(4px, 1vw, 8px);
  padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 12px);
  background: rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(70, 70, 70, 0.3);
  border-radius: clamp(4px, 1vw, 8px);
  cursor: pointer;
  transition: all 0.2s;
  font-size: clamp(10px, 2.4vw, 13px);
  line-height: 1.5;
}

.ci label:hover {
  background: rgba(40, 40, 40, 0.6);
  border-color: rgba(100, 100, 100, 0.5);
}

.ci input[type="radio"]:checked + label {
  background: rgba(50, 50, 50, 0.7);
  border-color: rgba(120, 120, 120, 0.6);
  box-shadow: 0 0 0 1px rgba(120, 120, 120, 0.4) inset;
}

.ci .cn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(16px, 4vw, 22px);
  height: clamp(16px, 4vw, 22px);
  min-width: clamp(16px, 4vw, 22px);
  border-radius: 50%;
  background: rgba(50, 50, 50, 0.8);
  color: #909090;
  font-size: clamp(8px, 2vw, 11px);
  font-weight: 700;
  margin-top: 1px;
  transition: background 0.2s;
}

.ci input[type="radio"]:checked + label .cn {
  background: linear-gradient(135deg, #707070 0%, #505050 100%);
  color: #e8e8e8;
}

.ci .ct {
  color: #a0a0a0;
}

/* 标签 */
.tg {
  display: inline-block;
  padding: 1px clamp(4px, 1vw, 8px);
  border-radius: 99px;
  font-size: clamp(8px, 1.8vw, 10px);
  font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
}

.tg-r {
  background: rgba(90, 70, 70, 0.4);
  color: #c0a0a0;
  border: 1px solid rgba(100, 80, 80, 0.4);
}

.tg-y {
  background: rgba(80, 80, 70, 0.4);
  color: #c0c0a0;
  border: 1px solid rgba(90, 90, 80, 0.4);
}

.tg-g {
  background: rgba(70, 90, 85, 0.4);
  color: #a0c0b8;
  border: 1px solid rgba(80, 100, 95, 0.4);
}

.tg-b {
  background: rgba(70, 75, 90, 0.4);
  color: #a0a8c0;
  border: 1px solid rgba(80, 85, 100, 0.4);
}

@media (max-width: 500px) {
  .at {
    grid-template-columns: 1fr;
  }
  .wg {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 300px) {
  .wg {
    grid-template-columns: 1fr;
  }
  .ai {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .av {
    max-width: 100%;
    text-align: left;
  }
}

@media (max-width: 200px) {
  .ui {
    padding: 2px;
    font-size: 9px;
  }
  .cd {
    border-radius: 4px;
    margin-bottom: 3px;
  }
  .cd-h {
    padding: 4px 6px;
    font-size: 9px;
  }
  .cd-b {
    padding: 4px 6px;
  }
}


/* ===== 思考折叠栏 - 磨砂木纹 ===== */
.t {
  margin: 6px 0;
  font-family: system-ui, sans-serif;
  max-width: 100%;
  box-sizing: border-box;
}

.ts {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(25, 25, 25, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(70, 70, 70, 0.3);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  color: #a8a8a8;
  font-size: 13px;
  font-weight: 400;
  transition: all 0.2s ease;
}

.ts::-webkit-details-marker {
  display: none;
}

.ts:hover {
  background: rgba(35, 35, 35, 0.8);
  border-color: rgba(90, 90, 90, 0.4);
}

.ts::after {
  content: "▸";
  color: #6a6a6a;
  font-size: 10px;
  transition: transform 0.2s;
}

.t[open] .ts {
  border-radius: 8px 8px 0 0;
  border-bottom-color: transparent;
  background: rgba(30, 30, 30, 0.8);
}

.t[open] .ts::after {
  content: "▾";
}

.tc {
  padding: 10px 12px;
  background: rgba(18, 18, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(70, 70, 70, 0.3);
  border-top: none;
  border-radius: 0 0 8px 8px;
  color: #909090;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 400px) {
  .ts {
    padding: 6px 10px;
    font-size: 12px;
  }
  .tc {
    padding: 8px 10px;
    font-size: 11px;
  }
}

/* ===== 代码面板 - 磨砂残卷 ===== */
pre {
  --bg: rgba(15, 15, 15, 0.85);
  --fg: #c8c8c8;
  --muted: #606060;
  --border: rgba(70, 70, 70, 0.4);
  --accent: #909090;
  background: var(--bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--fg);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.7;
  padding: 20px 24px;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow-x: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

pre .keyword {
  color: #a09080;
}
pre .string {
  color: #80a090;
}
pre .function {
  color: #909090;
}
pre .comment {
  color: var(--muted);
  font-style: italic;
}
pre .number {
  color: #908070;
}
pre .variable {
  color: #a0a8c0;
}

details {
  background: rgba(15, 15, 15, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(70, 70, 70, 0.35);
  border-radius: 8px;
  overflow: hidden;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

summary {
  background: rgba(25, 25, 25, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #c8c8c8;
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid #6a6a6a;
  border-bottom: 2px solid #6a6a6a;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

details[open] summary::before {
  transform: rotate(45deg);
}

summary:hover {
  background: rgba(35, 35, 35, 0.8);
}

summary:hover::before {
  border-color: #909090;
}

summary span {
  opacity: 0.5;
  font-size: 12px;
  margin-left: auto;
  font-weight: 400;
  color: #808080;
}