higu-map,stl-map{display:block;max-width:760px;margin:12px 0;padding:12px;border-radius:14px;font-size:16px;line-height:1.35;overflow:hidden;box-sizing:border-box}
higu-map{border:1px solid #6b1f1f;background:#15110f;color:#f7eee2}
stl-map{border:1px solid #6e5b8f;background:#151421;color:#f5f0ff}
higu-map map-head,stl-map map-head{display:block;margin-bottom:8px;padding-bottom:8px}
higu-map map-head{border-bottom:1px solid #5b3d32}
stl-map map-head{border-bottom:1px solid #5d5275}
higu-map map-title,stl-map map-title{display:block;font-size:20px;font-weight:700;color:#ffffff}
higu-map map-sub,stl-map map-sub{display:block;margin-top:3px;font-size:14px}
higu-map map-sub{color:#e3c9a8}
stl-map map-sub{color:#ddd2ff}
higu-map map-legend,stl-map map-legend{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px 0}
higu-map map-legend span,stl-map map-legend span{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:2px 8px;border-radius:999px;font-size:13px;box-sizing:border-box}
higu-map map-legend span{border:1px solid #5b3d32;background:#211916;color:#f7eee2}
stl-map map-legend span{border:1px solid #5d5275;background:#211d32;color:#f5f0ff}
higu-map map-legend i,stl-map map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%}
higu-map map-legend i.now,stl-map map-legend i.now{background:#4f8f63}
higu-map map-legend i.done,stl-map map-legend i.done{background:#f4eee4}
higu-map map-legend i.alert,stl-map map-legend i.alert{background:#d94b4b}
higu-map map-legend i.lock,stl-map map-legend i.lock{background:#8b7c70}
higu-map map-legend i.dark,stl-map map-legend i.dark{background:#0b0b0b;border:1px solid #666666}
higu-map map-board,stl-map map-board{display:grid;gap:8px;border-radius:12px;padding:10px;box-sizing:border-box;overflow:hidden}
higu-map map-board{grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #4e3329;background:#211916}
stl-map map-board{grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #4c425f;background:#211d32}
higu-map map-zone,stl-map map-zone{display:block;margin:4px 0 2px 0;padding:4px 8px;border-radius:8px;font-size:13px;font-weight:700;grid-column:1/-1}
higu-map map-zone{background:#33231d;color:#f4d9b8}
stl-map map-zone{background:#302845;color:#eadfff}
higu-map room,stl-map room{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:74px;padding:6px;border:2px solid;border-radius:12px;box-sizing:border-box;text-align:center}
higu-map room b,stl-map room b{display:block;font-size:22px;line-height:1}
higu-map room span,stl-map room span{display:block;margin-top:4px;font-size:13px;font-weight:700}
higu-map room small,stl-map room small{display:block;margin-top:2px;font-size:11px}
higu-map room[s="now"],stl-map room[s="now"]{background:#17351f;border-color:#62b979;color:#ffffff}
higu-map room[s="done"],stl-map room[s="done"]{background:#f4eee4;border-color:#ffffff;color:#1b1308}
higu-map room[s="done"] small,stl-map room[s="done"] small{color:#4d3b2f}
higu-map room[s="alert"],stl-map room[s="alert"]{background:#3a1414;border-color:#e35a5a;color:#ffffff}
higu-map room[s="lock"],stl-map room[s="lock"]{background:#2a2623;border-color:#8b7c70;color:#d8cfc5}
higu-map room[s="dark"],stl-map room[s="dark"]{background:#080808;border-color:#51443a;color:#cfc2b4}
higu-map map-foot,stl-map map-foot{display:block;margin-top:10px;padding:8px;font-size:14px;border-radius:0 8px 8px 0}
higu-map map-foot{border-left:3px solid #b94747;background:#211916;color:#f1dfc7}
stl-map map-foot{border-left:3px solid #8f6ed1;background:#211d32;color:#eee4ff}
@media(max-width:640px){higu-map,stl-map{max-width:100%;padding:10px;font-size:16px}higu-map map-title,stl-map map-title{font-size:18px}higu-map map-board,stl-map map-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px}higu-map room,stl-map room{min-height:68px;padding:5px}higu-map room b,stl-map room b{font-size:20px}higu-map room span,stl-map room span{font-size:13px}higu-map room small,stl-map room small{font-size:11px}}
@media(max-width:380px){higu-map map-board,stl-map map-board{grid-template-columns:1fr}higu-map room,stl-map room{min-height:58px}}
/* ===== 寒蝉业卒 · 雏见泽碎片轮回主题内置CSS ===== */
details {
    background: linear-gradient(180deg, #f1e6c8 0%, #d8c99d 52%, #b7aa7d 100%);
    border: 2px solid #7a1f2b;
    border-radius: 6px;
    margin-bottom: 16px;
    padding: 14px 18px;
    color: #201914;
    font-family: "Noto Serif SC", "Songti SC", "SimSun", "Georgia", serif;
    line-height: 1.75;
    box-shadow: 0 0 0 3px #efe2bd, 0 0 0 5px #6d7a42, 0 8px 22px rgba(32, 25, 20, 0.32), inset 0 0 36px rgba(122, 31, 43, 0.12);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
details[open] {
    background: linear-gradient(180deg, #f4e8c8 0%, #d9c58f 50%, #a99b69 100%);
    border-color: #9f2435;
    box-shadow: 0 0 0 3px #f6e8bf, 0 0 0 5px #7c8a4a, 0 0 18px rgba(159, 36, 53, 0.38), 0 8px 26px rgba(32, 25, 20, 0.36), inset 0 0 46px rgba(122, 31, 43, 0.16);
}
summary {
    cursor: pointer;
    font-size: 1.12em;
    font-weight: 700;
    color: #6f1c27;
    padding: 6px 0;
    outline: none;
    list-style: none;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 #f8edc9;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}
summary::-webkit-details-marker {
    display: none;
}
summary::before {
    content: "⛩";
    color: #65763d;
    font-size: 1.05em;
    margin-right: 8px;
}
details[open] summary {
    color: #9f2435;
    border-bottom: 1px solid #65763d;
    padding-bottom: 10px;
    margin-bottom: 14px;
    text-shadow: 0 1px 0 #f8edc9;
}
details[open] summary::before {
    content: "碎";
    color: #9f2435;
    font-weight: 900;
}
summary:hover {
    color: #b52a3d;
    text-shadow: 0 1px 0 #fff3cd;
}
p,
ul,
ol {
    margin: 8px 0;
    color: #201914;
    line-height: 1.75;
}
strong,
b {
    color: #7a1f2b;
    font-weight: 700;
    letter-spacing: 0.3px;
}
em,
i {
    color: #4d5c2f;
}
li {
    margin-bottom: 10px;
    padding-left: 8px;
    color: #2f251d;
    border-left: 2px solid transparent;
    transition: border-left-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
li strong {
    color: #9f2435;
    text-shadow: 0 1px 0 rgba(248, 237, 201, 0.8);
}
li:hover {
    color: #17110d;
    border-left-color: #9f2435;
    background: linear-gradient(90deg, rgba(159, 36, 53, 0.14) 0%, rgba(101, 118, 61, 0.08) 70%, transparent 100%);
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.95em;
    background: #f8edc9;
    border: 1px solid #65763d;
    box-shadow: inset 0 0 18px rgba(101, 118, 61, 0.12);
}
th,
td {
    padding: 9px 11px;
    border-bottom: 1px solid rgba(122, 31, 43, 0.24);
    text-align: left;
    color: #201914;
}
th {
    background: linear-gradient(180deg, #d6c58f 0%, #b8a76f 100%);
    color: #5b1821;
    font-weight: 700;
    font-size: 0.86em;
    letter-spacing: 1px;
    border-bottom: 2px solid #7a1f2b;
}
tr:nth-child(even) td {
    background: rgba(101, 118, 61, 0.08);
}
tr:hover td {
    background: rgba(159, 36, 53, 0.14);
    color: #17110d;
}
hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #65763d, #9f2435, #65763d, transparent);
    margin: 18px 0;
}
blockquote {
    margin: 12px 0;
    padding: 10px 14px;
    color: #211916;
    background: rgba(248, 237, 201, 0.72);
    border-left: 4px solid #9f2435;
    box-shadow: inset 0 0 18px rgba(122, 31, 43, 0.08);
}
code {
    color: #7a1f2b;
    background: #efe2bd;
    border: 1px solid rgba(101, 118, 61, 0.72);
    border-radius: 4px;
    padding: 2px 5px;
    font-family: "Georgia", "Consolas", monospace;
}
pre {
    color: #f8edc9;
    background: #211916;
    border: 1px solid #7a1f2b;
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.34);
}
pre code {
    color: #f8edc9;
    background: transparent;
    border: none;
    padding: 0;
}
a {
    color: #7a1f2b !important;
    text-decoration: underline;
    text-decoration-color: #65763d;
}
a:hover {
    color: #b52a3d !important;
}
.hover-tip {
    position: relative;
    display: inline-block;
    cursor: help;
    color: #9f2435;
    font-weight: 700;
    border-bottom: 1px dotted #65763d;
}
.hover-tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #f8edc9;
    border: 2px solid #7a1f2b;
    border-radius: 6px;
    padding: 10px 14px;
    color: #201914;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    max-width: 260px;
    width: max-content;
    white-space: pre-wrap;
    box-shadow: 0 0 0 2px #efe2bd, 0 0 0 4px #65763d, 0 6px 16px rgba(32, 25, 20, 0.3);
    margin-left: 14px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.hover-tip::before {
    content: "";
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 10px solid #7a1f2b;
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.hover-tip:hover::after,
.hover-tip:hover::before {
    opacity: 1;
    visibility: visible;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #211916;
}
::-webkit-scrollbar-thumb {
    background: #7a1f2b;
    border-radius: 4px;
    border: 1px solid #65763d;
}
::-webkit-scrollbar-thumb:hover {
    background: #9f2435;
}
::selection {
    background: #7a1f2b;
    color: #f8edc9;
}

/* 评论区背景 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: linear-gradient(180deg, #f0ebe3 0%, #f5f0e8 100%) !important;
  border-top: 1px solid #d4c5b5 !important;
  box-shadow: 0 -2px 10px rgba(92, 64, 51, 0.05) !important;
  position: relative !important;
}

/* 评论区标题 */
div.text-lg.font-bold {
  color: #5c4033 !important;
  font-family: "Noto Serif JP", serif !important;
  letter-spacing: 2px !important;
}

/* 评分星星 */
span.MuiRating-iconFilled svg {
  color: #8b7355 !important;
}

span.MuiRating-iconEmpty svg {
  color: #d4c5b5 !important;
}

/* 评论输入框 */
textarea.rc-textarea {
  background: #faf7f2 !important;
  border: 1px solid #c4a882 !important;
  border-radius: 2px !important;
  color: #3d3d3d !important;
  font-family: "Noto Serif JP", serif !important;
  transition: all 0.25s ease !important;
}

textarea.rc-textarea:focus {
  border-color: #8b7355 !important;
}

/* 发送按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
  background: linear-gradient(135deg, #8b7355 0%, #5c4033 100%) !important;
  border-radius: 2px !important;
  transition: all 0.25s ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
  background: linear-gradient(135deg, #c44b4b 0%, #8b3030 100%) !important;
}

div[data-state="closed"] svg[data-icon="Send03"] {
  color: #f5f0e8 !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #8b7355 0%, #5c4033 100%) !important;
  color: #f5f0e8 !important;
  font-weight: 500 !important;
  border-radius: 2px !important;
}

button.MuiButton-outlinedPrimary {
  border: 1px solid #c4a882 !important;
  color: #5c4033 !important;
  background: transparent !important;
  border-radius: 2px !important;
}

button.MuiButton-outlinedPrimary:hover {
  background: rgba(196, 75, 75, 0.08) !important;
  border-color: #c44b4b !important;
  color: #c44b4b !important;
}

/* 评论项 */
div.group.ml-0 {
  background: #faf7f2 !important;
  border-left: 2px solid #c4a882 !important;
  border-radius: 0 2px 2px 0 !important;
  padding: 10px !important;
  margin: 6px 0 !important;
  transition: all 0.25s ease !important;
}

div.group.ml-0:hover {
  background: rgba(196, 75, 75, 0.04) !important;
  border-left-color: #c44b4b !important;
}

/* 点赞按钮 */
button.text-gray-400 {
  color: #c4a882 !important;
  transition: all 0.25s ease !important;
}

button.text-gray-400:hover {
  color: #c44b4b !important;
}

/* 分页按钮 */
.MuiPaginationItem-root {
  background: transparent !important;
  border: 1px solid #d4c5b5 !important;
  color: #5c4033 !important;
  font-weight: 500 !important;
  border-radius: 2px !important;
  transition: all 0.25s ease !important;
}

.MuiPaginationItem-root:hover {
  background: rgba(196, 75, 75, 0.08) !important;
  border-color: #c44b4b !important;
  color: #c44b4b !important;
}

.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(135deg, #8b7355 0%, #5c4033 100%) !important;
  color: #f5f0e8 !important;
  border-color: #5c4033 !important;
}

.MuiPaginationItem-root.Mui-disabled {
  opacity: 0.4 !important;
}

/* 响应式微调 */
@media (max-width: 640px) {
  .bg-gray-100\/90.relative.inline-block {
    border-radius: 1px !important;
  }
  
  #ai-chat-bottom-input {
    border-radius: 1px !important;
  }
}
css
/* 基础容器样式 */
.narrative-flip-container {
  max-width: 600px;
  margin: 20px auto;
  font-family: 'Microsoft YaHei', sans-serif;
  background: #f4f4f5;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 状态栏样式 */
.current-situation {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  cursor: pointer;
}
.sit-content p { margin: 5px 0 0 0; font-size: 0.9em; }

/* 隐藏原始复选框 */
.flip-checkbox {
  display: none;
}

/* 切换开关UI (移到卡片上方更方便点击) */
.flip-switch-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  margin-bottom: 20px;
  padding: 10px;
  background: #e8e8e9;
  border-radius: 8px;
  transition: background 0.3s;
}
.flip-switch-label:hover {
  background: #dcdde1;
}
.flip-switch-track {
  width: 50px;
  height: 26px;
  background: #bdc3c7;
  border-radius: 13px;
  position: relative;
  margin-right: 10px;
  transition: background 0.3s;
}
.flip-switch-knob {
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.flip-switch-text {
  font-weight: bold;
  color: #555;
}

/* 3D翻转卡片核心逻辑 */
.flip-card {
  display: grid;
  perspective: 1000px;
}

.flip-front, .flip-back {
  grid-area: 1 / 1;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* 背面初始状态 */
.flip-back {
  transform: rotateY(180deg);
  background: #1a1a1a;
  color: #d3d3d3;
  border: 1px solid #444;
}

/* 🌟核心黑科技：使用 :has() 彻底摆脱 ID 依赖🌟 */
.narrative-flip-container:has(.flip-checkbox:checked) .flip-front {
  transform: rotateY(-180deg);
}
.narrative-flip-container:has(.flip-checkbox:checked) .flip-back {
  transform: rotateY(0deg);
}
.narrative-flip-container:has(.flip-checkbox:checked) .flip-switch-track {
  background: #3498db;
}
.narrative-flip-container:has(.flip-checkbox:checked) .flip-switch-knob {
  transform: translateX(24px);
}

/* 标签和正文排版 */
.story-label {
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e74c3c;
  text-align: center;
}
.flip-back .story-label {
  border-bottom: 2px solid #3498db;
  color: #3498db;
}
.story-body {
  line-height: 1.6;
  font-size: 15px;
  white-space: pre-wrap;
}
.flip-switch-label {
  background: #efe2bd;
  border: 1px solid #65763d;
  color: #201914;
  box-shadow: 0 2px 8px rgba(32, 25, 20, 0.16);
}
.flip-switch-label:hover {
  background: #f8edc9;
}
.flip-switch-track {
  background: #65763d;
  border: 1px solid #4d5c2f;
}
.flip-switch-knob {
  background: #f8edc9;
  box-shadow: 0 2px 5px rgba(32, 25, 20, 0.35);
}
.flip-switch-text {
  color: #5b1821;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.flip-front {
  background: linear-gradient(180deg, #f8edc9 0%, #e4d39f 100%);
  color: #201914;
  border: 1px solid #65763d;
  box-shadow: 0 3px 10px rgba(32, 25, 20, 0.18), inset 0 0 22px rgba(101, 118, 61, 0.08);
}
.flip-back {
  background: linear-gradient(180deg, #2f3d2a 0%, #20291f 52%, #171d17 100%);
  color: #f8edc9;
  border: 1px solid #9f2435;
  box-shadow: 0 3px 12px rgba(32, 25, 20, 0.36), inset 0 0 26px rgba(159, 36, 53, 0.14);
}
.flip-back p,
.flip-back ul,
.flip-back ol,
.flip-back li,
.flip-back .story-body {
  color: #f8edc9;
}
.flip-back strong,
.flip-back b {
  color: #ffdf9a;
}
.flip-back em,
.flip-back i {
  color: #f2b0a8;
}
.flip-back a {
  color: #ffdf9a !important;
  text-decoration-color: #d94a58;
}
.flip-back code {
  color: #ffdf9a;
  background: #171d17;
  border: 1px solid #65763d;
}
.flip-back blockquote {
  color: #f8edc9;
  background: rgba(248, 237, 201, 0.08);
  border-left: 4px solid #d94a58;
}
.story-label {
  color: #5b1821;
  border-bottom: 2px solid #7a1f2b;
  text-align: center;
  letter-spacing: 1px;
}
.flip-back .story-label {
  color: #ffdf9a;
  border-bottom: 2px solid #d94a58;
}
.story-body {
  color: inherit;
  line-height: 1.75;
  font-size: 16px;
  white-space: pre-wrap;
}
.narrative-flip-container .flip-checkbox:checked ~ .flip-switch-label .flip-switch-track {
  background: #9f2435;
  border-color: #7a1f2b;
}
.narrative-flip-container .flip-checkbox:checked ~ .flip-switch-label .flip-switch-knob {
  transform: translateX(24px);
}
.narrative-flip-container .flip-checkbox:checked ~ .flip-card .flip-front {
  transform: rotateY(-180deg);
}
.narrative-flip-container .flip-checkbox:checked ~ .flip-card .flip-back {
  transform: rotateY(0deg);
}