* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0b0e15; --fg: #f2eee6; --card: #121722; --card2: #151b27;
  --line: rgba(255,255,255,.09); --muted: #9299a8;
  --tag-bg: rgba(255,255,255,.07); --choice-bg: #141b27; --choice-border: rgba(255,255,255,.10);
  --num-bg: #292f3d; --swipe: #727a8c;
  --accent: #d8aa66; --accent-strong: #efc37e; --accent-cool: #8d7cff;
  --danger: #ff7777; --success: #6ed6a0; --shadow: 0 24px 80px rgba(0,0,0,.35);
  --reader-dim-opacity: 0;
}
body[data-theme="sepia"] {
  --bg: #1a1410; --fg: #d8c8a8; --card: #221a12; --card2: #211913;
  --line: #3a2e1e; --muted: #a89878;
  --tag-bg: #2a1e12; --choice-bg: #221a12; --choice-border: #3a2e1e;
  --num-bg: #3a2e1e; --swipe: #8a7a5a;
}
body[data-theme="dark"] {
  --bg: #0b0e15; --fg: #f2eee6; --card: #121722; --card2: #151b27;
}
body[data-theme="light"] {
  --bg: #f5f0e6; --fg: #2a2520; --card: #fffdf7; --card2: #ece4d4;
  --line: #d8cdb8; --muted: #6a6258;
  --tag-bg: #ded5c0; --choice-bg: #fffdf7; --choice-border: #d8cdb8;
  --num-bg: #d8cdb8; --swipe: #8a8070;
}
body[data-theme="eyecare"] {
  --bg: #dce5d2; --fg: #263026; --card: #e8eee2; --card2: #d3ddca;
  --line: #bac8af; --muted: #647061;
  --tag-bg: #ccd8c3; --choice-bg: #e5ece0; --choice-border: #b9c7af;
  --num-bg: #c8d4bf; --swipe: #6f7e6a;
}
body {
  min-height: 100vh;
  font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--fg); line-height: 1.7;
  transition: background .25s, color .25s;
  background-image:
    radial-gradient(circle at 12% -10%, rgba(141,124,255,.14), transparent 32rem),
    radial-gradient(circle at 88% 10%, rgba(216,170,102,.11), transparent 30rem);
  background-attachment: fixed;
}
#app { max-width: 1180px; margin: 0 auto; padding-bottom: 64px; }
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: var(--card2); position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--line);
}
.logo { font-size: 18px; font-weight: 600; cursor: pointer; }
.view { padding: 18px; }
.hidden { display: none !important; }
.row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
h2 { font-size: 20px; } h3 { font-size: 16px; margin: 10px 0; }

button {
  background: #5b6ef5; color: #fff; border: none; border-radius: 8px;
  padding: 9px 16px; font-size: 14px; cursor: pointer; transition: .15s;
}
button:hover { background: #4a5ce0; }
button:active { transform: scale(.97); }

input, textarea, select {
  width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--fg);
  border-radius: 8px; padding: 10px; font-size: 14px; margin: 6px 0 12px; font-family: inherit;
}
label { font-size: 13px; color: var(--muted); display: block; margin-top: 6px; }

