
/* V2.7.0 · 故事便签（规则书 V2.184 · 效果图 EUO-2）：一张便签两页——碎片 / 故事卡；碎片可一键头脑风暴，选中的卡落在故事卡页 */
#wbx-se { --s-t1: #18181B; --s-t2: #3F3F46; --s-t3: #71717A; --s-t4: #A1A1AA; --s-t5: #B5B3AC; --s-line: #E4E4E7; --s-line2: #EEEEF0; --s-row: #F4F4F5; --s-soft: #FAFAFA; --s-paper: #FFFFFF; --s-fill: #F7F7F8; --s-ink: #18181B; --s-on: #FFFFFF; --s-field: #D4D4D8; --s-warn: #9A3412;
  --s-desk: #F4F4F5; --s-dot: #DADADF; --s-note: #FCFBF7; --s-note-edge: #E7E5DE; --s-rule: #E9E6DD; --s-dash: #E2DFD6; --s-tape: rgba(212, 212, 216, .62); --s-chip: #FFFFFF; --s-chip-edge: #D9D6CC;
  --s-p0: #FBE4E8; --s-p1: #E2EFE7; --s-p2: #F5EFD6; --s-p3: #E1E8F3;
  --s-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; --s-serif: "Songti SC", "STSong", "SimSun", serif;
  position: fixed; inset: 0; z-index: 100001; display: none; font-family: var(--s-sans); color: var(--s-t1); }
html.dark-mode #wbx-se { --s-t1: #FAFAFA; --s-t2: #D4D4D8; --s-t3: #A1A1AA; --s-t4: #71717A; --s-t5: #63636B; --s-line: #3F3F46; --s-line2: #313136; --s-row: #27272A; --s-soft: #1F1F23; --s-paper: #18181B; --s-fill: #222226; --s-ink: #F4F4F5; --s-on: #18181B; --s-field: #52525B; --s-warn: #FDBA74;
  --s-desk: #111113; --s-dot: #2A2A2F; --s-note: #1F1F23; --s-note-edge: #33333A; --s-rule: #2E2E34; --s-dash: #34343B; --s-tape: rgba(82, 82, 91, .55); --s-chip: #18181B; --s-chip-edge: #3F3F46;
  --s-p0: #4A2F36; --s-p1: #2C4338; --s-p2: #4A4426; --s-p3: #2D3B50; }
