/* 🌸 樱粉色调 x 原神UI美化 🌸 */
c-ui {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  color: #5c4a52; 
  font-size: 14px;
  background: #fcf8f9; /* 极淡的粉白底色 */
  padding: 12px;
  border-radius: 12px;
  box-shadow: inset 0 0 20px rgba(255, 182, 193, 0.15);
}

/* 隐藏系统提示，保持界面纯净 */
c-ui details.sys {
  display: none; 
}

/* 🌟 顶部状态栏：原神流光效果 */
c-ui hd {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255, 158, 181, 0.85), rgba(255, 204, 218, 0.5));
  padding: 12px;
  border-radius: 8px 24px 8px 8px;
  border: 1px solid rgba(255, 182, 193, 0.6);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(255, 158, 181, 0.2);
}
c-ui hd::after {
  content: "";
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: gi-shine 4s infinite;
}
@keyframes gi-shine {
  0% { left: -50%; }
  20% { left: 150%; }
  100% { left: 150%; }
}

/* 顶部标签 */
c-ui hd t, c-ui hd l {
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: #d1567b;
  box-shadow: 0 2px 4px rgba(210, 86, 123, 0.1);
  border: 1px solid rgba(255, 182, 193, 0.4);
  display: flex;
  align-items: center;
  z-index: 1;
}

/* 📜 正文排版优化 */
c-ui txt {
  display: block;
  padding: 14px;
  line-height: 1.7;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 8px;
  border-left: 4px solid #ff9eb5;
  font-size: 14.5px;
}

/* 📦 折叠面板通用：原神半透明底板 */
c-ui details {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 182, 193, 0.5);
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
c-ui details[open] {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 15px rgba(255, 158, 181, 0.15);
  border-color: #ff9eb5;
}

/* 标题栏：原神菱形点缀 */
c-ui summary {
  padding: 10px 14px;
  font-weight: 600;
  color: #c24b6e;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 230, 238, 0.8) 0%, transparent 100%);
  border-radius: 8px 8px 0 0;
}
c-ui summary::-webkit-details-marker { display: none; }
c-ui summary::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #ff9eb5;
  transform: rotate(45deg);
  margin-right: 10px;
  box-shadow: 0 0 4px #ff9eb5, 0 0 2px #fff; 
}

/* 📊 状态列表区 */
c-ui details p {
  padding: 10px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* 每个属性条目 */
c-ui d {
  display: flex;
  background: linear-gradient(90deg, rgba(255, 240, 245, 0.8), rgba(255, 255, 255, 0.4));
  border-radius: 4px;
  padding: 8px 10px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 182, 193, 0.3);
  transition: background 0.2s;
}
c-ui d:hover {
  background: linear-gradient(90deg, rgba(255, 230, 238, 0.9), rgba(255, 255, 255, 0.6));
}

/* 属性名：原神金星（✦）点缀 */
c-ui f {
  font-weight: bold;
  color: #db6b8f;
  min-width: 50px;
  margin-right: 14px;
  flex-shrink: 0;
  position: relative;
}
c-ui f::after {
  content: "✦";
  font-size: 11px;
  color: #d4af37; /* 原神金 */
  position: absolute;
  right: -10px;
  top: 1px;
  opacity: 0.9;
}

c-ui span {
  flex-grow: 1;
  color: #66555c;
  line-height: 1.5;
}

/* 💭 记忆区特殊排版 */
c-ui mr {
  display: block;
  font-size: 12px;
  color: #8c7a82;
  background: rgba(255, 240, 245, 0.6);
  padding: 8px 10px;
  border-left: 3px solid #ff9eb5;
  margin: 10px;
  border-radius: 0 4px 4px 0;
}
c-ui details.sm {
  margin: 0 10px 10px 10px;
  border: 1px dashed rgba(255, 182, 193, 0.7);
  background: transparent;
  box-shadow: none;
}
c-ui details.sm summary {
  background: none;
  font-size: 13px;
  color: #b85c7a;
}
c-ui details.sm p {
  font-size: 13px;
  color: #7a666e;
  padding: 0 10px 10px 10px;
}

/* 🎯 原神对话选项风格 */
c-ui details.o p {
  padding: 12px;
  gap: 10px;
}
c-ui details.o p > * {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 182, 193, 0.7);
  padding: 12px 18px;
  border-radius: 24px; /* 原神对话框大圆角 */
  color: #c24b6e;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
}
c-ui details.o p > *::before {
  content: "✦";
  color: #d4af37;
  margin-right: 12px;
  font-size: 14px;
  transition: transform 0.4s;
}
c-ui details.o p > *:hover {
  background: linear-gradient(90deg, #ff9eb5, #ffb6c1);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 158, 181, 0.4);
  transform: translateX(6px);
  border-color: #ff9eb5;
}
c-ui details.o p > *:hover::before {
  color: #fff;
  transform: rotate(180deg);
}