.card-list { display: flex; flex-direction: column; gap: 10px; }
.card-row { display: flex; justify-content: space-between; align-items: center; }
.world-card {
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; cursor: pointer; transition: .15s;
}
.world-card:hover { border-color: #5b6ef5; }
.world-card .meta { font-size: 12px; color: #8a909d; margin-top: 4px; }
.del-btn { font-size: 12px; color: #e74c3c; cursor: pointer; opacity: 1; transition: .15s; padding: 4px 10px; border-radius: 6px; border: 1px solid #5a2a2a; background: #2a1818; }
.del-btn:hover { background: #e74c3c; color: #fff; }
.world-card:hover .del-btn { opacity: 1; }
.tag { background: var(--tag-bg); border-radius: 5px; padding: 2px 8px; font-size: 11px; margin-right: 6px; }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { background: #21242f; color: #9aa0ad; }
.tab.active { background: #5b6ef5; color: #fff; }

#story-stream .beat {
  background: var(--card); border-radius: 10px; padding: 16px; margin-bottom: 14px;
  white-space: pre-wrap; font-size: 15px; color: var(--fg);
}
#story-stream .action-tag {
  font-size: 12px; color: #f0a85b; margin-bottom: 8px;
  border-left: 3px solid #f0a85b; padding-left: 8px;
}
#choices { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.choice-btn {
  background: var(--choice-bg); text-align: left; border: 1px solid var(--choice-border);
  white-space: normal; line-height: 1.5;
}
.choice-btn:hover { background: #2c3142; border-color: #5b6ef5; }

#custom-action { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#custom-input { flex: 1; min-width: 180px; margin: 0; }
.dice-toggle { display: flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; margin: 0; width: auto; }
.dice-toggle select { width: auto; margin: 0; padding: 5px 7px; font-size: 12px; }

/* 全局加载遮罩 */
#loading {
  position: fixed; inset: 0; background: rgba(20,22,28,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 200; color: #c8ccd4;
}
.loading-spinner {
  width: 40px; height: 40px; border: 3px solid #333845;
  border-top: 3px solid #5b6ef5; border-radius: 50%;
  animation: spin .8s linear infinite; margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { font-size: 16px; margin-bottom: 8px; }
.loading-timer { font-size: 13px; color: #8a909d; }

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal-box {
  background: var(--card2); color: var(--fg); border-radius: 12px; padding: 18px;
  max-width: 600px; width: 100%; max-height: 85vh; overflow-y: auto;
}
.sys-section { margin: 12px 0; }
.sys-section h4 { color: #5b8ef5; font-size: 14px; margin-bottom: 6px; }
.sys-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; margin: 5px 0; font-size: 13px;
}
.sys-item .cost { color: #f0a85b; float: right; }
.points-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.point-chip { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; }
.point-chip b { color: #5be08a; font-size: 18px; display: block; }
.chapter { margin-bottom: 20px; }
.chapter h4 { font-size: 16px; color: var(--fg); margin-bottom: 8px; }
.chapter .body { white-space: pre-wrap; font-size: 14px; color: var(--fg); opacity: .85; }

/* ===== 系统面板重写 ===== */
.sys-panel .modal-box { max-width: 680px; }
.sys-panel #system-content { max-height: 70vh; overflow-y: auto; }
.sys-section { margin: 14px 0; }
.sys-section h4 { color: #5b8ef5; font-size: 14px; margin-bottom: 8px; }

/* 属性网格 */
.prop-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.prop-chip {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 14px; cursor: pointer; display: flex; gap: 8px; align-items: baseline;
  transition: .15s; min-width: 70px;
}
.prop-chip:hover { border-color: #5b6ef5; background: #222b44; }
.prop-name { font-size: 12px; color: var(--muted); }
.prop-val { font-size: 18px; font-weight: 600; color: var(--fg); }

/* 说明框（静默区域） */
.sys-detail-box {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; margin: 10px 0; font-size: 13px; color: var(--muted);
  min-height: 36px; white-space: pre-wrap; line-height: 1.5;
}

/* 背包/商店条目行 */
.sys-item-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; margin: 5px 0; cursor: pointer; transition: .15s;
}
.sys-item-row:hover { border-color: #5b6ef5; }
.si-info { flex: 1; }
.si-name { font-size: 14px; font-weight: 500; }
.si-count { font-size: 12px; color: var(--muted); margin-left: 8px; }
.si-cost { font-size: 12px; color: #f0a85b; margin-left: 8px; }
.si-buy {
  background: #5b6ef5; color: #fff; border: none; border-radius: 6px;
  padding: 5px 14px; font-size: 12px; cursor: pointer; flex-shrink: 0;
}
.si-buy:hover { background: #4a5ce0; }

/* 地图 */
.sys-map { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.map-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.map-desc { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.map-char { font-size: 12px; background: var(--card2); padding: 3px 8px; border-radius: 6px; }
.map-loc { color: var(--muted); }
.map-exits { font-size: 12px; color: #5be08a; margin-top: 4px; }
.map-features { font-size: 12px; color: #f0a85b; margin-top: 4px; }

/* 任务 */
.quest-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin: 6px 0;
}
.qi-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.qi-type { font-size: 11px; font-weight: 600; color: #5b8ef5; }
.qi-status { font-size: 11px; color: var(--muted); }
.qi-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.qi-desc { font-size: 12px; color: var(--muted); }
.qi-reward { font-size: 12px; color: #f0a85b; margin-top: 4px; }
.qi-actions { margin-top: 6px; display: flex; gap: 6px; }
.q-btn {
  background: var(--card2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.q-btn:hover { background: #5b6ef5; color: #fff; }
.q-comp { background: #2a4a2a; border-color: #3a6a3a; color: #5be08a; }
.q-abandon { background: #4a2a2a; border-color: #6a3a3a; color: #e07b7b; }

/* 预设框架按钮 */
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.preset-btn { background: #2a2e3a; color: #c8ccd4; font-size: 13px; }
.preset-btn:hover { background: #5b6ef5; color: #fff; }

/* 内联状态栏（正文后、选项前） */
.beat-body { white-space: pre-wrap; }
.status-bar {
  margin-top: 12px; border: 1px solid #333845; border-radius: 8px;
  overflow: hidden; font-size: 13px;
}
.status-bar .sb-header {
  background: #2a2e3a; padding: 6px 12px; color: #5b8ef5; font-weight: 600;
}
.status-bar .sb-row {
  display: flex; gap: 10px; padding: 6px 12px; border-top: 1px solid #23262f;
}
.status-bar .sb-row span:first-child {
  color: #8a909d; min-width: 56px; flex-shrink: 0;
}
.status-bar .sb-row.danger { color: #f07b7b; }
.status-bar .sb-row.danger span:first-child { color: #f07b7b; }

/* 段落长度切换按钮组 */
.topbar-right { display: flex; align-items: center; gap: 8px; }
.beatlen-group { display: flex; gap: 2px; }
.beatlen-group .bl-btn {
  background: transparent; color: #555b6e; font-size: 12px; padding: 4px 8px;
  border-radius: 4px; min-width: 32px; text-align: center;
}
.beatlen-group .bl-btn:hover { color: #9aa0ad; background: #2a2e3a; }
.beatlen-group .bl-btn.active { color: #5b8ef5; background: #1e2844; font-weight: 600; }

/* ===== 可拖动 / 可收起的悬浮按钮簇 ===== */
.fab-cluster {
  position: fixed; top: 50%; right: 12px; z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fab-handle {
  width: 36px; height: 36px; border-radius: 50%; padding: 0; font-size: 14px;
  background: #5b6ef5; color: #fff; cursor: grab; touch-action: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.4); opacity: .7;
}
.fab-handle:active { cursor: grabbing; opacity: 1; }
.fab-items { display: flex; flex-direction: column; gap: 6px; }
.fab-items button {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; font-size: 16px;
  background: var(--card2); color: var(--fg); border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fab-items button:hover { background: #5b6ef5; color: #fff; }
.fab-cluster.collapsed .fab-items { display: none; }   /* 收起：只剩握柄 */
.fab-cluster.collapsed .fab-handle { opacity: .45; }

/* ===== 沉浸阅读底部控制层 ===== */
.read-menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--card2); border-top: 1px solid var(--line);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
  animation: slideUp .2s ease;
}
.reader-quickbar { margin-top: 0; margin-bottom: 0; }
.reader-settings { max-height: min(62vh, 520px); margin: 12px -16px -14px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; border-top: 1px solid var(--line); background: var(--card2); box-shadow: 0 -18px 42px rgba(0,0,0,.22); }
.reader-menu-head { display: flex; align-items: center; justify-content: space-between; max-width: 780px; margin: 0 auto 6px; }
.reader-menu-head strong { font-size: 13px; letter-spacing: .08em; }
.reader-close { flex: 0 0 34px !important; min-width: 34px !important; height: 34px; padding: 0; border-radius: 50%; }
.read-menu > .rm-row { max-width: 780px; margin-left: auto; margin-right: auto; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
.rm-row { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.rm-row button { background: var(--card); color: var(--fg); border: 1px solid var(--line); flex: 1; min-width: 70px; }
.rm-row button:hover { background: #5b6ef5; color: #fff; }
.rm-slider > span:first-child { color: var(--muted); font-size: 13px; min-width: 60px; flex: 0 0 auto; }
.theme-row > span:first-child { color: var(--muted); font-size: 13px; min-width: 60px; }
.theme-picker { display: flex; align-items: center; gap: 12px; }
.theme-dot { width: 30px; height: 30px; min-width: 30px !important; flex: 0 0 30px !important; padding: 0 !important; border: 2px solid transparent !important; border-radius: 50% !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.theme-dot.active { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--card2), 0 0 0 3px var(--accent); }
.dot-dark { background: #121722 !important; }.dot-sepia { background: #d8c5a2 !important; }.dot-eyecare { background: #dce5d2 !important; }.dot-light { background: #fffdf7 !important; }
.brightness-row > span:nth-child(2) { color: var(--muted); font-size: 12px; }
#reader-brightness { flex: 1; min-width: 140px; margin: 0; accent-color: var(--accent); }
#brightness-val { min-width: 42px; color: var(--muted); font-size: 12px; text-align: right; }

/* ===== 翻页模式 顶部章节条 ===== */
.pager-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 4px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.pager-bar button { background: var(--card); color: var(--fg); border: 1px solid var(--line); font-size: 13px; }
.pager-bar #pager-label { color: var(--muted); font-size: 13px; cursor: pointer; }
.pager-bar #pager-label:hover { color: #5b6ef5; }

/* 章节目录项 */
.chap-item { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.chap-item:hover { background: var(--card); }
.chap-item.cur { color: #5b6ef5; font-weight: 600; }

/* 顶栏图标按钮 */
.topbar-left { display: flex; align-items: center; gap: 8px; }
.icon-btn { background: transparent; color: var(--fg); padding: 6px 10px; font-size: 16px; }
.icon-btn:hover { background: var(--card); }

/* 沉浸态收起次级 chrome，但核心选择与自由行动仍属于游玩界面。 */
#view-play.immersive .play-topbar,
#view-play.immersive .pager-bar,
#view-play.immersive .fab-cluster,
#view-play.immersive .status-bar,
#view-play.immersive .beat-footer,
#view-play.immersive #story-stream .action-tag { display: none !important; }
#view-play.immersive #story-stream .beat {
  margin-bottom: 0; padding-top: 34px; padding-bottom: 34px;
  background: transparent; border-color: transparent; border-radius: 0; box-shadow: none;
}
body[data-view="play"]::after {
  content: ""; position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background: rgba(0,0,0,var(--reader-dim-opacity));
}
#view-play.reader-chrome-open .play-topbar { position: sticky; z-index: 75; }
#view-play.reader-chrome-open #choices,
#view-play.reader-chrome-open .play-bottombar { position: relative; z-index: 60; }
#view-play.reader-chrome-open { padding-bottom: 150px; }
#view-play.reader-chrome-open .play-bottombar { bottom: 88px; }

/* 打字机光标 */
.typing-cursor {
  display: inline-block; color: #5b8ef5;
  animation: blink 1s step-start infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* 新段落柔和淡入 */
.beat { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 傻瓜化新建 */
.hint-line { color:#8a909d; font-size:13px; margin:14px 0 8px; }
.primary-big {
  width:100%; padding:14px; font-size:16px; font-weight:600;
  background:#5b6ef5; border-radius:12px; margin-top:16px;
}
.primary-big:hover { background:#4a5ce0; }
.ghost-btn { background:transparent; color:#8a909d; padding:4px 10px; font-size:13px; }
.ghost-btn:hover { color:#c8ccd4; background:#2a2e3a; }

/* ===== 预设选择：四大板块 ===== */
.preset-section { margin-bottom: 18px; }
.ps-title {
  font-size: 14px; font-weight: 600; color: var(--fg);
  padding: 6px 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.preset-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.preset-card {
  background: var(--card2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 10px; text-align: left; min-height: 56px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  cursor: pointer; transition: .15s;
}
.preset-card:hover { border-color: #5b6ef5; background: #222b44; }
.preset-card .pc-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.preset-card .pc-tag {
  font-size: 10px; color: #5be08a; background: rgba(91,224,138,.12);
  padding: 1px 6px; border-radius: 4px; align-self: flex-start;
}

/* 展开更多 / 收起按钮 */
.preset-more-btn {
  width: 100%; margin-top: 8px; padding: 8px;
  background: transparent; color: #7a8eff; border: 1px dashed #3d4356;
  border-radius: 8px; cursor: pointer; font-size: 13px; transition: .2s;
}
.preset-more-btn:hover { background: #1a1e2e; border-color: #5b6ef5; }

/* ===== 阅读主题：颜色由顶部 CSS 变量统一控制 ===== */
.play-topbar { background: var(--card2); }

/* ===== 沉浸：保留(暂未使用全屏)，仅用于隐藏轻量chrome ===== */
.play-topbar, .play-bottombar, #choices { transition:.25s; }

/* ===== 阅读设置弹层 ===== */
.read-row { display:flex; align-items:center; gap:12px; margin:16px 0; }
.read-row > span:first-child { color:#9aa0ad; font-size:14px; min-width:80px; }
.read-row button { background:#2a2e3a; padding:6px 14px; }

/* ===== 换肤色块选择 ===== */
.theme-picker { display:flex; align-items:center; gap:6px; flex:1; justify-content:center; }
.theme-dot {
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:2px solid #3d4356; display:inline-block; transition: transform .15s, border-color .15s;
}
.theme-dot:hover { transform:scale(1.2); border-color:#7a8eff; }
.theme-dot.active { border-color:#5b6ef5; box-shadow:0 0 0 2px #5b6ef5; }
.dot-dark   { background:#14161c; }
.dot-sepia  { background:#1a1410; }
.dot-light  { background:#f5f0e6; }

/* 顶栏紧凑化 */
.play-topbar .topbar-right button { padding:6px 10px; background:#2a2e3a; margin-left:4px; }

/* ===== 滑动选择 ===== */
.choice-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background: var(--num-bg);
  color:#c8ccd4; font-size:12px; margin-right:10px; flex-shrink:0;
}
.choice-btn { display:flex; align-items:center; transition:.15s; }
.choice-btn.focus {
  border-color:#5b6ef5; background:#222b44;
  box-shadow:0 0 0 1px #5b6ef5;
}
.choice-btn.focus .choice-num { background:#5b6ef5; color:#fff; }
.swipe-hint {
  text-align:center; color: var(--swipe); font-size:12px;
  margin-top:10px; user-select:none;
}

/* ===== 说明弹窗 ===== */
.explain-box { max-width: 480px; }
.explain-body {
  margin-top: 12px; font-size: 14px; line-height: 1.7;
  color: var(--fg); white-space: pre-wrap;
}
.explain-body .eb-label { color: #5b8ef5; font-size: 12px; }
.explain-body .eb-value { font-size: 22px; font-weight: 600; color: #5be08a; }

/* ===== 世界设定弹窗 ===== */
.lore-box { max-width: 640px; max-height: 80vh; display: flex; flex-direction: column; }
.lore-tabs {
  display: flex; gap: 4px; margin: 12px 0; flex-shrink: 0;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.lore-tab {
  flex: 1; padding: 8px 4px; text-align: center; font-size: 13px;
  background: transparent; color: var(--muted); border: none;
  border-radius: 6px; cursor: pointer; transition: .15s;
}
.lore-tab:hover { color: var(--fg); background: #1a1e2a; }
.lore-tab.active { color: #5b8ef5; background: #1a2340; font-weight: 600; }
.lore-body { flex: 1; overflow-y: auto; min-height: 200px; font-size: 14px; line-height: 1.7; }
.lore-body h4 { color: #5b8ef5; font-size: 14px; margin: 14px 0 6px; }
.lore-body .lo-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; margin: 10px 0;
}
.lo-field { display: flex; gap: 8px; margin: 6px 0; font-size: 13px; }
.lo-field .lo-label { color: var(--muted); min-width: 60px; flex-shrink: 0; }
.lo-field .lo-value { color: var(--fg); }
.lo-divider { height: 1px; background: var(--line); margin: 12px 0; }

/* 角色图鉴网格 */
.lo-char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.lo-char-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; display: flex; flex-direction: column; gap: 4px;
}
.lo-char-card .cc-name { font-size: 15px; font-weight: 600; }
.lo-char-card .cc-name .protag { color: #f0a85b; font-size: 11px; margin-left: 6px; }
.lo-char-card .cc-meta { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* 任务卡片 */
.lo-task-card {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid #5b8ef5;
  border-radius: 8px; padding: 12px; margin: 8px 0;
}
.lo-task-card .tc-title { font-size: 14px; font-weight: 600; }
.lo-task-card .tc-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.lo-task-card .tc-desc { font-size: 13px; margin-top: 6px; color: var(--fg); }
.lo-task-card.tc-main { border-left-color: #f0a85b; }
.lo-task-card.tc-side { border-left-color: #5be08a; }
.lo-task-card.tc-urgent { border-left-color: #e74c3c; }

/* 完整设定 */
.lo-fulltext {
  white-space: pre-wrap; font-size: 13px; line-height: 1.8;
  color: var(--fg); padding: 4px 0;
}

/* ===== 行内编辑 ===== */
.lo-editable {
  position: relative;
}
.edit-btn {
  position: absolute; top: 8px; right: 8px;
  background: transparent; border: none; font-size: 15px;
  cursor: pointer; opacity: .4; transition: .2s; padding: 4px 8px; border-radius: 4px;
}
.edit-btn:hover { opacity: 1; background: #1a1e2e; }
.edit-textarea {
  width: 100%; min-height: 100px; box-sizing: border-box;
  background: var(--card); color: var(--fg); border: 1px solid #5b6ef5;
  border-radius: 8px; padding: 10px; font-size: 14px; line-height: 1.6;
  font-family: inherit; resize: vertical;
}
.edit-textarea:focus { outline: none; border-color: #7a8eff; box-shadow: 0 0 0 2px rgba(91,110,245,.25); }
.edit-actions {
  display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;
}
.edit-save {
  background: #3a6bd5; color: #fff; border: none; border-radius: 6px;
  padding: 8px 18px; font-size: 13px; cursor: pointer; transition: .15s;
}
.edit-save:hover { background: #4a7be5; }
.edit-save:disabled { opacity: .5; cursor: not-allowed; }
.edit-cancel {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 18px; font-size: 13px; cursor: pointer; transition: .15s;
}
.edit-cancel:hover { color: var(--fg); background: #1a1e2a; }

/* ===== AI傻瓜式编辑 ===== */
.edit-loading { text-align:center; padding:30px 0; color:var(--muted); font-size:14px; }
.edit-spinner {
  display:inline-block; width:20px; height:20px; border:2px solid var(--line);
  border-top-color:#5b8ef5; border-radius:50%; animation:spin .8s linear infinite;
  margin-right:8px; vertical-align:middle;
}
@keyframes spin { to { transform:rotate(360deg); } }

.fo-grid { display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.fo-card {
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px; cursor:pointer; transition:.2s; position:relative;
}
.fo-card:hover { border-color:#5b6ef5; background:#222b44; }
.fo-tag {
  display:inline-block; font-size:10px; padding:1px 8px; border-radius:4px;
  margin-bottom:4px;
}
.fo-title { font-size:15px; font-weight:600; margin:2px 0; }
.fo-desc { font-size:12px; color:var(--muted); line-height:1.5; }

.fo-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.fo-hint-btn, .fo-edit-btn {
  flex:1; padding:10px 8px; text-align:center; border-radius:8px;
  font-size:13px; cursor:pointer; transition:.2s; border:none; min-width:120px;
}
.fo-hint-btn { background:transparent; border:1px dashed #5b8ef5; color:#5b8ef5; }
.fo-hint-btn:hover { background:#1a2340; }
.fo-edit-btn { background:transparent; border:1px solid var(--line); color:var(--muted); }
.fo-edit-btn:hover { color:var(--fg); border-color:var(--fg); }

.fo-hint-area { padding:8px 0; }
.fo-hint-actions { display:flex; gap:8px; margin-top:8px; justify-content:flex-end; }

/* ===== 连锁影响确认弹窗 ===== */
.ripple-box { max-width: 560px; }
.ripple-body { margin-top: 10px; }
.ripple-summary {
  background: #1a2340; border: 1px solid #5b8ef5; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; color: var(--fg); margin-bottom: 10px;
}
.ripple-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px;
}
.ripple-item-label { font-size: 13px; font-weight: 600; color: #5be08a; margin-bottom: 4px; }
.ripple-item-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 4px; }
.ripple-item-value {
  font-size: 12px; color: var(--fg); background: #10141f; border-radius: 6px;
  padding: 6px 8px; line-height: 1.5; max-height: 100px; overflow-y: auto;
}
.ripple-actions { display:flex; gap:8px; margin-top:14px; justify-content:flex-end; }

/* ===== 角色编辑弹窗 ===== */
.char-box { max-width: 520px; }
.char-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.char-form label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.char-form input[type="text"],
.char-form input[type="textbox"],
.char-form input:not([type="checkbox"]),
.char-form textarea {
  width: 100%; box-sizing: border-box;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-size: 14px; font-family: inherit;
}
.char-form input:focus, .char-form textarea:focus {
  outline: none; border-color: #5b8ef5;
}
.char-form textarea { resize: vertical; }
.char-form .checkbox-label {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg); font-size: 14px; cursor: pointer;
}
.char-form .checkbox-label input { width: auto; }
.char-form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 14px;
}
.char-form-actions .primary-btn {
  background: #3a6bd5; color: #fff; border: none;
  border-radius: 8px; padding: 10px 22px; font-size: 14px;
  cursor: pointer; transition: .15s;
}
.char-form-actions .primary-btn:hover { background: #4a7be5; }

/* 角色图鉴新增/删除按钮 */
.lo-char-add-btn {
  display: block; width: 100%; text-align: center; padding: 12px;
  margin-top: 10px; border: 1px dashed var(--line); border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 14px;
  cursor: pointer; transition: .2s;
}
.lo-char-add-btn:hover { border-color: #5b8ef5; color: #5b8ef5; background: #1a2340; }
.cc-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.cc-edit-btn, .cc-export-btn, .cc-del-btn {
  background: transparent; border: none; font-size: 14px;
  cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: .2s;
  opacity: .4;
}
.cc-edit-btn:hover, .cc-export-btn:hover { opacity: 1; background: #1a2340; }
.cc-del-btn:hover { opacity: 1; background: #3a1a1a; color: #e74c3c; }

/* 世界书（模块B） */
.wb-card {
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.wb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.wb-title {
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s;
}
.wb-title:hover {
  background: var(--hover, #2a2a3a);
}
.wb-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wb-toggle, .wb-del {
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s;
  user-select: none;
}
.wb-toggle:hover, .wb-del:hover {
  background: var(--hover, #2a2a3a);
}
.wb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.wb-label {
  color: var(--dim, #888);
  white-space: nowrap;
  min-width: 90px;
  flex-shrink: 0;
}
.wb-input {
  flex: 1;
  background: var(--bg, #1a1a24);
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--fg, #e0e0e0);
  font-size: 13px;
}
.wb-row-num {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.wb-num {
  width: 50px;
  background: var(--bg, #1a1a24);
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  padding: 4px;
  color: var(--fg, #e0e0e0);
  font-size: 13px;
  text-align: center;
}
.wb-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--dim, #888);
  cursor: pointer;
}
.wb-check input {
  cursor: pointer;
}
.wb-content {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg, #1a1a24);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  padding: 8px;
  color: var(--fg, #e0e0e0);
  font-size: 13px;
  resize: vertical;
  margin-top: 4px;
}
.wb-mode {
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--bg, #1a1a24);
  color: var(--fg, #e0e0e0);
  border: 1px solid var(--border, #333);
  font-size: 13px;
}
/* 搜索面板（模块G） */
.search-panel {
  background: var(--bg-card, #1e1e2e);
  border-bottom: 1px solid var(--border, #333);
  position: relative;
  z-index: 10;
}
.search-bar {
  display: flex;
  align-items: center;
  padding: 8px;
  gap: 6px;
}
.search-bar input {
  flex: 1;
  background: var(--bg, #1a1a24);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--fg, #e0e0e0);
  font-size: 14px;
  outline: none;
}
.search-bar input:focus {
  border-color: #5b8ef5;
}
.search-bar button {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted, #888);
  padding: 4px 8px;
  border-radius: 4px;
}
.search-bar button:hover {
  background: var(--hover, #2a2a3a);
  color: var(--fg, #e0e0e0);
}
.search-results {
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid var(--border, #333);
}
.sr-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .15s;
  font-size: 13px;
  border-bottom: 1px solid var(--line, #2a2e3a);
}
.sr-item:hover {
  background: var(--hover, #2a2a3a);
}
.sr-item:last-child {
  border-bottom: none;
}
.sr-seq {
  color: #5b8ef5;
  font-weight: 600;
  white-space: nowrap;
  min-width: 36px;
}
.sr-snippet {
  color: var(--muted, #888);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 模块F：加载与过渡优化 */
/* 新剧情淡入 */
@keyframes beatFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.beat-new {
  animation: beatFadeIn .4s ease-out both;
}

/* View 切换淡入 */
@keyframes viewFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.view-fade-in {
  animation: viewFadeIn .25s ease-out both;
}

/* Loading spinner 美化 */
.loading-spinner {
  width: 44px; height: 44px;
  border: 3px solid #2a2e3a;
  border-top-color: #5b8ef5;
  border-right-color: #7a6ef5;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 推演中加载提示区（在剧情下方显示等待状态） */
.loading-inline {
  text-align: center; padding: 16px;
  color: var(--muted, #888); font-size: 13px;
  animation: beatFadeIn .3s ease-out;
}
.loading-inline .li-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--border, #333);
  border-top-color: #5b8ef5;
  border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: middle; margin-right: 8px;
}

/* ===== 2026-08-31 产品化视觉系统 ===== */
.app-header {
  padding: 18px 24px;
  background: rgba(11,14,21,.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.header-inner { width: 100%; display: flex; align-items: center; gap: 24px; }
.brand {
  display: inline-flex; align-items: center; gap: 11px; padding: 0;
  color: var(--fg); background: transparent; border-radius: 0;
}
.brand:hover { background: transparent; color: var(--accent-strong); }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(216,170,102,.45); border-radius: 11px;
  color: #0d1017; background: linear-gradient(145deg, #f2d19c, #b88143);
  font-family: "STKaiti", "KaiTi", serif; font-size: 19px; font-weight: 800;
  box-shadow: 0 8px 24px rgba(216,170,102,.18);
}
.brand-copy { display: flex; align-items: baseline; gap: 8px; letter-spacing: .04em; }
.brand-copy strong { font-size: 19px; }
.brand-copy small { color: var(--muted); font-size: 11px; letter-spacing: .18em; }
.header-note { margin-left: auto; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
#topbar-extra { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; }
.header-note + #topbar-extra { margin-left: 0; }
.mobile-entry-button { min-height: 42px; padding: 7px 11px; border: 1px solid rgba(216,170,102,.35); border-radius: 12px; background: rgba(216,170,102,.08); color: var(--fg); font-size: 12px; white-space: nowrap; }
.mobile-entry-button:hover { border-color: rgba(216,170,102,.68); background: rgba(216,170,102,.15); }
.model-switch {
  display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 7px 11px;
  border: 1px solid rgba(110,214,160,.22); border-radius: 12px;
  background: rgba(110,214,160,.06); color: var(--fg); text-align: left;
}
.model-switch:hover { border-color: rgba(110,214,160,.48); background: rgba(110,214,160,.1); }
.model-switch > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.model-switch small { color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.model-switch strong { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.model-switch b { color: var(--muted); font-size: 12px; }
.model-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(110,214,160,.09); }
.model-switch.unavailable { border-color: rgba(255,141,141,.24); }
.model-switch.unavailable .model-dot { background: #ff8d8d; box-shadow: 0 0 0 4px rgba(255,141,141,.09); }
body[data-view="play"] .app-header { display: none; }

.llm-modal-box { max-width: 680px; }
.llm-modal-box h3 { font-size: 24px; }
.mobile-entry-modal-box { max-width: 440px; }
.mobile-entry-modal-box h3 { margin: 2px 0 0; font-size: 22px; }
.mobile-entry-note { margin: 15px 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.mobile-entry-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
#mobile-entry-origin { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); }
.mobile-entry-qr-wrap { width: min(230px, 72vw); margin: 18px auto 10px; padding: 12px; border-radius: 14px; background: #fff; }
.mobile-entry-qr-wrap img { display: block; width: 100%; height: auto; }
.mobile-entry-status { min-height: 22px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; text-align: center; }
.mobile-entry-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.llm-notice { margin: 14px 0 18px; padding: 12px 14px; border: 1px solid rgba(216,170,102,.18); border-radius: 12px; background: rgba(216,170,102,.05); color: #b8bec9; font-size: 12px; line-height: 1.7; }
.quality-core-card { display:flex; flex-direction:column; gap:5px; margin:-6px 0 16px; padding:13px 14px; border:1px solid rgba(110,214,160,.2); border-radius:12px; background:rgba(110,214,160,.055); }
.quality-core-card span { color:var(--success); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.quality-core-card strong { color:var(--fg); font-size:13px; font-weight:650; }
.quality-core-card small { color:var(--muted); font-size:10px; line-height:1.6; }
.quality-core-card > button { justify-self:start; margin-top:4px; }
.rule-only-demo-result { display:grid; gap:6px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); }
.rule-only-demo-result strong { color:var(--success); font-size:12px; }
.rule-only-demo-result p { margin:0; color:var(--fg); font-size:11px; line-height:1.65; white-space:pre-line; }
.rule-only-demo-result small { color:var(--muted); }
.llm-profile-list { display: grid; gap: 10px; }
.llm-loading { padding: 24px; text-align: center; color: var(--muted); }
.llm-profile-card { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); color: var(--fg); text-align: left; }
.llm-profile-card:hover:not(:disabled), .llm-profile-card.active { border-color: rgba(110,214,160,.5); background: rgba(110,214,160,.07); }
.llm-profile-card:disabled { cursor: not-allowed; opacity: .48; }
.llm-profile-main, .llm-profile-state { display: flex; flex-direction: column; gap: 4px; }
.llm-profile-main strong { font-size: 15px; }.llm-profile-main small, .llm-profile-state small { color: var(--muted); font-size: 10px; }
.llm-profile-state { align-items: flex-end; flex-shrink: 0; }
.llm-profile-state em { padding: 3px 8px; border-radius: 999px; background: rgba(110,214,160,.1); color: var(--success); font-size: 9px; font-style: normal; }
.llm-profile-state em.metered { background: rgba(216,170,102,.12); color: #e3bd82; }
.web-chat-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: -6px 0 16px; }
.web-chat-shortcuts a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--fg); background: rgba(255,255,255,.025); font-size: 12px; text-decoration: none; }
.web-chat-shortcuts a:hover { border-color: rgba(110,214,160,.5); background: rgba(110,214,160,.07); }
.web-chat-shortcuts small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.6; }
.llm-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
#llm-test-status { color: #aeb4c1; font-size: 11px; line-height: 1.5; }
.llm-footnote { margin-top: 12px; color: #747c8c; font-size: 10px; line-height: 1.6; }

.view { padding: 34px 28px; }
#view-home { padding-top: 0; }
.home-hero {
  min-height: 450px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr);
  align-items: center; gap: 68px; padding: 60px 28px 56px;
  border-bottom: 1px solid var(--line); position: relative; overflow: hidden;
}
.home-hero::before {
  content: ""; position: absolute; width: 320px; height: 1px; left: -70px; bottom: 96px;
  background: linear-gradient(90deg, transparent, rgba(216,170,102,.45), transparent); transform: rotate(-20deg);
}
.eyebrow, .section-kicker {
  display: block; color: var(--accent); font-size: 10px; font-weight: 800;
  letter-spacing: .28em; text-transform: uppercase; margin-bottom: 15px;
}
.hero-copy h1 {
  max-width: 650px; font-size: clamp(42px, 6vw, 72px); line-height: 1.08;
  letter-spacing: -.055em; font-weight: 760; margin: 0;
}
.hero-copy h1 em {
  color: transparent; background: linear-gradient(95deg, var(--accent-strong), #9f8eff 68%);
  background-clip: text; -webkit-background-clip: text; font-style: normal;
}
.hero-copy > p { max-width: 610px; margin-top: 24px; color: #aeb4c1; font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.primary-action {
  min-width: 190px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 13px 16px 13px 20px; border-radius: 12px; color: #11141b;
  background: linear-gradient(135deg, #f1cf96, #c28b4e); font-weight: 750;
  box-shadow: 0 16px 38px rgba(190,132,67,.22);
}
.primary-action:hover { background: linear-gradient(135deg, #ffe1ad, #d59d5a); transform: translateY(-2px); }
.primary-action b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(15,18,25,.1); }
.hero-proof { color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.hero-proof i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(110,214,160,.08); }

.hero-orbit { position: relative; aspect-ratio: 1; width: min(100%, 370px); margin: auto; }
.hero-orbit::after {
  content: ""; position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,170,102,.14), transparent 66%); filter: blur(12px);
}
.orbit-ring { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.orbit-one { inset: 10%; transform: rotate(13deg); }
.orbit-two { inset: 24%; border-color: rgba(216,170,102,.24); transform: rotate(-19deg); }
.orbit-one::before, .orbit-two::before {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 20px rgba(216,170,102,.9); top: 48%; left: -4px;
}
.orbit-two::before { top: auto; left: auto; right: 5%; bottom: 12%; background: var(--accent-cool); }
.fate-core {
  position: absolute; z-index: 2; inset: 34%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(216,170,102,.48); border-radius: 50%;
  background: linear-gradient(145deg, rgba(30,34,48,.95), rgba(15,18,26,.98)); box-shadow: var(--shadow);
}
.fate-core span { font-family: "STKaiti", "KaiTi", serif; font-size: 46px; color: var(--accent-strong); line-height: 1; }
.fate-core small { margin-top: 8px; color: var(--muted); font-size: 8px; letter-spacing: .28em; }
.orbit-label {
  position: absolute; z-index: 3; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(18,23,34,.9); color: #c9ced8; font-size: 10px; letter-spacing: .16em;
}
.label-memory { top: 14%; right: 12%; }.label-cause { left: 2%; top: 54%; }.label-character { right: 3%; bottom: 12%; }

.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 42px 4px 22px; }
.library-heading h2 { font-size: 28px; letter-spacing: -.02em; }
.library-heading .section-kicker { margin-bottom: 4px; }
.library-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.quiet-action { padding: 8px 13px; background: transparent; border: 1px solid var(--line); color: #d5d9e2; }
.quiet-action:hover { background: rgba(255,255,255,.06); border-color: rgba(216,170,102,.35); }
.world-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.world-card {
  min-height: 152px; display: grid; grid-template-columns: 46px 1fr auto; align-items: stretch; gap: 18px;
  padding: 20px; background: linear-gradient(145deg, rgba(22,28,41,.96), rgba(15,20,30,.98));
  border: 1px solid var(--line); border-radius: 18px; position: relative; overflow: hidden;
  animation: worldCardIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--card-index) * 60ms);
}
.world-card::after { content: ""; position: absolute; inset: auto -35px -70px auto; width: 140px; height: 140px; border-radius: 50%; background: rgba(141,124,255,.07); transition: .3s; }
.world-card:hover, .world-card:focus-visible { border-color: rgba(216,170,102,.42); transform: translateY(-3px); box-shadow: 0 18px 46px rgba(0,0,0,.24); outline: none; }
.world-card:hover::after { transform: scale(1.3); background: rgba(216,170,102,.08); }
.world-accent { color: rgba(216,170,102,.52); font-family: ui-monospace, monospace; font-size: 11px; padding-top: 3px; border-right: 1px solid var(--line); }
.world-card-content { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.world-overline { color: var(--muted); font-size: 9px; letter-spacing: .18em; margin-bottom: 7px; }
.world-card h3 { margin: 0 0 14px; color: var(--fg); font-size: 19px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.world-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.world-meta .tag, .world-state { margin: 0; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.055); color: #aeb4c1; font-size: 10px; }
.world-state { color: var(--success); background: rgba(110,214,160,.08); }
.world-actions { z-index: 2; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.world-arrow { color: var(--accent); font-size: 20px; }
.del-btn { opacity: 0; padding: 5px 9px; color: #bb7f7f; background: transparent; border-color: rgba(255,119,119,.16); }
.world-card:hover .del-btn, .world-card:focus-within .del-btn { opacity: 1; }
.del-btn:hover { background: rgba(255,119,119,.12); color: #ff9a9a; }
@keyframes worldCardIn { from { opacity: 0; transform: translateY(12px); } }
.list-loading, .empty-library, .error-state { grid-column: 1/-1; min-height: 220px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); }
.list-loading span { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.empty-symbol { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; border: 1px solid rgba(216,170,102,.28); color: var(--accent); }
.empty-library h3, .error-state strong { color: var(--fg); font-size: 18px; }
.empty-library p, .error-state p { max-width: 440px; margin: 7px 0 18px; }
.empty-library button, .error-state button { background: rgba(216,170,102,.12); border: 1px solid rgba(216,170,102,.25); color: var(--accent-strong); }

/* 新世界 */
#view-create { max-width: 920px; margin: 0 auto; padding-top: 52px; }
.create-heading { margin-bottom: 34px; }
.create-heading .back-link { margin: 0 0 42px; padding: 0; color: var(--muted); background: transparent; }
.create-heading .back-link:hover { color: var(--fg); background: transparent; }
.create-heading h1 { font-size: clamp(34px,5vw,52px); line-height: 1.15; letter-spacing: -.04em; }
.create-heading > p { max-width: 620px; margin-top: 14px; color: var(--muted); }
.preset-section { margin-bottom: 26px; }
.ps-title { color: #aeb4c1; font-size: 11px; letter-spacing: .12em; margin-bottom: 10px; }
.preset-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.preset-card {
  min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(145deg, rgba(22,28,41,.96), rgba(15,20,30,.98)); color: var(--fg);
}
.preset-card:hover { border-color: rgba(216,170,102,.45); background: #1a2130; transform: translateY(-2px); }
.preset-card .pc-title { font-size: 13px; line-height: 1.5; }
.preset-card .pc-tag { margin-top: 10px; color: var(--accent); background: rgba(216,170,102,.09); }
.preset-more-btn { min-height: 44px; }
.creation-actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; margin-top: 26px; }
.creation-actions button { width: 100%; min-height: 54px; margin: 0; }
.primary-big { background: linear-gradient(135deg, #d8aa66, #9b6837); color: #11141b; font-weight: 760; }
.primary-big:hover { background: linear-gradient(135deg, #efc37e, #b77d42); }
.creation-actions .ghost-btn { border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #c8ced9; }
.form-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding: 14px 16px; border: 1px solid rgba(216,170,102,.16); background: rgba(216,170,102,.05); border-radius: 13px; }
.form-intro span { color: var(--accent); font: 700 11px ui-monospace,monospace; }.form-intro p { color: #abb1be; font-size: 12px; }
#create-step2 { max-width: 720px; }
#create-step2 label { margin-top: 15px; color: #b2b8c4; }
#create-step2 input, #create-step2 textarea, #create-step2 select { background: rgba(18,23,34,.95); border-radius: 12px; padding: 12px 13px; }
#create-step2 input:focus, #create-step2 textarea:focus, #create-step2 select:focus { outline: none; border-color: rgba(216,170,102,.5); box-shadow: 0 0 0 3px rgba(216,170,102,.07); }
.form-submit { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }

/* 阅读与选择工作台 */
body[data-view="play"] #app { max-width: 940px; padding-bottom: 120px; }
#view-play { padding: 0 28px 80px; }
.play-topbar {
  position: sticky; top: 0; z-index: 30; margin: 0 -28px 26px; padding: 13px 28px;
  background: rgba(11,14,21,.88); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}
.play-title-wrap { display: flex; flex-direction: column; gap: 0; }
.play-title-wrap small { color: var(--muted); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.play-title-wrap h2 { max-width: 390px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-button { font-size: 20px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); color: #c7cdd8; font-size: 12px; }
.icon-btn:hover { color: var(--accent-strong); background: rgba(216,170,102,.08); border-color: rgba(216,170,102,.25); }
#story-stream { max-width: 780px; margin: 0 auto; }
#story-stream .beat {
  margin-bottom: 22px; padding: 34px clamp(22px,5vw,52px) 22px;
  background: linear-gradient(160deg, rgba(20,26,38,.96), rgba(13,18,27,.98));
  border: 1px solid var(--line); border-radius: 20px; color: var(--fg); white-space: normal;
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
}
.beat-body { white-space: normal; font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; font-size: var(--story-font, 16px); line-height: var(--story-line, 1.95); color: #e9e5dc; }
.beat-body p { margin: 0 0 1.05em; text-indent: 2em; }
.beat-body p:last-child { margin-bottom: 0; }
.story-heading { margin: 0 0 28px; color: var(--fg); font: 760 24px/1.35 Inter,"PingFang SC",sans-serif; letter-spacing: -.02em; text-align: center; }
#story-stream .action-tag { margin: -4px 0 25px; padding: 10px 12px; border: 0; border-radius: 10px; background: rgba(141,124,255,.07); color: #c7c0ff; font-family: Inter,"PingFang SC",sans-serif; font-size: 12px; }
.action-tag span { display: inline-block; margin-right: 10px; color: #8073d5; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.status-bar { margin-top: 28px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(6,9,14,.28); font-family: Inter,"PingFang SC",sans-serif; font-size: 12px; }
.status-bar .sb-header { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: rgba(255,255,255,.035); color: #d5dae3; }
.status-bar .sb-header span { color: var(--accent); font-size: 8px; letter-spacing: .2em; }
.status-bar .sb-row { display: grid; grid-template-columns: 22px 64px 1fr; gap: 8px; padding: 10px 13px; border-top: 1px solid var(--line); color: #d3d7df; }
.status-bar .sb-row i { color: var(--accent-cool); font-style: normal; }.status-bar .sb-row > span { min-width: 0; color: var(--muted); }.status-bar .sb-row strong { font-weight: 480; }
.status-bar .sb-row.danger i, .status-bar .sb-row.danger strong { color: #ff8d8d; }
.beat-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); font-family: Inter,"PingFang SC",sans-serif; }
.beat-seq { color: #707789; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.rollback-btn { padding: 5px 9px; background: transparent; border: 1px solid transparent; color: #818898; font-size: 11px; }
.rollback-btn:hover { background: rgba(255,255,255,.04); border-color: var(--line); color: #c2c7d0; }
#choices { max-width: 780px; margin: 18px auto; gap: 9px; }
.choice-btn { min-height: 62px; display: grid; grid-template-columns: 35px 1fr 20px; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; color: #dfe3ea; background: rgba(20,27,39,.94); }
.choice-btn:hover { background: #192232; border-color: rgba(216,170,102,.36); transform: translateX(3px); }
.choice-btn.focus { border-color: rgba(216,170,102,.58); background: rgba(216,170,102,.08); }
.choice-num { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #8f97a7; background: rgba(255,255,255,.05); font: 700 9px ui-monospace,monospace; }
.choice-copy { line-height: 1.55; }.choice-arrow { color: #7d8492; transition: .2s; }.choice-btn:hover .choice-arrow { color: var(--accent); transform: translateX(2px); }
.swipe-hint { margin-top: 4px; color: #626979; letter-spacing: .04em; }
.choice-state { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); text-align: center; background: rgba(20,27,39,.72); }
.play-bottombar {
  max-width: 800px; position: sticky; z-index: 25; bottom: 14px; margin: 20px auto 0; padding: 9px;
  border: 1px solid rgba(255,255,255,.11); border-radius: 17px; background: rgba(17,22,32,.92);
  box-shadow: 0 20px 55px rgba(0,0,0,.4); backdrop-filter: blur(18px);
}
.action-input-wrap { flex: 1; min-width: 230px; display: flex; align-items: center; gap: 9px; padding-left: 9px; }
.action-input-wrap > span { color: var(--accent); font-size: 11px; font-weight: 750; white-space: nowrap; }
#custom-input { min-width: 0; padding: 10px 5px; border: 0; background: transparent; box-shadow: none; }
#custom-input:focus { outline: none; }
.dice-toggle { margin: 0; padding: 8px 10px; border-left: 1px solid var(--line); color: #8f97a7; }
.dice-toggle span { font-size: 10px; }
.action-submit { min-height: 42px; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg,#d8aa66,#a06b38); color: #11141b; font-weight: 750; }
.action-submit:hover { background: linear-gradient(135deg,#efc37e,#b77d42); }
.fab-cluster { right: max(18px, calc((100vw - 940px)/2 - 62px)); }
.fab-handle { background: var(--accent-cool); }
.modal { background: rgba(2,4,8,.72); backdrop-filter: blur(8px); }
.modal-box { border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }

/* 主题兼容 */
body[data-theme="sepia"] .beat-body { color: #d8c8a8; }
body[data-theme="sepia"] #story-stream .beat { background: rgba(34,26,18,.96); }
body[data-theme="light"] { background-image: radial-gradient(circle at 20% 0,rgba(141,124,255,.09),transparent 30rem); }
body[data-theme="light"] .app-header, body[data-theme="light"] .play-topbar { background: rgba(245,240,230,.9); }
body[data-theme="light"] #story-stream .beat, body[data-theme="light"] .world-card, body[data-theme="light"] .preset-card { background: rgba(255,253,247,.95); }
body[data-theme="light"] .beat-body { color: #302a24; }
body[data-theme="eyecare"] { background-image: none; }
body[data-theme="eyecare"] .app-header, body[data-theme="eyecare"] .play-topbar { background: rgba(211,221,202,.94); }
body[data-theme="eyecare"] #story-stream .beat, body[data-theme="eyecare"] .world-card, body[data-theme="eyecare"] .preset-card { background: rgba(232,238,226,.96); }
body[data-theme="eyecare"] .beat-body { color: #273027; }

@media (max-width: 820px) {
  #app { max-width: 100%; }
  .app-header { padding: 14px 17px; }.header-note { display: none; }
  .header-inner { gap: 10px; }.model-switch strong { max-width: 135px; }.mobile-entry-button { padding: 7px 9px; }
  .view { padding: 24px 17px; }
  .home-hero { min-height: auto; grid-template-columns: 1fr; gap: 34px; padding: 44px 0 42px; }
  .hero-copy h1 { font-size: clamp(40px,12vw,60px); }
  .hero-copy > p { font-size: 14px; }
  .hero-orbit { width: 250px; }
  .library-heading { padding-top: 34px; }
  .world-grid { grid-template-columns: 1fr; }
  .world-card { min-height: 138px; grid-template-columns: 36px 1fr auto; padding: 17px; gap: 13px; }
  .del-btn { opacity: 1; }
  #view-create { padding-top: 30px; }.create-heading .back-link { margin-bottom: 30px; }
  .preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .creation-actions { grid-template-columns: 1fr; }
  #view-play { padding: 0 12px 74px; }
  .play-topbar { margin: 0 -12px 16px; padding: 10px 12px; }
  .play-title-wrap h2 { max-width: 35vw; }
  .topbar-right { gap: 5px; }.icon-btn { width: 34px; height: 34px; }
  #story-stream .beat { padding: 26px 20px 18px; border-radius: 16px; }
  .beat-body { font-size: var(--story-font,15px); line-height: var(--story-line,1.9); }
  .story-heading { font-size: 21px; }
  .status-bar .sb-row { grid-template-columns: 18px 50px 1fr; padding: 9px 10px; }
  .choice-btn { grid-template-columns: 32px 1fr 14px; min-height: 60px; padding: 10px; }
  .play-bottombar { bottom: 8px; border-radius: 15px; gap: 4px; padding: 6px; }
  .action-input-wrap { flex-basis: 100%; min-width: 0; border-bottom: 1px solid var(--line); padding: 0 8px; }
  .dice-toggle { flex: 1; justify-content: center; border-left: 0; }
  .action-submit { min-width: 130px; justify-content: center; }
  .fab-cluster { right: 10px; bottom: 132px; }
  #view-play.immersive { padding: 0 18px 52px; }
  #view-play.immersive #story-stream .beat { padding: 30px 2px; }
  .read-menu { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .reader-settings { max-height: min(64vh, 540px); margin: 10px -12px -10px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .read-menu .rm-row { flex-wrap: nowrap; }
  .reader-quickbar { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
  .reader-quickbar button { min-width: 0; padding: 9px 5px; font-size: 12px; }
  #view-play.reader-chrome-open { padding-bottom: 140px; }
  #view-play.reader-chrome-open .play-bottombar { bottom: 74px; }
}

@media (max-width: 430px) {
  .brand-copy small { display: none; }
  .brand-copy { display: none; }.model-switch { display: none; }.mobile-entry-button { min-height: 38px; }.mobile-entry-actions { flex-direction: column-reverse; }.mobile-entry-actions button { width: 100%; }
  .llm-profile-card { align-items: flex-start; flex-direction: column; gap: 10px; }.llm-profile-state { width: 100%; align-items: flex-start; }
  .llm-actions { align-items: stretch; flex-direction: column; }.llm-actions button { width: 100%; }
  .web-chat-shortcuts { grid-template-columns: 1fr; }.web-chat-shortcuts small { grid-column: auto; }
  .hero-orbit { display: none; }
  .home-hero { padding-top: 36px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .primary-action { width: 100%; }
  .library-heading { align-items: center; }.library-meta > span { display: none; }
  .world-card h3 { font-size: 17px; }
  .play-title-wrap h2 { max-width: 28vw; }
  .topbar-right .icon-btn { width: 31px; height: 31px; border-radius: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}