/* ===== 末日生存风格按钮 ===== */
#prompt-input button:not([type="submit"]) {
    background: linear-gradient(180deg, #3a2e24 0%, #1f1812 100%) !important;
    color: #c8b898 !important;
    border: 2px solid #5a3a2a !important;
    border-radius: 4px !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.6),
        2px 2px 0 #2a1a12,
        0 0 8px rgba(0,0,0,0.5) !important;
    font-weight: bold !important;
    text-transform: none !important;
    transition: all 0.15s ease-in-out !important;
    font-family: 'Courier New', monospace !important;
    text-shadow: 0 0 4px #000 !important;
    letter-spacing: 0.5px;
    position: relative;
}

/* 磨损纹理叠加 */
#prompt-input button:not([type="submit"])::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, 
        rgba(255,255,255,0.02) 0px, 
        rgba(255,255,255,0.02) 2px, 
        transparent 2px, 
        transparent 6px);
    border-radius: inherit;
    opacity: 0.3;
}

/* 悬停 - 按下效果（下沉） */
.#prompt-input button:not([type="submit"]):hover {
    background: linear-gradient(180deg, #2e241c 0%, #16100c 100%) !important;
    color: #d6c8b0 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.8),
        0px 0px 0 #2a1a12,
        0 0 6px rgba(0,0,0,0.7) !important;
    border-color: #6a4a3a !important;
}

/* 活动 - 更深按下 */
.#prompt-input button:not([type="submit"]):active {
    background: linear-gradient(180deg, #1f1812 0%, #0f0a08 100%) !important;
    transform: translate(3px, 3px) scale(0.98) !important;
    box-shadow: 
        inset 0 3px 6px rgba(0,0,0,0.9),
        0px 0px 0 transparent !important;
}

/* 聚焦 - 辐射脉冲（放射性警示） */
@keyframes fallout-pulse {
    0%, 100% {
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.6),
            2px 2px 0 #2a1a12,
            0 0 10px rgba(180, 90, 30, 0.3),
            0 0 20px rgba(180, 90, 30, 0.1);
    }
    50% {
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.6),
            2px 2px 0 #2a1a12,
            0 0 15px rgba(200, 100, 40, 0.6),
            0 0 30px rgba(200, 100, 40, 0.2);
    }
}
#prompt-input button:not([type="submit"]):focus {
    animation: fallout-pulse 1.5s infinite;
    outline: none;
    border-color: #b85a2a !important;
}

/* ===== 发送按钮（军绿色废土风格） ===== */
#prompt-input [type="submit"] {
    background: linear-gradient(180deg, #3a4a2a 0%, #1a2a12 100%) !important;
    color: #d0e8b0 !important;
    border: 2px solid #6a8a4a !important;
    border-radius: 4px !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.6),
        2px 2px 0 #0f1f0a,
        0 0 8px rgba(0,0,0,0.5) !important;
    font-weight: bold !important;
    text-transform: none !important;
    transition: all 0.15s ease-in-out !important;
    font-family: 'Courier New', monospace !important;
    text-shadow: 0 0 4px #000 !important;
    letter-spacing: 0.5px;
    position: relative;
}

#prompt-input [type="submit"]:hover {
    background: linear-gradient(180deg, #4a5a3a 0%, #2a3a1a 100%) !important;
    color: #e0f0c0 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.8),
        0px 0px 0 #0f1f0a,
        0 0 6px rgba(0,0,0,0.7) !important;
    border-color: #7a9a5a !important;
}

#prompt-input [type="submit"]:active {
    background: linear-gradient(180deg, #1a2a12 0%, #0f1a0a 100%) !important;
    transform: translate(3px, 3px) scale(0.98) !important;
    box-shadow: 
        inset 0 3px 6px rgba(0,0,0,0.9),
        0px 0px 0 transparent !important;
}

#prompt-input [type="submit"]:focus {
    animation: fallout-pulse 1.5s infinite;
    outline: none;
    border-color: #8aaa5a !important;
}

/* 发送按钮的脉冲颜色微调（绿色光） */
#prompt-input [type="submit"]:focus {
    animation-name: fallout-pulse-green !important;
}
@keyframes fallout-pulse-green {
    0%, 100% {
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.6),
            2px 2px 0 #0f1f0a,
            0 0 10px rgba(100, 180, 40, 0.3),
            0 0 20px rgba(100, 180, 40, 0.1);
    }
    50% {
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.6),
            2px 2px 0 #0f1f0a,
            0 0 15px rgba(120, 200, 60, 0.6),
            0 0 30px rgba(120, 200, 60, 0.2);
    }
}

/* ===== 停止按钮（铁锈红废土风格） ===== */
#prompt-input button[aria-label="停止"] {
    background: linear-gradient(180deg, #5a2a1a 0%, #3a1a0f 100%) !important;
    color: #f0d0c0 !important;
    border: 2px solid #8a4a3a !important;
    border-radius: 4px !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.6),
        2px 2px 0 #2a100a,
        0 0 8px rgba(0,0,0,0.5) !important;
    font-weight: bold !important;
    text-transform: none !important;
    transition: all 0.15s ease-in-out !important;
    font-family: 'Courier New', monospace !important;
    text-shadow: 0 0 4px #000 !important;
    letter-spacing: 0.5px;
    position: relative;
}

#prompt-input button[aria-label="停止"]:hover {
    background: linear-gradient(180deg, #6a3a2a 0%, #4a2215 100%) !important;
    color: #fae0d0 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.8),
        0px 0px 0 #2a100a,
        0 0 6px rgba(0,0,0,0.7) !important;
    border-color: #9a5a4a !important;
}

