css
/*
 * =================================================================
 *   Because I don't want to get hurt, I'll max out my defense. Style
 *   Theme by Maple Tree's System Admin (Leisurely Ver.)
 *   Color Palette:
 *   - Maple Cabin Cream: #FFFDF5 (小木屋の奶油白)
 *   - Warm Tree Bark Brown: #6D4C41 (温暖の树皮棕)
 *   - Sweet Maple Syrup Orange: #FFB74D (枫糖浆の甜橙色)
 *   - Syrup's Shell Green: #AED581 (糖浆の龟壳绿)
 *   - Sunlit Wood: #FFF8E1 (日光下の木板)
 *   - Fluffy Wool White: #FFFFFF (绵羊の纯白)
 * =================================================================
 */

/*
 * -------------------------------------
 *   ★ 模块零：全局字体设定 (新世界在线通用字体)
 * -------------------------------------
 */
/* 整个游戏的文字都圆滚滚的，很可爱吧？ */
body, button, input, textarea, summary, th, td {
    font-family: 'Noto Sans SC', 'Helvetica Neue', 'Arial', sans-serif !important;
}

/*
 * -------------------------------------
 *   模块一：对话气泡美化 (大枫树公告板样式)
 * -------------------------------------
 */
/* 这是你的专属聊天框，上面有我们公会的标志哦！🍁 */
.group .bg-gray-100\/90 {
    background: #FFFDF5 !important; /* 温暖的小木屋奶油白 */
    border: 2px solid #D7CCC8 !important; /* 柔和的木纹边框 */
    border-radius: 12px !important; /* 圆滚滚的，更可爱！ */
    box-shadow: 0 4px 12px rgba(188, 170, 164, 0.25) !important; /* 柔和的阴影 */
    color: #6D4C41 !important; /* 像巧克力一样醇厚的深棕色文字 */
    padding: 14px !important;
    position: relative;
    overflow: visible;
}

/* 在对话框的右上角，悄悄放上一片小枫叶！ */
.group .bg-gray-100\/90::after {
    content: '🍁';
    position: absolute;
    top: -10px;
    right: 12px;
    font-size: 20px;
    opacity: 0.8;
    transform: rotate(15deg);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}


/*
 * -------------------------------------
 *   模块二：公会按钮美化 (枫糖浆按钮)
 * -------------------------------------
 */
/* 甜甜的枫糖浆按钮，按下去感觉会很有活力！ */
.flex.items-center.gap-2.pb-2 > button,
.MuiButtonBase-root.MuiButton-root.MuiButton-text {
    background: #FFB74D !important; /* 甜甜的枫糖浆橙色 */
    color: #FFFFFF !important; /* 像棉花糖一样的白色文字 */
    border: none !important;
    border-radius: 20px !important; /* 圆滚滚的药丸形状 */
    box-shadow: 0 3px 0px #E69138, 0 5px 8px rgba(0,0,0,0.15) !important; /* 一点点立体感 */
    font-weight: bold !important; /* 标题略微加粗 */
    text-transform: none !important;
    transition: all 0.1s ease-out !important;
    padding: 6px 18px !important;
    margin: 0 4px !important;
    position: relative;
    top: 0;
}
/* 按下去的时候会“啵”地一下~ */
.flex.items-center.gap-2.pb-2 > button:hover,
.MuiButtonBase-root.MuiButton-root.MuiButton-text:hover {
    background: #FFA726 !important; /* 颜色更深一点的糖浆 */
    color: #FFFFFF !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 0px #E69138, 0 3px 6px rgba(0,0,0,0.15) !important;
}
.flex.items-center.gap-2.pb-2 > button:active,
.MuiButtonBase-root.MuiButton-root.MuiButton-text:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0px #E69138, 0 1px 2px rgba(0,0,0,0.2) !important;
}

/*
 * -------------------------------------
 *   模块三：多余元素隐藏
 * -------------------------------------
 */
/* 有些用不到的东西就先藏起来吧！ */
.MuiButtonBase-root.MuiButton-root.MuiButton-default.css-w13mdt,
.absolute.z-40 .px-4.py-2.hover\:bg-indigo-100:nth-child(5),
.css-nkqe49 {
    /* display: none !important; */
}

/*
 * -------------------------------------
 *   模块四：输入栏美化 (留言板)
 * -------------------------------------
 */
/* 在这里写下你想说的话吧，就像在公会的留言板上一样。 */
#ai-chat-input {
    background-color: #FFF8E1 !important; /* 像被阳光晒过的木板颜色 */
    border: 1px solid #D7CCC8 !important; /* 柔和的边框 */
    border-radius: 8px !important;
    color: #6D4C41 !important; /* 清晰的深棕色文字 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important;
    transition: all 0.2s ease;
}
/* 输入的时候，会有柔和的光晕哦！ */
#ai-chat-input:focus {
    border-color: #FFB74D !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.3) !important;
}
/* 输入栏的背景是透明的，可以看到后面的小木屋背景~ */
#ai-chat-bottom-input {
    background: transparent !important;
    backdrop-filter: none !important;
}


/*
 * -------------------------------------
 *   模块五：加载动画替换 (技能准备中)
 * -------------------------------------
 */
/* 定义『技能准备』动画，噗扭噗扭的~ */
@keyframes skillLoading {
    0%, 100% { content: "正在进行骚操作寻找游戏bug ."; transform: scale(1); }
    33% { content: "正在进行骚操作寻找游戏bug .."; transform: scale(1.02); }
    66% { content: "正在进行骚操作寻找游戏bug ..."; transform: scale(1); }
}

