/* 骰娘日志染色 · 淡紫纸感 */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: #FBF7FF;
  color: #33243F;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 72px;
}

/* ---------- 品牌条 ---------- */
.brand {
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid #EFE6FA;
}
.brand-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.brand-left { display: flex; align-items: center; gap: 9px; }
.brand-logo {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F4EDFC;
  border: 1px solid #E8DCF7;
  border-radius: 10px;
}
.brand-name { font-size: 15.5px; font-weight: 600; color: #5B3A96; letter-spacing: .5px; }
.brand-note { font-size: 12.5px; color: #9A8AA8; }

/* ---------- 顶部提示条 ---------- */
.banner {
  max-width: 1200px;
  margin: 14px auto 0;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FDECEF;
  border: 1px solid #F5C9D2;
  color: #B03A52;
  border-radius: 10px;
  font-size: 13px;
}
.banner[hidden] { display: none; }
.banner-ico { flex: none; display: inline-flex; }
.banner-close {
  margin-left: auto;
  flex: none;
  border: none;
  background: transparent;
  color: #B03A52;
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  display: inline-flex;
}
.banner-close:hover { background: #F9DCE2; }

/* ---------- 卡片 ---------- */
.card {
  background: #FFFFFF;
  border: 1px solid #E8DCF7;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(91,58,150,.04), 0 8px 24px rgba(91,58,150,.05);
}
.card + .card { margin-top: 18px; }
.card-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #5B3A96;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.card-title .sub { font-size: 12.5px; font-weight: 400; color: #9A8AA8; }

/* ---------- 按钮 ---------- */
.btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #8B5FC9;
  color: #FFFFFF;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
  white-space: nowrap;
}
.btn:hover { background: #7A4FB8; box-shadow: 0 4px 14px rgba(139,95,201,.28); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: #CBB9E6; cursor: not-allowed; box-shadow: none; transform: none; }

.btn-ghost {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #D9C6F0;
  background: #FFFFFF;
  color: #8B5FC9;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-ghost:hover { background: #F6F0FD; border-color: #C4A9E8; }
.btn-ghost:active { background: #F0E7FA; }
.btn-ghost:disabled { color: #B9A9CE; border-color: #E8DCF7; cursor: not-allowed; background: #FFF; }

.btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; font-weight: 500; }

.btn-danger-ghost {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #B0576B;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-danger-ghost:hover { background: #FDECEF; border-color: #F5C9D2; }

.icon-btn {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 9px;
  border: 1px solid #E3D3F4;
  background: #FFFFFF;
  color: #6E5C80;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: #F6F0FD; color: #5B3A96; }

/* ---------- 输入 ---------- */
.input, .textarea {
  width: 100%;
  border: 1px solid #E3D3F4;
  border-radius: 8px;
  background: #FFFFFF;
  color: #33243F;
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 11px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus {
  border-color: #8B5FC9;
  box-shadow: 0 0 0 2px rgba(139,95,201,.22);
}
.input::placeholder, .textarea::placeholder { color: #BBAEC7; }
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

/* ---------- 首页 ---------- */
.hero { text-align: center; padding: 40px 0 26px; }
.hero h1 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 600;
  color: #5B3A96;
  letter-spacing: .5px;
}
.hero p { margin: 0; color: #6E5C80; font-size: 14px; }

.upload-card { max-width: 720px; margin: 0 auto; }
.dropzone {
  border: 1.5px dashed #CDB6EA;
  border-radius: 14px;
  background: #FCFAFE;
  padding: 38px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover { border-color: #B393E0; background: #FAF5FF; }
.dropzone.dragover {
  border-color: #8B5FC9;
  background: #F4EBFD;
  box-shadow: inset 0 0 0 3px rgba(139,95,201,.12);
}
.dropzone .dz-ico {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: #F1E9FB;
  color: #8B5FC9;
  display: flex; align-items: center; justify-content: center;
}
.dropzone .dz-title { font-size: 14.5px; font-weight: 600; color: #5B3A96; }
.dropzone .dz-sub { margin-top: 5px; font-size: 12.5px; color: #9A8AA8; }
.dropzone.busy { pointer-events: none; opacity: .75; }

.upload-alt { margin-top: 14px; text-align: center; }
.upload-alt .link {
  border: none; background: none; padding: 0;
  color: #8B5FC9; font-size: 13px; font-family: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.upload-alt .link:hover { color: #5B3A96; }
.paste-box { margin-top: 14px; display: grid; gap: 10px; text-align: left; }
.paste-box[hidden] { display: none; }
.paste-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.upload-error { margin-top: 12px; color: #B03A52; font-size: 12.5px; }
.upload-hint { margin-top: 12px; font-size: 12px; color: #9A8AA8; text-align: center; }

.spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid rgba(139,95,201,.25);
  border-top-color: #8B5FC9;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.btn .spinner { border-color: rgba(255,255,255,.35); border-top-color: #FFF; width: 14px; height: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

.section-head {
  margin: 34px 0 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.section-head h2 { margin: 0; font-size: 17px; font-weight: 600; color: #5B3A96; }
.section-head .count-note { font-size: 12.5px; color: #9A8AA8; }

.log-list { display: grid; gap: 10px; }
.log-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid #E8DCF7;
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.log-row:hover { border-color: #C9AEE9; box-shadow: 0 6px 18px rgba(91,58,150,.08); }
.log-row:active { transform: translateY(1px); }
.log-main { min-width: 0; }
.log-title {
  font-size: 14px; font-weight: 600; color: #33243F;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-meta { margin-top: 2px; font-size: 12px; color: #9A8AA8; display: flex; gap: 10px; flex-wrap: wrap; }
.log-days { font-size: 12.5px; color: #6E5C80; white-space: nowrap; }
.log-days.urgent { color: #D97B2B; font-weight: 600; }
.log-actions { display: flex; align-items: center; gap: 6px; }

/* ---------- 空状态 / 骨架 ---------- */
.empty {
  padding: 46px 20px 50px;
  text-align: center;
  color: #9A8AA8;
}
.empty-art { position: relative; width: 130px; height: 96px; margin: 0 auto 16px; }
.empty-art .dice-face {
  position: absolute; left: 38px; top: 18px;
  width: 56px; height: 56px;
  background: #FFFFFF;
  border: 1px solid #E3D3F4;
  border-radius: 15px;
  box-shadow: 0 8px 18px rgba(91,58,150,.10);
}
.empty-art .dice-face i {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: #C9AEE9;
}
.empty-art .dice-face i:nth-child(1) { left: 12px; top: 12px; }
.empty-art .dice-face i:nth-child(2) { right: 12px; top: 12px; }
.empty-art .dice-face i:nth-child(3) { left: 24px; top: 24px; background: #8B5FC9; }
.empty-art .dice-face i:nth-child(4) { left: 12px; bottom: 12px; }
.empty-art .dice-face i:nth-child(5) { right: 12px; bottom: 12px; }
.empty-art .bubble { position: absolute; border-radius: 50%; background: #F1E9FB; }
.empty-art .b1 { width: 26px; height: 26px; left: 8px; top: 8px; }
.empty-art .b2 { width: 16px; height: 16px; right: 10px; top: 22px; background: #E9DCF9; }
.empty-art .b3 { width: 12px; height: 12px; left: 22px; bottom: 10px; background: #EFE4FB; }
.empty-title { font-size: 14.5px; font-weight: 600; color: #6E5C80; }
.empty-sub { margin-top: 5px; font-size: 12.5px; }

.skl {
  border-radius: 10px;
  background: linear-gradient(90deg, #F3EDFA 25%, #FAF6FE 50%, #F3EDFA 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skl-row { height: 62px; margin-bottom: 10px; }
.skl-block { height: 15px; margin-bottom: 12px; }
.loading-tip { text-align: center; color: #9A8AA8; font-size: 12.5px; padding: 12px 0 4px; }

/* ---------- 编辑页工具栏 ---------- */
.toolbar {
  position: sticky;
  top: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border: 1px solid #E8DCF7;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(91,58,150,.07);
  margin-bottom: 18px;
}
.toolbar .tb-main { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 auto; }
.toolbar .tb-title { min-width: 0; }
.toolbar .tb-title .t {
  font-size: 14.5px; font-weight: 600; color: #33243F;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 380px;
}
.toolbar .tb-title .s { font-size: 12px; color: #9A8AA8; margin-top: 1px; }
.toolbar .tb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }

.save-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #9A8AA8; white-space: nowrap; }
.save-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #C9BCD8; }
.save-status.saved .dot { background: #57B27A; }
.save-status.saved { color: #4E9A6C; }
.save-status.saving .dot { background: #D9A23B; animation: pulse 1s infinite; }
.save-status.dirty .dot { background: #D9A23B; }
.save-status.error .dot { background: #D05B73; }
.save-status.error { color: #B03A52; }
@keyframes pulse { 50% { opacity: .35; } }

.seg {
  display: inline-flex;
  background: #F3EDFA;
  border: 1px solid #E8DCF7;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  border: none; background: transparent;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: #6E5C80;
  padding: 5px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.seg button:hover { color: #5B3A96; }
.seg button.active { background: #FFFFFF; color: #5B3A96; box-shadow: 0 1px 4px rgba(91,58,150,.14); }

/* ---------- 编辑页双栏 ---------- */
.editor-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.settings-col {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 16px;
}
.settings-col .card + .card { margin-top: 0; }

/* 格式单选卡 */
.fmt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.fmt-card {
  border: 1.5px solid #E8DCF7;
  border-radius: 12px;
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  display: block;
}
.fmt-card:hover { border-color: #C9AEE9; }
.fmt-card.active { border-color: #8B5FC9; background: #FAF6FE; box-shadow: 0 0 0 2px rgba(139,95,201,.12); }
.fmt-card .f-name { font-size: 13.5px; font-weight: 600; color: #33243F; display: flex; align-items: center; gap: 7px; }
.fmt-card .f-name .tick { color: #8B5FC9; visibility: hidden; }
.fmt-card.active .f-name .tick { visibility: visible; }
.fmt-card .f-desc { margin-top: 2px; font-size: 12px; color: #9A8AA8; }

/* 开关行 */
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.switch-row + .switch-row { border-top: 1px solid #F3EDFA; }
.switch-row .sw-text { flex: 1; min-width: 0; }
.switch-row .sw-label { font-size: 13.5px; font-weight: 600; color: #33243F; }
.switch-row .sw-desc { font-size: 12px; color: #9A8AA8; margin-top: 1px; }

.switch {
  flex: none;
  width: 40px; height: 22px;
  border-radius: 999px;
  border: none;
  background: #DCCDEF;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background .18s ease;
}
.switch .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(51,36,63,.25);
  transition: transform .18s ease;
}
.switch[aria-checked="true"] { background: #8B5FC9; }
.switch[aria-checked="true"] .knob { transform: translateX(18px); }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(139,95,201,.35); }

/* 发言人列表 */
.sp-quick { display: flex; gap: 8px; margin-bottom: 12px; }
.sp-list { display: grid; gap: 4px; }
.sp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  transition: background .15s ease, opacity .15s ease;
}
.sp-row:hover { background: #FAF6FE; }
.sp-row.removed { opacity: .45; }
.sp-row.removed .sp-name-input { text-decoration: line-through; }

.color-dot {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(51,36,63,.28);
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease;
}
.color-dot:hover { transform: scale(1.12); }
.color-dot input[type="color"] {
  position: absolute;
  inset: -6px;
  width: 40px; height: 40px;
  opacity: 0;
  cursor: pointer;
  border: none; padding: 0; background: none;
}

.sp-name-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #33243F;
  padding: 4px 7px;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sp-name-input:hover { border-color: #E8DCF7; background: #FFFFFF; }
.sp-name-input:focus { border-color: #8B5FC9; background: #FFFFFF; box-shadow: 0 0 0 2px rgba(139,95,201,.20); }

.sp-count { flex: none; font-size: 12px; color: #9A8AA8; white-space: nowrap; }

.bot-tag {
  flex: none;
  font-size: 11px;
  color: #8B5FC9;
  background: #F1E9FB;
  border-radius: 6px;
  padding: 1px 7px;
  font-weight: 600;
}

.sp-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6E5C80;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.sp-remove input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid #C9B6E4;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
  margin: 0;
  transition: background .15s ease, border-color .15s ease;
}
.sp-remove input:hover { border-color: #8B5FC9; }
.sp-remove input:checked { background: #8B5FC9; border-color: #8B5FC9; }
.sp-remove input:checked::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1.5px;
  width: 4px; height: 8px;
  border: solid #FFFFFF;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg);
}

/* 说明卡 */
.note-card p { margin: 0 0 9px; font-size: 12.5px; color: #6E5C80; display: flex; gap: 8px; align-items: flex-start; }
.note-card p:last-child { margin-bottom: 0; }
.note-card .n-ico { flex: none; color: #B393E0; margin-top: 2px; display: inline-flex; }
.note-card strong { color: #5B3A96; font-weight: 600; }

/* ---------- 预览 ---------- */
.preview-card { min-height: 380px; }
.preview-body { padding-top: 4px; }
@media (min-width: 960px) {
  .preview-body { max-height: calc(100vh - 210px); overflow-y: auto; padding-right: 6px; }
  .preview-body::-webkit-scrollbar { width: 8px; }
  .preview-body::-webkit-scrollbar-thumb { background: #E3D3F4; border-radius: 4px; }
}

.msg {
  display: flex;
  gap: 9px;
  margin: 0 0 5px;
  padding: 2px 6px;
  border-radius: 8px;
  align-items: flex-start;
}
.msg .m-time {
  flex: none;
  width: 140px;
  white-space: nowrap;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  color: #9A8AA8;
  padding-top: 1px;
}
.msg .m-speaker { flex: none; font-weight: 700; max-width: 180px; overflow-wrap: anywhere; }
.msg .m-text {
  flex: 1;
  min-width: 0;
  color: #33243F;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.ooc {
  background: #F4F1F7;
  font-style: italic;
}
.msg.ooc .m-text, .msg.ooc .m-speaker { color: #7A6E87; }

.p-note { text-align: center; margin: 11px 0; }
.p-note span {
  display: inline-block;
  background: #F1E9FB;
  color: #5B3A96;
  border-radius: 999px;
  padding: 4px 15px;
  font-size: 12.5px;
  max-width: 86%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.imgtag {
  display: inline-block;
  background: #EFEAF4;
  color: #6E5C80;
  border-radius: 6px;
  padding: 0 7px;
  margin: 0 2px;
  font-size: 12px;
  font-style: normal;
  vertical-align: 1px;
  white-space: nowrap;
}

.msg-img-wrap { display: inline-flex; vertical-align: middle; margin: 2px 4px 2px 0; }
.msg-img-wrap a { display: inline-block; line-height: 0; }
.msg-img { max-width: 260px; max-height: 180px; border-radius: 8px; border: 1px solid #E8DCF7; display: inline-block; vertical-align: middle; }
.img-fallback { display: none; }
.msg-img-wrap.broken a { display: none; }
.msg-img-wrap.broken .img-fallback { display: inline-block; }
.msg-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 1px 0 8px 149px; align-items: flex-start; }
.msg-imgs .msg-img { max-width: 240px; max-height: 200px; }

.preview-cap {
  margin-top: 12px;
  padding: 9px 12px;
  text-align: center;
  font-size: 12.5px;
  color: #8B5FC9;
  background: #F6F0FD;
  border-radius: 9px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .editor-grid { grid-template-columns: 1fr; }
  .settings-col { position: static; }
  .toolbar .tb-title .t { max-width: 46vw; }
  .wrap { padding: 16px 14px 56px; }
  .hero h1 { font-size: 24px; }
  .log-row { grid-template-columns: minmax(0,1fr) auto; }
  .log-days { grid-column: 1 / -1; }
  .log-actions { grid-column: 2; grid-row: 1; }
}

@media (max-width: 560px) {
  .toolbar { top: 6px; }
  .toolbar .tb-right { margin-left: 0; width: 100%; justify-content: flex-start; }
  .msg .m-time { width: 118px; font-size: 11px; }
  .fmt-cards { grid-template-columns: 1fr; }
}