#prompt-input button[aria-label="停止"]:active {
    background: linear-gradient(180deg, #3a1a0f 0%, #1f0f08 100%) !important;
    transform: translate(3px, 3px) scale(0.98) !important;
    box-shadow: 
        inset 0 3px 6px rgba(0,0,0,0.9),
        0px 0px 0 transparent !important;
}

#prompt-input button[aria-label="停止"]:focus {
    animation: fallout-pulse-red 1.5s infinite;
    outline: none;
    border-color: #aa5a3a !important;
}
@keyframes fallout-pulse-red {
    0%, 100% {
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.6),
            2px 2px 0 #2a100a,
            0 0 10px rgba(200, 60, 30, 0.3),
            0 0 20px rgba(200, 60, 30, 0.1);
    }
    50% {
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.6),
            2px 2px 0 #2a100a,
            0 0 15px rgba(220, 80, 40, 0.6),
            0 0 30px rgba(220, 80, 40, 0.2);
    }
}

/* ===== 废土风格消息输入框 ===== */
#prompt-input-body textarea[name="message"] {
    /* 主体背景：做旧深色金属 */
    background: linear-gradient(145deg, #2a221a 0%, #1a1410 100%) !important;
    color: #c8b898 !important;  /* 旧纸张色文字 */
    border: 2px solid #4a3a2a !important;  /* 锈蚀边框 */
    border-radius: 6px !important;
    /* 内凹阴影 + 外部微弱光晕 */
    box-shadow: 
        inset 0 4px 8px rgba(0,0,0,0.7),
        inset 0 -2px 4px rgba(80,60,40,0.2),
        0 0 6px rgba(0,0,0,0.6) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding: 12px 16px !important;
    resize: vertical !important;
    transition: all 0.2s ease-in-out !important;
    /* 文字阴影增强可读性 */
    text-shadow: 0 0 3px rgba(0,0,0,0.8) !important;
    /* 确保滚动条也符合风格（可选） */
    scrollbar-width: thin;
    scrollbar-color: #5a4a3a #1a1410;
}

/* 滚动条（WebKit） */
#prompt-input-body textarea[name="message"]::-webkit-scrollbar {
    width: 8px;
}
#prompt-input-body textarea[name="message"]::-webkit-scrollbar-track {
    background: #1a1410;
    border-radius: 4px;
}
#prompt-input-body textarea[name="message"]::-webkit-scrollbar-thumb {
    background: #5a4a3a;
    border-radius: 4px;
    border: 1px solid #3a2a1a;
}
#prompt-input-body textarea[name="message"]::-webkit-scrollbar-thumb:hover {
    background: #6a5a4a;
}

/* ===== 磨损纹理叠加（与按钮一致） ===== */
#prompt-input-body textarea[name="message"]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, 
        rgba(255,255,255,0.02) 0px, 
        rgba(255,255,255,0.02) 2px, 
        transparent 2px, 
        transparent 6px);
    border-radius: inherit;
    opacity: 0.3;
    z-index: 1;
}
/* 注意：textarea 不支持 ::before，需用背景伪元素模拟，或者直接使用background叠加 */
/* 替代方案：直接在背景上叠加纹理（使用多背景） */
#prompt-input-body textarea[name="message"] {
    background-image: 
        repeating-linear-gradient(45deg, 
            rgba(255,255,255,0.02) 0px, 
            rgba(255,255,255,0.02) 2px, 
            transparent 2px, 
            transparent 6px),
        linear-gradient(145deg, #2a221a 0%, #1a1410 100%);
    background-blend-mode: overlay, normal;
}

/* ===== 占位符样式 ===== */
#prompt-input-body textarea[name="message"]::placeholder {
    color: #7a6a5a !important;
    opacity: 0.8;
    font-style: italic;
    text-shadow: 0 0 2px #000;
}

/* ===== 聚焦状态 - 辐射光效 ===== */
@keyframes input-fallout-glow {
    0%, 100% {
        box-shadow: 
            inset 0 4px 8px rgba(0,0,0,0.7),
            inset 0 -2px 4px rgba(80,60,40,0.2),
            0 0 10px rgba(180, 120, 60, 0.2),
            0 0 20px rgba(180, 120, 60, 0.05);
        border-color: #6a5a3a;
    }
    50% {
        box-shadow: 
            inset 0 4px 8px rgba(0,0,0,0.7),
            inset 0 -2px 4px rgba(80,60,40,0.2),
            0 0 18px rgba(200, 140, 70, 0.5),
            0 0 40px rgba(200, 140, 70, 0.15);
        border-color: #8a6a3a;
    }
}

/* ===== 废土风格父容器 #prompt-input ===== */
#prompt-input {
    /* 主体：做旧金属板 */
    background: linear-gradient(165deg, #2c241c 0%, #1a1410 100%) !important;
    /* 仿旧铜色边框，带锈迹感 */
    border: 3px solid #4a3a2a !important;
    border-radius: 10px !important;
    /* 多重阴影：外凸立体 + 内凹边缘 + 环境光晕 */
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.8),
        inset 0 -2px 4px rgba(80,60,40,0.2),
        0 6px 12px rgba(0,0,0,0.6),
        0 0 0 2px #2a1a12,          /* 模拟边框凹槽 */
        0 0 20px rgba(0,0,0,0.4) !important;
    position: relative;
    /* 保持子元素（输入框、按钮）的内边距与容器协调 */
    display: flex !important;
    align-items: flex-end !important;  /* 按钮与输入框底部对齐 */
    /* 让容器占满宽度（可按需调整） */
    width: 100% !important;
    box-sizing: border-box !important;
    /* 纹理背景叠加 */
    background-image: 
        repeating-linear-gradient(45deg, 
            rgba(255,255,255,0.02) 0px, 
            rgba(255,255,255,0.02) 3px, 
            transparent 3px, 
            transparent 8px),
        repeating-linear-gradient(-45deg, 
            rgba(0,0,0,0.03) 0px, 
            rgba(0,0,0,0.03) 2px, 
            transparent 2px, 
            transparent 6px),
        linear-gradient(165deg, #2c241c 0%, #1a1410 100%);
    background-blend-mode: overlay, overlay, normal;
}