/* 步骤1: 隐藏原来的加载点 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 步骤2: 准备好展示过程的区域 */
.flex.items-center.justify-center.w-6.h-5 {
    width: auto !important;
    height: 30px !important;
    position: relative;
}

/* 步骤3: 开始准备！噗扭噗扭~ */
.flex.items-center.justify-center.w-6.h-5::after {
    content: "考え中 ...";
    position: absolute;
    font-size: 14px;
    font-weight: bold !important; /* 标题略微加粗 */
    color: #FFB74D; /* 使用甜甜的枫糖浆橙色 */
    text-shadow: 1px 1px 2px #FFF8E1;
    animation: skillLoading 1.8s infinite ease-in-out;
}

/*
 * -------------------------------------
 *   模块六：『状态面板』数据美化 (Status Panel)
 * -------------------------------------
 */
/* 这里记录着你的成长，每一点都很宝贵！ */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
    background-color: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    margin-top: 12px !important;
    border-radius: 0;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
}

/* 徽记植入：象征绝对防御的大盾徽章！🛡️ */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236D4C41' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3Cpath fill='%23FFB74D' d='M12 2.09L4.5 5.5v5.5c0 4.81 3.25 9.26 7.5 10.41 4.25-1.15 7.5-5.6 7.5-10.41V5.5L12 2.09z'/%3E%3Cpath fill='white' d='M12 6l-1.45 2.91L7.5 9.5l2.45 2.3L9.1 15 12 13.42 14.9 15l-.85-3.2L16.5 9.5l-3.05-.59L12 6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* 文本重塑：用小标签来显示数据，很可爱吧？ */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j p {
    color: #8D6E63 !important; /* 柔和的棕色文字 */
    font-size: 12px !important;
    font-family: 'monospace', 'Courier New' !important; /* 游戏数据风格字体 */
    margin: 2px 8px 2px 0 !important;
    padding: 3px 8px !important;
    background: #F5F5F5; /* 浅浅的灰色背景 */
    border: 1px solid #E0E0E0;
    border-radius: 10px; /* 圆滚滚的小标签 */
    line-height: 1.2;
}

/*
 * =================================================================
 *   模块七：『任务委托』折叠栏美化
 * =================================================================
 */
/*
 * 『委托板』主体 (details 标签)
 * 这是来自运营的委托，用温暖的木材做的。
 */
details {
    background: #FFFDF5 !important; /* 奶油白背景 */
    border: 1px solid #D7CCC8 !important; /* 柔和的木纹边框 */
    border-radius: 10px !important;
    margin: 1.5em 0 !important;
    box-shadow: 0 2px 6px rgba(188, 170, 164, 0.2) !important;
    transition: all 0.3s ease-in-out;
}

/*
 * 『委托标题』 (summary 标签)
 * 委托的概要，简单明了。
 */
summary {
    font-size: 1.2em !important;
    font-weight: bold !important; /* 标题略微加粗 */
    color: #6D4C41 !important; /* 醇厚的深棕色 */
    padding: 0.8em 1.2em !important;
    cursor: pointer;
    list-style: none; /* 移除默认的小箭头 */
    position: relative;
    background-color: #FFF8E1 !important; /* 稍深的日光木板色 */
    border-radius: 10px 10px 0 0;
    outline: none !important;
}
/* 展开委托时，标题下有分割线 */
details[open] > summary {
    border-bottom: 1px solid #D7CCC8;
    border-radius: 10px 10px 0 0;
}

/*
 * 『展开符号』(summary 的伪元素)
 * 这是小乌龟『糖浆』的颜色哦！代表着稳步前进！
 */
summary::before {
    content: '▶'; /* 可爱的小三角 */
    color: #AED581; /* 糖浆的龟壳绿！ */
    position: absolute;
    left: 0.8em;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    font-size: 0.8em;
}
details[open] > summary::before {
    transform: translateY(-50%) rotate(90deg); /* 展开时旋转90度 */
}
/* 调整符号和文字的间距 */
summary {
    padding-left: 2em !important;
}


/*
 * 『委托详情』(details 内部的所有内容)
 * 委托的详细内容，要仔细看哦！
 */
details > *:not(summary) {
    padding: 1.2em 1.5em 1.5em 1.5em;
    color: #6D4C41 !important; /* 清晰的棕色正文 */
    text-shadow: none !important;
}

/*
 * 『讨伐报告』 (Markdown 表格特别美化)
 * 报告可以左右滑动查看，很方便！
 */
details table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 1em !important;
    display: block;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #FFCC80 #FFF8E1; /* 枫糖色的滚动条 */
}

/* 表头，记录着项目分类 */
details th {
    background-color: #FFE0B2 !important; /* 淡淡的橙色，像轻薄的糖浆 */
    font-weight: bold !important; /* 标题略微加粗 */
    padding: 0.8em !important;
    text-align: center !important;
    border-bottom: 2px solid #FFB74D !important; /* 枫糖浆色的分割线 */
    color: #BF360C !important; /* 深橙色文字，更醒目 */
}

/* 表格单元格，记录着具体数据 */
details td {
    padding: 0.8em !important;
    border-bottom: 1px solid #FFE0B2 !important;
    text-align: center;
    color: #6D4C41 !important;
}

/* 偶数行用淡色背景，看得更清楚。 */
details tr:nth-of-type(even) {
    background-color: #FAFAFA !important;
}

/* 悬停时没有特殊效果，专注于内容本身。 */
details tr:hover {
    background-color: transparent !important;
}