#wbx-se.is-on { display: block; }
#wbx-se * { box-sizing: border-box; }
#wbx-se button { font-family: var(--s-sans); }
#wbx-se .se-dim { position: absolute; inset: 0; background: rgba(9, 9, 11, .42); animation: seFade .16s ease both; }
html.dark-mode #wbx-se .se-dim { background: rgba(0, 0, 0, .62); }
#wbx-se .se-box { position: absolute; top: 5vh; bottom: 5vh; left: 0; right: 0; margin: 0 auto; width: 95%; max-width: 1080px; border-radius: 14px; overflow: hidden; background: var(--s-paper); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .04); display: flex; flex-direction: column; animation: seIn .18s ease both; }
#wbx-se .se-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 20px 14px 28px; border-bottom: 1px solid var(--s-line2); }
#wbx-se .se-head h2 { margin: 0; font-family: var(--s-serif); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--s-t1); }
#wbx-se .se-bs { margin-left: auto; height: 32px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--s-field); background: var(--s-paper); color: var(--s-t1); font-size: 12px; line-height: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#wbx-se .se-bs svg, #wbx-se .se-gen svg { width: 12px; height: 12px; display: block; flex: none; }
#wbx-se .se-bs:hover { border-color: var(--s-t4); }
#wbx-se .se-x { width: 32px; height: 32px; flex: none; border: 0; border-radius: 9999px; background: transparent; color: var(--s-t3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#wbx-se .se-x:hover { background: var(--s-row); color: var(--s-t1); }
#wbx-se .se-body { flex: 1; min-height: 0; overflow-y: auto; padding: 30px 24px 40px; background-color: var(--s-desk); background-image: radial-gradient(circle, var(--s-dot) 1px, transparent 1.3px); background-size: 18px 18px; }
#wbx-se .se-note { position: relative; max-width: 720px; margin: 0 auto; padding: 30px 38px 26px; background: var(--s-note); border: 1px solid var(--s-note-edge); border-radius: 4px; box-shadow: 0 1px 0 var(--s-note-edge), 0 14px 30px -14px rgba(24, 24, 27, .28); }
#wbx-se .se-tape { position: absolute; top: -11px; left: 50%; width: 96px; height: 22px; transform: translateX(-50%) rotate(-2deg); background: var(--s-tape); pointer-events: none; }
#wbx-se .se-title { display: block; width: 100%; margin: 0; padding: 0; border: 0; outline: none; background: transparent; box-shadow: none; font-family: var(--s-serif); font-size: 24px; line-height: 34px; font-weight: 700; color: var(--s-t1); }
#wbx-se .se-title::placeholder { color: var(--s-t5); font-weight: 600; }
#wbx-se .se-tabs { display: flex; gap: 18px; margin-top: 12px; border-bottom: 1px solid var(--s-rule); }
#wbx-se .se-tab { height: 34px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--s-t4); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
#wbx-se .se-tab i { font-style: normal; font-weight: 400; font-variant-numeric: tabular-nums; }
#wbx-se .se-tab.is-on { color: var(--s-t1); border-bottom-color: var(--s-t1); }
#wbx-se .se-pane { display: none; padding-top: 8px; }
#wbx-se .se-pane.is-on { display: block; }
/* 碎片 */
#wbx-se .se-fr { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--s-rule); }
#wbx-se .se-ty { flex: none; height: 20px; min-width: 40px; padding: 0 8px; border-radius: 9999px; border: 1px solid var(--s-chip-edge); background: var(--s-chip); color: var(--s-t3); font-size: 11px; line-height: 18px; font-weight: 600; cursor: pointer; }
#wbx-se .se-ty.is-set { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-on); }
#wbx-se .se-fi { flex: 1; min-width: 0; height: 38px; margin: 0; padding: 0; border: 0; outline: none; background: transparent; box-shadow: none; font-family: var(--s-serif); font-size: 17px; line-height: 38px; color: var(--s-t1); }
#wbx-se .se-fi::placeholder { color: var(--s-t5); }
#wbx-se .se-fragfoot { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--s-t4); }
#wbx-se .se-gen { margin-left: auto; height: 30px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--s-field); background: var(--s-paper); color: var(--s-t1); font-size: 12px; line-height: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#wbx-se .se-gen:hover { border-color: var(--s-t4); }
#wbx-se .se-gen:disabled { opacity: .55; cursor: default; }
#wbx-se .se-genbox { margin-top: 14px; }
#wbx-se .se-genbox:empty { display: none; }
#wbx-se .se-gl { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--s-t3); }
#wbx-se .se-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--s-line); border-top-color: var(--s-t3); animation: seSpin .8s linear infinite; }
#wbx-se .se-cands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
#wbx-se .se-cd { border-radius: 12px; overflow: hidden; background: var(--s-paper); border: 1px solid var(--s-line2); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .18); display: flex; flex-direction: column; }
#wbx-se .se-cd .tp { padding: 18px 12px 8px; }
#wbx-se .se-cd .tp s { display: block; text-decoration: none; font-size: 10.5px; line-height: 14px; font-weight: 700; color: var(--s-t2); }
#wbx-se .se-cd .tp b { display: block; font-size: 16px; line-height: 22px; font-weight: 800; color: var(--s-t1); }
#wbx-se .se-cd .bd { flex: 1; padding: 10px 12px 4px; font-size: 12.5px; line-height: 19px; color: var(--s-t1); }
#wbx-se .se-cd dl { display: grid; grid-template-columns: 30px 1fr; gap: 2px 6px; margin: 8px 0 0; font-size: 11.5px; line-height: 17px; }
#wbx-se .se-cd dt { color: var(--s-t4); } #wbx-se .se-cd dd { margin: 0; color: var(--s-t2); }
#wbx-se .se-cd .ft { padding: 8px 12px 12px; }
#wbx-se .se-cd .ft button { height: 28px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--s-ink); background: var(--s-ink); color: var(--s-on); font-size: 12px; font-weight: 600; cursor: pointer; }
#wbx-se .se-genact { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--s-t4); }
#wbx-se .se-genact button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--s-t3); font-size: 12px; font-weight: 600; cursor: pointer; }
#wbx-se .se-genact button:hover { background: var(--s-row); color: var(--s-t1); }
/* 故事卡 */
#wbx-se .se-l { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--s-t3); }
#wbx-se .se-cnt { margin-left: auto; font-weight: 400; color: var(--s-t4); font-variant-numeric: tabular-nums; }
#wbx-se .se-cnt.is-warn { color: var(--s-warn); }
#wbx-se .se-line { display: block; width: 100%; min-height: 108px; margin: 0; padding: 0; border: 0; outline: none; resize: vertical; box-shadow: none; background: transparent repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--s-rule) 35px, var(--s-rule) 36px); background-attachment: local; font-family: var(--s-serif); font-size: 18px; line-height: 36px; color: var(--s-t1); }
#wbx-se .se-line::placeholder, #wbx-se .se-qv::placeholder { color: var(--s-t5); }
#wbx-se .se-q { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 0 10px; border-bottom: 1px dashed var(--s-dash); }
#wbx-se .se-q label { padding-top: 9px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--s-t3); }
#wbx-se .se-qv { display: block; width: 100%; height: 34px; min-height: 34px; margin: 0; padding: 6px 0; border: 0; outline: none; resize: none; overflow: hidden; background: transparent; box-shadow: none; font-family: var(--s-sans); font-size: 14px; line-height: 22px; color: var(--s-t1); }
#wbx-se .se-tagrow { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
#wbx-se .se-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#wbx-se .se-chip { height: 26px; padding: 0 10px; border-radius: 9999px; border: 1px solid var(--s-line); background: var(--s-chip); color: var(--s-t2); font-size: 12px; line-height: 16px; display: inline-flex; align-items: center; cursor: pointer; }
#wbx-se .se-chip:hover { border-color: var(--s-t4); }
#wbx-se .se-chip.is-on { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-on); font-weight: 600; }
#wbx-se .se-chip.se-add { min-width: 26px; justify-content: center; border-style: dashed; color: var(--s-t4); }
#wbx-se .se-chipin { height: 26px; width: 90px; border: 1px solid var(--s-t3); border-radius: 9999px; padding: 0 10px; font: 400 12px/16px var(--s-sans); background: var(--s-chip); color: var(--s-t1); outline: none; }
#wbx-se .se-links { display: flex; gap: 20px; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--s-rule); }
#wbx-se .se-link { height: 30px; padding: 0; border: 0; background: transparent; color: var(--s-t3); font-size: 13px; line-height: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#wbx-se .se-link:hover, #wbx-se .se-link[aria-expanded="true"] { color: var(--s-t1); }
#wbx-se .se-link i { font-style: normal; width: 12px; text-align: center; }
#wbx-se .se-panel { display: none; padding: 4px 0; }
#wbx-se .se-panel.is-on { display: block; }
#wbx-se .se-in { width: 100%; margin: 0; border: 1px solid var(--s-line); border-radius: 8px; background: var(--s-fill); color: var(--s-t1); font: 400 14px/22px var(--s-sans); padding: 8px 12px; outline: none; box-shadow: none; }
#wbx-se input.se-in, #wbx-se select.se-in { height: 38px; }
#wbx-se .se-in:focus { border-color: var(--s-t3); background: var(--s-paper); }
#wbx-se .se-in::placeholder { color: var(--s-t4); }
#wbx-se .se-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
#wbx-se .se-done { margin-top: 10px; font-size: 12px; color: var(--s-t3); }
#wbx-se .se-done:empty { display: none; }
/* 底部 */
#wbx-se .se-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 20px 12px 28px; border-top: 1px solid var(--s-line2); background: var(--s-paper); }
#wbx-se .se-foot .se-fl { font-size: 12px; color: var(--s-t3); }
#wbx-se .se-foot .se-in { width: 140px; height: 32px !important; padding: 0 10px !important; font-size: 13px !important; line-height: 20px !important; }
#wbx-se .se-foot select.se-in { width: 120px; }
#wbx-se .se-msg { margin-left: auto; font-size: 12px; color: #B91C1C; }
#wbx-se .se-gh, #wbx-se .se-go { height: 32px; padding: 0 14px; border-radius: 4px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .3px; cursor: pointer; }
#wbx-se .se-gh { border: 1px solid var(--s-field); background: var(--s-paper); color: var(--s-t1); }
#wbx-se .se-gh:hover { background: var(--s-soft); }
#wbx-se .se-go { border: 1px solid var(--s-ink); background: var(--s-ink); color: var(--s-on); }
#wbx-se .se-go:disabled { opacity: .55; cursor: default; }
#wbx-se .se-ask { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(9, 9, 11, .28); z-index: 3; }
#wbx-se .se-ask.is-on { display: flex; }
#wbx-se .se-ask > div { width: min(380px, calc(100% - 32px)); padding: 24px; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-paper); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); text-align: center; }
#wbx-se .se-ask h3 { margin: 0 0 8px; font-family: var(--s-serif); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--s-t1); }
#wbx-se .se-ask p { margin: 0 0 20px; font-size: 14px; line-height: 20px; color: var(--s-t3); }
#wbx-se .se-ask .se-go.is-red { background: #991B1B; border-color: #7F1D1D; color: #FFFFFF; }
html.wbx-se-open, html.wbx-se-open body { overflow: hidden !important; }
#wbx-se .se-body::-webkit-scrollbar, #wbx-se textarea::-webkit-scrollbar { width: 6px; }
#wbx-se .se-body::-webkit-scrollbar-track, #wbx-se textarea::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
#wbx-se .se-body::-webkit-scrollbar-thumb, #wbx-se textarea::-webkit-scrollbar-thumb { background: var(--s-field); border-radius: 9999px; }
@keyframes seFade { from { opacity: 0; } }
@keyframes seIn { from { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes seSpin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  #wbx-se .se-box { top: 8px; right: 8px; bottom: 8px; left: 8px; width: auto; max-width: none; margin: 0; border-radius: 14px; }
  #wbx-se .se-head { padding: 12px 8px 12px 16px; gap: 8px; }
  #wbx-se .se-bs { padding: 0; width: 32px; justify-content: center; }
  #wbx-se .se-bs span { display: none; }
  #wbx-se .se-body { padding: 22px 10px 28px; }
  #wbx-se .se-note { padding: 24px 18px 20px; }
  #wbx-se .se-cands { grid-template-columns: minmax(0, 1fr); }
  #wbx-se .se-tagrow { flex-direction: column; gap: 10px; }
  #wbx-se .se-g2 { grid-template-columns: minmax(0, 1fr); }
  #wbx-se .se-foot { flex-wrap: wrap; padding: 10px 12px; }
  #wbx-se .se-foot .se-in { width: 112px; }
  #wbx-se .se-gh { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { #wbx-se .se-dim, #wbx-se .se-box { animation: none; } }