/* ===== 容器内子元素间距优化 ===== */
#prompt-input #prompt-input-body {
    flex: 1;  /* 输入框区域伸展 */
    min-width: 0;  /* 防止溢出 */
}

/* ===== 容器悬停/聚焦增强（整体氛围） ===== */
#prompt-input:focus-within {
    border-color: #6a5a3a !important;
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.8),
        inset 0 -2px 4px rgba(80,60,40,0.2),
        0 6px 12px rgba(0,0,0,0.6),
        0 0 0 2px #3a2a1a,
        0 0 25px rgba(180, 120, 60, 0.15) !important;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* ===== 配合按钮的样式修正 ===== */
#prompt-input button,
#prompt-input [type="submit"] {
    /* 按钮高度与输入框协调，可微调 */
    flex-shrink: 0;  /* 防止按钮被压缩 */
}

#prompt-input-body textarea[name="message"]:focus {
    animation: input-fallout-glow 2s infinite ease-in-out;
    outline: none !important;
    border-color: #8a6a3a !important;
}

/* ===== 悬停状态 - 轻微亮化 ===== */
#prompt-input-body textarea[name="message"]:hover {
    background-image: 
        repeating-linear-gradient(45deg, 
            rgba(255,255,255,0.03) 0px, 
            rgba(255,255,255,0.03) 2px, 
            transparent 2px, 
            transparent 6px),
        linear-gradient(145deg, #32281e 0%, #221a14 100%);
    border-color: #5a4a3a;
}

/* ===== 禁用状态（如果需要） ===== */
#prompt-input-body textarea[name="message"]:disabled {
    opacity: 0.5;
    filter: grayscale(0.6);
    cursor: not-allowed;
}

/* ===== 末日生存风格 - 浅色默认（废土做旧感） ===== */

/* AI 回复内容 */
.is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background: #f5ede4;  /* 旧纸色 / 浅米褐 */
    border: none;
    border-left: 3px solid #b85a2a;  /* 铁锈红 */
    box-shadow: 
        3px 3px 0px rgba(0,0,0,0.25),
        inset 0 0 15px rgba(0,0,0,0.05);
    border-radius: 2px 4px 4px 2px;
    margin: 0;
    padding: 12px 16px;
    color: #2c241a;  /* 深褐 */
    font-family: 'Courier New', 'Consolas', monospace;
    text-shadow: none;
    position: relative;
}

/* 磨损斑驳装饰 */
.is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted::before {
    content: '';
    position: absolute;
    top: 5px; right: 5px;
    width: 40px; height: 40px;
    background: radial-gradient(circle at 20% 20%, rgba(0,0,0,0.04), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

/* 用户提问内容 */
.is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background: #e8efe8;  /* 极浅灰绿 */
    border: none;
    border-left: 3px solid #3a7a6a;  /* 暗青绿 */
    box-shadow: 
        3px 3px 0px rgba(0,0,0,0.25),
        inset 0 0 15px rgba(0,0,0,0.05);
    border-radius: 2px 4px 4px 2px;
    margin: 0;
    padding: 12px 16px;
    color: #1a2a22;  /* 深墨绿 */
    font-family: 'Courier New', 'Consolas', monospace;
    text-shadow: none;
    position: relative;
}

/* 辐射装饰（仅提问框） */
.is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted::after {
    content: '☢';
    position: absolute;
    bottom: 4px; right: 8px;
    font-size: 1.2rem;
    opacity: 0.10;
    color: #4a8a3a;
    pointer-events: none;
}

/* ========== 深色模式（.dark 类） ========== */
.dark .is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background: #1f1812;  /* 深废土褐 */
    border-left-color: #d4783a;  /* 亮锈橙 */
    box-shadow: 
        4px 4px 0px rgba(0,0,0,0.8),
        inset 0 0 30px rgba(0,0,0,0.5);
    color: #e6d6c0;  /* 米白 */
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

.dark .is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted::before {
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), transparent 70%);
}

.dark .is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background: #141c18;  /* 深墨绿 */
    border-left-color: #5aaa8a;  /* 亮青绿 */
    box-shadow: 
        4px 4px 0px rgba(0,0,0,0.8),
        inset 0 0 30px rgba(0,0,0,0.5);
    color: #d0e0c8;  /* 浅灰绿 */
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

.dark .is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    opacity: 0.20;
    color: #6aaa5a;
}

/* ==========================================
   末日生存风格 - details 折叠面板
   ========================================== */

/* ----- 基础容器 ----- */
details {
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  color: #c8c0b0;
  background: #1e1a16;
  border: 2px solid #4a3f36;
  margin: 8px 0;
}

/* 折叠状态 */
details:not([open]) {
  border-color: #6a4a2a;
  box-shadow: 0 2px 0 #2a1f18;   /* 仅下方2px实心阴影 */
}

/* 展开状态 */
details[open] {
  border-color: #8a5a2a;
  box-shadow: 0 2px 0 #3a2a1a;
  background: #1c1814;
}

/* 悬停效果（无浮动，仅边框微亮） */
details:hover:not([open]) {
  border-color: #8a5a2a;
  box-shadow: 0 2px 0 #4a3020;
}

/* ----- 摘要（标题行） ----- */
details summary {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 10px 14px;
  cursor: pointer;
  color: #d0c0a0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.3px;
  background: #1e1a16;
  border-bottom: 1px solid transparent;
  transition: border 0.2s;
}

details[open] summary {
  border-bottom-color: #4a3f36;
}

/* 摘要内的文本（保留原有结构） */
details summary .summary-text {
  flex: 1;
  padding: 0 6px;
  color: #d0c0a0;    /* 去除渐变，改用纯色 */
}

/* 自定义箭头 (➤ 改为更废土的 '▶') */
details summary::after {
  content: '▶';
  font-size: 0.8rem;
  transition: transform 0.25s ease;
  color: #b87a3a;
  margin: 0 6px;
  font-weight: bold;
}

details[open] summary::after {
  transform: rotate(90deg);
  color: #c08a4a;
}

/* 摘要交互反馈 */
details summary:hover {
  background: #2a221c;
}
details summary:active {
  transform: translateY(1px);
}

/* ----- 内容区域（除 summary 以外） ----- */
details > *:not(summary) {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #b8a890;
  background: #16120e;
}

/* 段落、列表等 */
details p,
details ul,
details ol,
details pre,
details blockquote {
  margin: 6px 0;
  line-height: 1.6;
}

/* 列表 */
details ul, details ol {
  padding-left: 20px;
}
details li {
  margin: 4px 0;
  padding-left: 4px;
  list-style-type: none;
  position: relative;
}
details li::before {
  content: '▸';
  color: #b87a3a;
  font-weight: bold;
  position: absolute;
  left: -16px;
}

/* 文字强调 */
details strong,
details b {
  color: #e6b87a;
  font-weight: 700;
}
details em {
  color: #b0a090;
  font-style: italic;
}
details code {
  color: #c8b898;
  background: #2a221a;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.9em;
  border: 1px solid #3a322a;
}
details pre {
  background: #0d0b09;
  padding: 8px 12px;
  border-radius: 3px;
  overflow-x: auto;
  color: #d0c0a0;
  font-family: 'Courier New', monospace;
  border: 1px solid #3a322a;
  margin: 6px 0;
}

/* ----- 表格（末日风格） ----- */
details table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 0.9rem;
  background: #16120e;
  border: 1px solid #3a322a;
}

details table th {
  background: #2a221a;
  color: #e6d6b0;
  font-weight: 700;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 2px solid #5a4a3a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

details table td {
  padding: 6px 10px;
  border-bottom: 1px solid #2a221a;
  color: #b8a890;
}

details table tr:last-child td {
  border-bottom: none;
}
details table tr:hover td {
  background: #1e1a16;
}

/* ----- 滚动条（暗色） ----- */
details ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
details ::-webkit-scrollbar-track {
  background: #1a1612;
}
details ::-webkit-scrollbar-thumb {
  background: #5a4a3a;
  border-radius: 3px;
}
details ::-webkit-scrollbar-thumb:hover {
  background: #7a5a3a;
}

/* ----- 展开动画（简化，无滑入效果，用渐显） ----- */
details[open] > *:not(summary) {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================
   响应式适配 ≤768px
   ========================================== */
@media screen and (max-width: 768px) {
  details {
    margin: 4px 0;
    border-width: 1px;
  }

  details summary {
    padding: 2px 6px;        /* 内外边距 ≤4px */
    font-size: 0.85rem;
  }

  details summary .summary-text {
    padding: 0 4px;
  }

  details summary::after {
    font-size: 0.7rem;
    margin: 0 4px;
  }

  details > *:not(summary) {
    padding: 2px 4px 6px;     /* 上下左右 ≤4px（底部稍多留白） */
    font-size: 0.78rem;
    line-height: 1.5;
  }

  details p,
  details ul,
  details ol,
  details pre,
  details blockquote {
    margin: 3px 0;
  }

  details ul, details ol {
    padding-left: 14px;
  }
  details li {
    margin: 2px 0;
    font-size: 0.78rem;
  }
  details li::before {
    left: -12px;
  }

  details table {
    font-size: 0.7rem;
  }
  details table th,
  details table td {
    padding: 4px 6px;
  }

  details pre {
    padding: 2px 2px;
    font-size: 0.7rem;
  }

  /* 小屏折叠动画减弱 */
  details[open] > *:not(summary) {
    animation-duration: 0.15s;
  }
}


/* ====== 对话行容器 ====== */
.npc-talk,
.my-talk {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
    max-width: 100%;
}

.npc-talk {
    flex-direction: row !important;
}

.my-talk {
    flex-direction: row-reverse !important;
}

/* ====== 姓名框 · 锈蚀金属 ====== */
.npc-name,
.my-name {
    flex-shrink: 0;
    padding: 6px 10px;
    font-weight: 800;
    font-size: 1.1em;
    letter-spacing: 0.6px;
    line-height: 1.4;
    margin-top: 2px;
    max-width: 84px;
    word-break: break-all;
    border: none;
    border-radius: 2px;   /* 修改为2px */
    color: #f0e8dc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    cursor: default;
    user-select: none;
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.25),
        0 6px 14px rgba(0, 0, 0, 0.10),
        inset 0 -3px 6px rgba(0, 0, 0, 0.15),
        inset 0 2px 10px rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    background-repeat: no-repeat;
    background-size: cover;
}

.npc-name:hover,
.my-name:hover {
    transform: translateY(-4px);
    box-shadow:
        0 6px 0 rgba(0, 0, 0, 0.20),
        0 12px 24px rgba(0, 0, 0, 0.08),
        inset 0 -3px 6px rgba(0, 0, 0, 0.12),
        inset 0 2px 10px rgba(255, 255, 255, 0.12);
}

.npc-name:active,
.my-name:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.30),
        0 4px 10px rgba(0, 0, 0, 0.08),
        inset 0 2px 6px rgba(0, 0, 0, 0.18),
        inset 0 -1px 4px rgba(255, 255, 255, 0.04);
    transition-duration: 0.06s;
}

/* ---- NPC 姓名 ---- */
.npc-name {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 200, 180, 0.12) 0%, transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(160, 50, 30, 0.25) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, #8a2e2a 0%, #5a1a16 100%);
    box-shadow:
        0 4px 0 #3a0e0a,
        0 6px 14px rgba(0, 0, 0, 0.10),
        inset 0 -3px 6px rgba(0, 0, 0, 0.20),
        inset 0 2px 10px rgba(255, 200, 180, 0.10);
    border: 1px solid rgba(160, 70, 50, 0.25);
}

.npc-name:hover {
    box-shadow:
        0 6px 0 #3a0e0a,
        0 12px 24px rgba(0, 0, 0, 0.08),
        inset 0 -3px 6px rgba(0, 0, 0, 0.16),
        inset 0 2px 10px rgba(255, 200, 180, 0.14);
}

.npc-name:active {
    box-shadow:
        0 2px 0 #3a0e0a,
        0 4px 10px rgba(0, 0, 0, 0.08),
        inset 0 2px 6px rgba(0, 0, 0, 0.22),
        inset 0 -1px 4px rgba(255, 200, 180, 0.04);
}

/* ---- 用户姓名 ---- */
.my-name {
    background:
        radial-gradient(circle at 25% 35%, rgba(200, 230, 180, 0.10) 0%, transparent 55%),
        radial-gradient(circle at 75% 65%, rgba(70, 110, 50, 0.20) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, #3a5a2a 0%, #1f3316 100%);
    box-shadow:
        0 4px 0 #0f1f0a,
        0 6px 14px rgba(0, 0, 0, 0.10),
        inset 0 -3px 6px rgba(0, 0, 0, 0.20),
        inset 0 2px 10px rgba(200, 230, 180, 0.08);
    border: 1px solid rgba(80, 130, 60, 0.20);
}

.my-name:hover {
    box-shadow:
        0 6px 0 #0f1f0a,
        0 12px 24px rgba(0, 0, 0, 0.08),
        inset 0 -3px 6px rgba(0, 0, 0, 0.16),
        inset 0 2px 10px rgba(200, 230, 180, 0.12);
}

.my-name:active {
    box-shadow:
        0 2px 0 #0f1f0a,
        0 4px 10px rgba(0, 0, 0, 0.08),
        inset 0 2px 6px rgba(0, 0, 0, 0.22),
        inset 0 -1px 4px rgba(200, 230, 180, 0.04);
}

/* ====== 对话气泡 ====== */
.talk-word {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: 2px solid;
    border-radius: 2px;   /* 修改为2px */
    word-wrap: break-word;
    line-height: 1.7;
    font-size: 1em;
    position: relative;
    transition: box-shadow 0.2s ease;
}

/* ---- NPC 气泡 ---- */
.npc-talk .talk-word {
    border-color: #6a2a22;
    background:
        radial-gradient(circle at 30% 40%, rgba(180, 80, 60, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(120, 40, 30, 0.12) 0%, transparent 50%),
        #1f1210;
    color: #d4c4bc;
    box-shadow:
        -6px 6px 0 0 #3a0e0a,
        inset 0 1px 0 rgba(180, 100, 80, 0.10);
    border-radius: 2px;   /* 修改为2px */
}

/* ---- 用户气泡 ---- */
.my-talk .talk-word {
    border-color: #3a5a2a;
    background:
        radial-gradient(circle at 25% 30%, rgba(160, 200, 140, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 75% 75%, rgba(60, 100, 40, 0.10) 0%, transparent 50%),
        #121a0e;
    color: #c8d0b8;
    box-shadow:
        6px 6px 0 0 #0f1f0a,
        inset 0 1px 0 rgba(160, 200, 140, 0.08);
    border-radius: 2px;   /* 修改为2px */
}

/* ====== 三角形箭头 ====== */
.npc-talk .talk-word::before,
.npc-talk .talk-word::after {
    content: '';
    position: absolute;
    left: -10px;
    top: 16px;
    width: 0;
    height: 0;
    border-style: solid;
}

.npc-talk .talk-word::before {
    border-width: 7px 10px 7px 0;
    border-color: transparent #6a2a22 transparent transparent;
    filter: drop-shadow(-2px 2px 0 rgba(58, 14, 10, 0.25));
}

.npc-talk .talk-word::after {
    left: -6px;
    border-width: 5px 8px 5px 0;
    border-color: transparent #1f1210 transparent transparent;
}

.my-talk .talk-word::before,
.my-talk .talk-word::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 16px;
    width: 0;
    height: 0;
    border-style: solid;
}

.my-talk .talk-word::before {
    border-width: 7px 0 7px 10px;
    border-color: transparent transparent transparent #3a5a2a;
    filter: drop-shadow(2px 2px 0 rgba(15, 31, 10, 0.25));
}

.my-talk .talk-word::after {
    right: -6px;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #121a0e;
}

/* ====== 深色模式 ====== */
.dark .npc-name {
    background:
        radial-gradient(circle at 20% 30%, rgba(200, 150, 130, 0.06) 0%, transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(120, 40, 30, 0.20) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, #4a1612 0%, #2a0a08 100%);
    box-shadow:
        0 4px 0 #1a0604,
        0 6px 14px rgba(0, 0, 0, 0.35),
        inset 0 -3px 6px rgba(0, 0, 0, 0.30),
        inset 0 2px 10px rgba(255, 200, 180, 0.04);
    border-color: rgba(120, 50, 40, 0.20);
    color: #d8ccc4;
    border-radius: 2px;
}

.dark .npc-name:hover {
    box-shadow:
        0 6px 0 #1a0604,
        0 12px 24px rgba(0, 0, 0, 0.30),
        inset 0 -3px 6px rgba(0, 0, 0, 0.25),
        inset 0 2px 10px rgba(255, 200, 180, 0.08);
}

.dark .npc-name:active {
    box-shadow:
        0 2px 0 #1a0604,
        0 4px 10px rgba(0, 0, 0, 0.30),
        inset 0 2px 6px rgba(0, 0, 0, 0.30),
        inset 0 -1px 4px rgba(255, 200, 180, 0.02);
}

.dark .my-name {
    background:
        radial-gradient(circle at 25% 35%, rgba(160, 200, 140, 0.06) 0%, transparent 55%),
        radial-gradient(circle at 75% 65%, rgba(50, 90, 40, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, #1f3316 0%, #0f1a0a 100%);
    box-shadow:
        0 4px 0 #080f04,
        0 6px 14px rgba(0, 0, 0, 0.35),
        inset 0 -3px 6px rgba(0, 0, 0, 0.30),
        inset 0 2px 10px rgba(200, 230, 180, 0.04);
    border-color: rgba(60, 100, 40, 0.18);
    color: #d0d8c4;
    border-radius: 2px;
}

.dark .my-name:hover {
    box-shadow:
        0 6px 0 #080f04,
        0 12px 24px rgba(0, 0, 0, 0.30),
        inset 0 -3px 6px rgba(0, 0, 0, 0.25),
        inset 0 2px 10px rgba(200, 230, 180, 0.08);
}

.dark .my-name:active {
    box-shadow:
        0 2px 0 #080f04,
        0 4px 10px rgba(0, 0, 0, 0.30),
        inset 0 2px 6px rgba(0, 0, 0, 0.30),
        inset 0 -1px 4px rgba(200, 230, 180, 0.02);
}

.dark .npc-talk .talk-word {
    border-color: #4a1e18;
    background:
        radial-gradient(circle at 30% 40%, rgba(140, 70, 50, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(80, 30, 20, 0.10) 0%, transparent 50%),
        #120a08;
    color: #c4b8b0;
    box-shadow:
        -6px 6px 0 0 #1a0604,
        inset 0 1px 0 rgba(140, 80, 60, 0.06);
    border-radius: 2px;
}

.dark .my-talk .talk-word {
    border-color: #2a4a1a;
    background:
        radial-gradient(circle at 25% 30%, rgba(140, 180, 120, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 75% 75%, rgba(50, 90, 30, 0.08) 0%, transparent 50%),
        #0a1008;
    color: #b8c4ac;
    box-shadow:
        6px 6px 0 0 #080f04,
        inset 0 1px 0 rgba(140, 180, 120, 0.05);
    border-radius: 2px;
}

.dark .npc-talk .talk-word::before {
    border-color: transparent #4a1e18 transparent transparent;
    filter: drop-shadow(-2px 2px 0 rgba(26, 6, 4, 0.30));
}

.dark .npc-talk .talk-word::after {
    border-color: transparent #120a08 transparent transparent;
}

.dark .my-talk .talk-word::before {
    border-color: transparent transparent transparent #2a4a1a;
    filter: drop-shadow(2px 2px 0 rgba(8, 15, 4, 0.30));
}

.dark .my-talk .talk-word::after {
    border-color: transparent transparent transparent #0a1008;
}

/* ====== 小屏幕适配 (≤768px) ====== */
@media (max-width: 768px) {

    .npc-talk,
    .my-talk {
        gap: 8px;
        margin-bottom: 20px;
    }

    .npc-name,
    .my-name {
        font-size: 0.9em;
        padding: 2px 4px;
        border-radius: 2px;
        max-width: 64px;
        margin-top: 0;
        transform: translateY(-1px);
        box-shadow:
            0 3px 0 rgba(0, 0, 0, 0.22),
            0 4px 12px rgba(0, 0, 0, 0.08),
            inset 0 -2px 4px rgba(0, 0, 0, 0.15),
            inset 0 2px 8px rgba(255, 255, 255, 0.06);
    }

    .npc-name:hover,
    .my-name:hover {
        transform: translateY(-2px);
        box-shadow:
            0 4px 0 rgba(0, 0, 0, 0.18),
            0 8px 20px rgba(0, 0, 0, 0.06),
            inset 0 -2px 4px rgba(0, 0, 0, 0.12),
            inset 0 2px 8px rgba(255, 255, 255, 0.10);
    }

    .npc-name:active,
    .my-name:active {
        transform: translateY(2px);
        box-shadow:
            0 1px 0 rgba(0, 0, 0, 0.28),
            0 3px 8px rgba(0, 0, 0, 0.06),
            inset 0 2px 4px rgba(0, 0, 0, 0.18),
            inset 0 -1px 4px rgba(255, 255, 255, 0.03);
    }

    .talk-word {
        padding: 4px 4px;
        font-size: 0.92em;
        border-width: 1.5px;
        border-radius: 2px;
    }

    .npc-talk .talk-word {
        border-radius: 2px;
    }

    .my-talk .talk-word {
        border-radius: 2px;
    }

    /* 小屏 · 箭头缩小 */
    .npc-talk .talk-word::before {
        left: -8px;
        top: 12px;
        border-width: 5px 8px 5px 0;
    }
    .npc-talk .talk-word::after {
        left: -5px;
        top: 12px;
        border-width: 4px 6px 4px 0;
    }

    .my-talk .talk-word::before {
        right: -8px;
        top: 12px;
        border-width: 5px 0 5px 8px;
    }
    .my-talk .talk-word::after {
        right: -5px;
        top: 12px;
        border-width: 4px 0 4px 6px;
    }

    /* 小屏 · 阴影缩小 */
    .npc-talk .talk-word {
        box-shadow: -4px 4px 0 0 #3a0e0a;
    }
    .my-talk .talk-word {
        box-shadow: 4px 4px 0 0 #0f1f0a;
    }

    .dark .npc-talk .talk-word {
        box-shadow: -4px 4px 0 0 #1a0604;
    }
    .dark .my-talk .talk-word {
        box-shadow: 4px 4px 0 0 #080f04;
    }
}

/* ========== 全局重置 & 基础 ========== */

/* ========== 主卡片 ========== */
.user-card {
  width: 100%;
  background: #2a241e;
  background-image: 
    repeating-linear-gradient(45deg, rgba(60,50,40,0.1) 0px, rgba(60,50,40,0.1) 2px, 
                              transparent 2px, transparent 6px);
  border: 2px solid #5a4a3a;
  border-radius: 4px;
  padding: 0px;
  margin: 0;
  box-shadow: 0 0 20px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,0,0,0.5);
  position: relative;
  transition: all 0.2s;
}

/* 磨损撕边效果 */
.user-card::before {
  content: '';
  position: absolute;
  top: -4px; left: 10%;
  width: 80%; height: 6px;
  background: linear-gradient(90deg, transparent, #7a6a5a, #5a4a3a, #7a6a5a, transparent);
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(2px);
}

/* ========== 用户基本信息 ========== */
.user-basic {
  background: rgba(0,0,0,0.4);
  padding: 12px 14px;
  border-left: 2px solid #b85a2a;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  text-shadow: 0 0 4px #000;
}

.user-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: #e6d6b0;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.user-name::before {
  content: '☣ ';
  color: #b85a2a;
}

.user-basic p {
  margin: 2px 0;
  color: #b0a898;
}
.user-basic p:first-of-type {
  color: #c8b898;
}

/* ========== 状态圆环区域 ========== */
.user-stats {
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 12px 10px;
  margin-bottom: 12px;
  border: 1px solid #3a322a;
}

/* ----- 主要状态：HP / ST / SAN（粗进度条） ----- */
.main-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 10px;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-row .stat-label {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 52px;
    font-weight: bold;
    font-size: 0.9rem;
    color: #f0e8d0;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.stat-row .stat-label .sub {
    font-size: 0.5rem;
    font-weight: normal;
    color: #a09080;
    letter-spacing: 0;
}

.stat-track {
    flex: 1;
    height: 18px;
    background: #1a1612;
    border-radius: 10px;
    border: 1px solid #3a322a;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
    position: relative;
}

.stat-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    min-width: 0;
}

/* 光泽效果（主要状态专属） */
.stat-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
    border-radius: 10px 10px 0 0;
    pointer-events: none;
}

/* 各状态颜色（比圆环更亮，带发光） */
.stat-hp .stat-fill {
    background: linear-gradient(90deg, #a93226, #e74c3c);
    box-shadow: 0 0 14px rgba(231, 76, 60, 0.35);
}
.stat-st .stat-fill {
    background: linear-gradient(90deg, #ca6f1e, #f39c12);
    box-shadow: 0 0 14px rgba(243, 156, 18, 0.35);
}
.stat-san .stat-fill {
    background: linear-gradient(90deg, #1f618d, #3498db);
    box-shadow: 0 0 14px rgba(52, 152, 219, 0.35);
}

.stat-value {
    min-width: 52px;
    text-align: right;
    font-size: 0.75rem;
    font-weight: bold;
    color: #d0c8b8;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}
.stat-value .max {
    color: #7a7068;
    font-weight: normal;
    font-size: 0.65rem;
}

/* ===== 次要状态：饱食 / 水分 / 幸运（细进度条） ===== */
.rect-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0 2px;
    border-top: 1px solid #2f2924;
    padding-top: 12px;
}

.rect {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    color: #b0a090;
}

.rect-label {
    display: flex;
    justify-content: space-between;
    min-width: 70px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rect-label span:first-child {
    color: #c8b898;
}
.rect-label .rval {
    font-weight: normal;
    color: #8a8078;
    font-size: 0.6rem;
}

.rect .track {
    flex: 1;
    height: 8px;
    background: #1a1612;
    border-radius: 6px;
    border: 1px solid #3a322a;
    overflow: hidden;
    box-shadow: inset 0 0 4px #000;
}

.rect .fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
    min-width: 0;
}

/* 次要状态颜色（保留原风格，偏暗哑光） */
.rect-food .fill {
    background: linear-gradient(90deg, #7a3a2a, #b85a3a);
}
.rect-water .fill {
    background: linear-gradient(90deg, #2a4a6a, #3a7a9a);
}
.rect-luck .fill {
    background: linear-gradient(90deg, #4a4a2a, #7a7a3a);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {

.main-stats {
    margin: 0 6px;
}

.rect {
    margin: 0 6px;
}

    .stat-row .stat-label {
        min-width: 40px;
        font-size: 0.75rem;
    }
    .stat-value {
        min-width: 44px;
        font-size: 0.65rem;
    }
    .stat-track {
        height: 14px;
    }
    .rect-label {
        min-width: 58px;
        font-size: 0.6rem;
    }
}

/* ========== 属性行 ========== */
.attribute {
  background: rgba(0,0,0,0.25);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 0.8rem;
  color: #b0a090;
  border: 1px solid #2a221a;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 6px;
}
.attribute span {
  white-space: nowrap;
}

/* ========== 技能、装备、物品区块 ========== */
.skill, .amor, .item {
  background: rgba(0,0,0,0.2);
  border-left: 2px solid #5a4a3a;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.skill .skill-header,
.amor .amor-header,
.item .item-header {
  font-weight: bold;
  color: #d0c0a0;
  border-bottom: 1px dashed #3a322a;
  padding-bottom: 4px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.skill ul, .amor ul, .item ul {
  list-style: none;
  padding-left: 0;
  margin: 4px 0;
}
.skill li, .amor li, .item li {
  padding: 2px 0 2px 16px;
  position: relative;
  color: #b8a890;
}
.skill li::before {
  content: '▸ ';
  color: #b85a2a;
  position: absolute;
  left: 0;
}
.amor li::before {
  content: '⚔ ';
  color: #b87a3a;
  position: absolute;
  left: 0;
}
.item li::before {
  content: '▪ ';
  color: #6a8a5a;
  position: absolute;
  left: 0;
}

/* ========== 折叠面板（目标/人际关系） ========== */
.user-card details {
  margin: 8px 0 4px;
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  border: 1px solid #2a221a;
  padding: 4px 8px;
}

.user-card details summary {
  cursor: pointer;
  font-weight: bold;
  color: #c8b898;
  padding: 4px 0;
  font-size: 0.9rem;
  outline: none;
  user-select: none;
}
.user-card details summary::-webkit-details-marker {
  color: #b85a2a;
}

.user-card details p {
  margin: 4px 0;
  padding: 2px 6px;
  font-size: 0.8rem;
  color: #b0a090;
  border-left: 2px solid #3a322a;
  padding-left: 10px;
}

.user-card details p strong {
  color: #d0c0a0;
}

/* ========== 响应式：≤768px ========== */
@media screen and (max-width: 768px) {

  .user-basic {
    padding: 4px 6px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    border-left-width: 2px;
  }
  .user-name {
    font-size: 0.9rem;
  }

  .user-stats {
    padding: 4px 4px;
    margin-bottom: 6px;
  }

  .circle-line {
    gap: 4px;
    justify-content: center;
  }
  .circle {
    width: 60px;
    height: 60px;
  }
  .center-label .num {
    font-size: 0.75rem;
  }
  .center-label .cname {
    font-size: 0.45rem;
  }

  .rect {
    font-size: 0.65rem;
    gap: 4px;
  }
  .rect-label {
    min-width: 50px;
  }
  .track {
    height: 8px;
  }

  .attribute {
    padding: 4px 6px;
    margin: 6px 0;
    font-size: 0.65rem;
    gap: 0px 4px;
  }

  .skill, .amor, .item {
    padding: 4px 6px;
    margin: 4px 0;
    font-size: 0.7rem;
    border-left-width: 2px;
  }
  .skill li, .amor li, .item li {
    padding: 1px 0 1px 12px;
  }

  .user-card details {
    margin: 4px 0;
    padding: 2px 6px;
  }
  .user-card details summary {
    font-size: 0.75rem;
  }
  .user-card details p {
    font-size: 0.65rem;
    padding: 1px 4px;
  }
}

/* ===== 末日生存风格 Action 按钮（蓝灰配色） ===== */
.action,
.action-btn,
button.action {
    background: linear-gradient(180deg, #2e3a3a 0%, #1a2222 100%) !important;
    color: #c8d0d0 !important;
    border: 2px solid #3a5a6a !important;
    border-radius: 4px !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.6),
        2px 2px 0 #0a1a1a,
        0 0 8px rgba(0,0,0,0.5) !important;
    font-weight: bold !important;
    font-family: 'Courier New', 'Consolas', monospace !important;
    text-shadow: 0 0 4px #000 !important;
    letter-spacing: 0.5px;
    padding: 4px 14px;
    position: relative;
    transition: all 0.15s ease-in-out !important;
}

/* 磨损纹理（同风格） */
.action::before,
.action-btn::before,
button.action::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, 
        rgba(255,255,255,0.02) 0px, 
        rgba(255,255,255,0.02) 2px, 
        transparent 2px, 
        transparent 6px);
    border-radius: inherit;
    opacity: 0.3;
}

/* 悬停 – 下沉效果 */
.action:hover,
.action-btn:hover,
button.action:hover {
    background: linear-gradient(180deg, #242e2e 0%, #121a1a 100%) !important;
    color: #d8e0e0 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.8),
        0px 0px 0 #0a1a1a,
        0 0 6px rgba(0,0,0,0.7) !important;
    border-color: #4a6a7a !important;
}

/* 按下激活 */
.action:active,
.action-btn:active,
button.action:active {
    background: linear-gradient(180deg, #121a1a 0%, #080e0e 100%) !important;
    transform: translate(3px, 3px) scale(0.98) !important;
    box-shadow: 
        inset 0 3px 6px rgba(0,0,0,0.9),
        0px 0px 0 transparent !important;
}

/* 聚焦 – 辐射脉冲（冷色荧光） */
@keyframes action-pulse {
    0%, 100% {
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.6),
            2px 2px 0 #0a1a1a,
            0 0 10px rgba(60, 160, 200, 0.3),
            0 0 20px rgba(60, 160, 200, 0.1);
    }
    50% {
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.6),
            2px 2px 0 #0a1a1a,
            0 0 15px rgba(80, 200, 240, 0.6),
            0 0 30px rgba(80, 200, 240, 0.2);
    }
}
.action:focus,
.action-btn:focus,
button.action:focus {
    animation: action-pulse 1.5s infinite;
    outline: none;
    border-color: #5a8a9a !important;
}

/* ========== 深色模式（.dark） ========== */
.dark .action,
.dark .action-btn,
.dark button.action {
    background: linear-gradient(180deg, #1a2a2a 0%, #0a1414 100%) !important;
    border-color: #2a5a6a !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.8),
        3px 3px 0 #000,
        0 0 12px rgba(0,0,0,0.7) !important;
    color: #b0c8c8 !important;
}

.dark .action:hover,
.dark .action-btn:hover,
.dark button.action:hover {
    background: linear-gradient(180deg, #122020 0%, #060e0e 100%) !important;
    border-color: #3a6a7a !important;
    color: #c8d8d8 !important;
}

.dark .action:focus,
.dark .action-btn:focus,
.dark button.action:focus {
    border-color: #6aaac0 !important;
}