:root {
  color-scheme: dark;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  background: #090f22;
  color: #f7f2ea;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #182c52, #090f22 58%);
}

a { color: #f2c8b9; }
.site-header { display: flex; justify-content: space-between; gap: 2rem; padding: 1rem 5vw; border-bottom: 1px solid #ffffff22; }
.site-header nav { display: flex; gap: 1rem; }
.page-shell { width: min(70rem, 92vw); margin: 4rem auto; }
.panel { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #ffffff28; border-radius: 1.25rem; background: #0e1730e8; box-shadow: 0 1.5rem 4rem #0008; }
.admin-panel { border-color: #d8a48f66; }
.eyebrow { letter-spacing: .15em; text-transform: uppercase; color: #e4b29e; }
.button { display: inline-block; padding: .7rem 1rem; border: 1px solid #f2c8b9; border-radius: .6rem; background: #6e2730; color: white; text-decoration: none; cursor: pointer; }
.account-panel { max-width: 38rem; margin-inline: auto; }
.account-panel form > div { margin-block: 1rem; }
.account-panel label { display: block; margin-bottom: .35rem; color: #c8d7f1; }
.account-panel input {
  box-sizing: border-box;
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid #ffffff38;
  border-radius: .55rem;
  background: #091127;
  color: #fff;
}
.account-panel button {
  padding: .7rem 1rem;
  border: 1px solid #f2c8b9;
  border-radius: .6rem;
  background: #6e2730;
  color: #fff;
  cursor: pointer;
}
.account-panel ul { padding-left: 1.2rem; color: #c8d7f1; }
.messages { padding: .8rem 1rem; border: 1px solid #e4b29e66; border-radius: .6rem; }
dt { margin-top: 1rem; color: #c8d7f1; }
dd { margin-left: 0; }
.wide-panel { width: 100%; box-sizing: border-box; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.button-secondary { background: #162544; }
.editor-form { display: grid; gap: 1.5rem; }
.editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field label, .chapter-card label { display: block; margin-bottom: .35rem; color: #c8d7f1; }
.field input, .field select, .field textarea, .chapter-card input, .chapter-card textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid #ffffff38;
  border-radius: .55rem;
  background: #091127;
  color: #fff;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field-error input, .field-error textarea { border-color: #ff8f8f; }
.errorlist, .form-errors { color: #ffb1b1; }
.chapter-editor { border-top: 1px solid #ffffff22; padding-top: 1.5rem; }
.chapter-card { margin-block: 1rem; padding: 1rem; border: 1px solid #ffffff28; border-radius: .8rem; }
.chapter-card > div { margin-block: .8rem; }
.text-button { border: 0; background: transparent; color: #f2c8b9; cursor: pointer; }
.notice, .empty-state { margin-block: 1.5rem; padding: 1rem; border-left: .25rem solid #d8a48f; background: #ffffff0b; }
.inline-action { display: inline-block; margin: 1rem 1rem 0 0; }
.work-list { display: grid; gap: 1rem; }
.work-row { padding: 1rem; border: 1px solid #ffffff22; border-radius: .8rem; }
.work-row h2 { margin-top: 0; }
.notification-list { display: grid; gap: .75rem; }
.notification-list article { padding: 1rem 1.15rem; border: 1px solid rgba(17,27,71,.12); border-radius: 10px; background: rgba(255,250,240,.72); }
.notification-list article.is-unread { border-color: rgba(165,46,73,.42); background: #fff3df; box-shadow: inset 3px 0 #a52e49; }
.notification-list article h2 { margin: .25rem 0 .35rem; }
.notification-list article .text-button { margin-left: .75rem; }
body.backend-page .notification-card { border-color: rgba(214,181,119,.28); background: rgba(255,250,240,.06); }
body.backend-page .notification-card.is-unread { border-color: rgba(214,181,119,.66); background: rgba(165,46,73,.16); box-shadow: inset 3px 0 #d6b577; }
.revision-links { display: flex; flex-wrap: wrap; gap: .8rem; margin-block: .8rem; }
.preview-panel { line-height: 1.8; }
.preview-panel .byline, .preview-panel .summary { color: #c8d7f1; }
.local-mail-notice,.local-mail-card { margin-bottom: 1.25rem; padding: 1rem; border: 1px solid #e7bf6866; border-radius: .5rem; background: #e7bf6810; overflow-wrap: anywhere; }
.local-mail-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.local-mail-card h2 { font-size: 1.15rem; }
.rendered-chapter { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ffffff22; }
.rendered-chapter pre { overflow: auto; padding: 1rem; background: #071022; }

@media (max-width: 40rem) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .site-header nav { flex-wrap: wrap; }
  .page-shell { margin-block: 2rem; }
  .editor-grid { grid-template-columns: 1fr; }
  .section-heading { flex-direction: column; }
}

/* U1：账号、作者与管理页面共用恶女档案馆的夜蓝、纸白、金朱体系。 */
:root {
  color-scheme: light;
  --archive-night: #0b1237;
  --archive-blue: #111c53;
  --archive-red: #a92c42;
  --archive-gold: #c79a3b;
  --archive-gold-soft: #f3dfaa;
  --archive-paper: #fffaf1;
  --archive-paper-deep: #f2e8d6;
  --archive-ink: #28202b;
  --archive-muted: #6f6670;
  --archive-line: rgba(17, 28, 83, .16);
  background: var(--archive-paper-deep);
  color: var(--archive-ink);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

body.backend-page {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 2%, rgba(199, 154, 59, .16), transparent 26rem),
    radial-gradient(circle at 88% 28%, rgba(169, 44, 66, .08), transparent 30rem),
    linear-gradient(180deg, #f6eddf, var(--archive-paper) 18rem, #f5ecdf);
  color: var(--archive-ink);
  line-height: 1.7;
}

body.backend-page::before,
body.backend-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(199, 154, 59, .18);
  border-radius: 50%;
}

body.backend-page::before { width: 28rem; height: 12rem; top: 9rem; left: -13rem; transform: rotate(-12deg); }
body.backend-page::after { width: 25rem; height: 10rem; right: -12rem; bottom: 5rem; transform: rotate(11deg); }

.backend-header {
  position: relative;
  z-index: 10;
  min-height: 78px;
  padding: 12px clamp(18px, 4vw, 56px);
  align-items: center;
  border-bottom: 1px solid rgba(243, 223, 170, .24);
  background: var(--archive-night);
  box-shadow: 0 12px 38px rgba(11, 18, 55, .14);
}

.backend-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff8ef;
  text-decoration: none;
}

.backend-brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(243, 223, 170, .7);
  border-radius: 50%;
  color: var(--archive-gold-soft);
  font-family: Georgia, "Noto Serif SC", serif;
  font-weight: 700;
}

.backend-brand strong,
.backend-brand small { display: block; line-height: 1.2; }
.backend-brand strong { letter-spacing: .1em; }
.backend-brand small { margin-top: 4px; color: rgba(255, 248, 239, .58); font-size: .56rem; letter-spacing: .11em; }

.backend-header nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px 18px; flex-wrap: wrap; }
.backend-header nav a { min-height: 38px; display: inline-flex; align-items: center; color: rgba(255, 248, 239, .82); font-size: .84rem; text-decoration: none; }
.backend-header nav a:hover,
.backend-header nav a:focus-visible { color: var(--archive-gold-soft); }

body.backend-page .page-shell a { color: var(--archive-red); }
body.backend-page :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--archive-gold);
  outline-offset: 3px;
}

body.backend-page .page-shell {
  width: min(76rem, calc(100% - 40px));
  margin: clamp(2rem, 5vw, 4.5rem) auto;
}

body.backend-page .panel {
  min-width: 0;
  padding: clamp(1.35rem, 4vw, 3rem);
  border: 1px solid var(--archive-line);
  border-radius: .75rem;
  background: rgba(255, 250, 241, .94);
  color: var(--archive-ink);
  box-shadow: 0 22px 65px rgba(17, 28, 83, .1);
  overflow-wrap: anywhere;
}

body.backend-page .panel + .panel { margin-top: 1.5rem; }
body.backend-page .admin-panel { border-top: 4px solid var(--archive-red); }
body.backend-page .account-panel { max-width: 42rem; margin-inline: auto; border-top: 4px solid var(--archive-gold); }
body.backend-page .account-panel::before { content: "ACCOUNT / 雏宫同行录"; display: block; margin-bottom: 1rem; color: var(--archive-red); font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
body.backend-page .account-panel h1 { margin-top: 0; font-family: Georgia, "Noto Serif SC", serif; color: var(--archive-blue); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.25; }
body.backend-page .account-panel :is(p, li) { line-height: 1.75; }

body.account-entrance-page .page-shell {
  max-width: 42rem;
  padding: clamp(1.35rem, 4vw, 3rem);
  border: 1px solid var(--archive-line);
  border-top: 4px solid var(--archive-gold);
  border-radius: .75rem;
  background: rgba(255, 250, 241, .94);
  box-shadow: 0 22px 65px rgba(17, 28, 83, .1);
  overflow-wrap: anywhere;
}

body.account-entrance-page .page-shell::before {
  content: "ACCOUNT / 雏宫同行录";
  display: block;
  margin-bottom: 1rem;
  color: var(--archive-red);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
}

body.account-entrance-page .page-shell > h1 { margin-top: 0; font-family: Georgia, "Noto Serif SC", serif; color: var(--archive-blue); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.25; }

body.backend-page .eyebrow { color: var(--archive-red); }
body.backend-page :is(dt, .field label, .chapter-card label, .account-panel label) { color: var(--archive-blue); }
body.backend-page :is(dd, .preview-panel .byline, .preview-panel .summary) { color: var(--archive-muted); }

body.backend-page :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  min-height: 44px;
  padding: .72rem .82rem;
  border: 1px solid rgba(17, 28, 83, .25);
  border-radius: .35rem;
  background: #fff;
  color: var(--archive-ink);
  font: inherit;
}

body.backend-page textarea { resize: vertical; }
body.backend-page input::placeholder,
body.backend-page textarea::placeholder { color: #8b8189; }
body.backend-page :is(input, select, textarea):focus { border-color: var(--archive-gold); box-shadow: 0 0 0 3px rgba(199, 154, 59, .12); }

body.backend-page :is(.button, button:not(.text-button)) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .7rem 1rem;
  border: 1px solid var(--archive-red);
  border-radius: .35rem;
  background: var(--archive-red);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.backend-page :is(.button, button:not(.text-button)):hover,
body.backend-page :is(.button, button:not(.text-button)):focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(169, 44, 66, .18); }
body.backend-page .button-secondary { border-color: var(--archive-blue); background: var(--archive-blue); }
body.backend-page .text-button { min-height: 40px; color: var(--archive-red); }

body.backend-page .messages,
body.backend-page .local-mail-notice,
body.backend-page .local-mail-card,
body.backend-page :is(.notice, .empty-state) {
  color: var(--archive-ink);
  border-color: rgba(199, 154, 59, .46);
  background: rgba(243, 223, 170, .28);
  overflow-wrap: anywhere;
}

body.backend-page .messages { max-width: 76rem; margin: 0 auto 1rem; list-style: none; }
body.backend-page .errorlist,
body.backend-page .form-errors { color: #8d2034; font-weight: 700; }
body.backend-page .helptext { display: block; margin-top: .4rem; color: var(--archive-muted); font-size: .86rem; }

body.backend-page :is(.work-card, .work-row, .chapter-card, .local-mail-card) {
  min-width: 0;
  border-color: var(--archive-line);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .62);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  overflow-wrap: anywhere;
}

body.backend-page .work-card { padding: 1rem; }

body.backend-page :is(.work-card, .work-row, .chapter-card, .local-mail-card):hover,
body.backend-page :is(.work-card, .work-row, .chapter-card, .local-mail-card):focus-within {
  transform: translateY(-3px);
  border-color: rgba(199, 154, 59, .72);
  box-shadow: 0 13px 30px rgba(17, 28, 83, .1);
}

body.backend-page .chapter-card:hover,
body.backend-page .chapter-card:focus-within { transform: none; }

.backend-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 20px clamp(20px, 5vw, 64px);
  border-top: 1px solid rgba(243, 223, 170, .18);
  background: var(--archive-night);
  color: rgba(255, 248, 239, .58);
  font-size: .76rem;
}

@media (prefers-reduced-motion: reduce) {
  body.backend-page :is(.button, button, .work-card, .work-row, .chapter-card, .local-mail-card) { transition: none; }
  body.backend-page :is(.button, button, .work-card, .work-row, .chapter-card, .local-mail-card):hover,
  body.backend-page :is(.button, button, .work-card, .work-row, .chapter-card, .local-mail-card):focus-within { transform: none; }
}

@media (max-width: 48rem) {
  .backend-header { align-items: flex-start; flex-direction: column; }
  .backend-header nav { justify-content: flex-start; }
  .backend-brand small { display: none; }
  body.backend-page .page-shell { width: min(100% - 28px, 46rem); margin-block: 1.5rem 2.5rem; }
  .backend-footer { flex-direction: column; }
}

/* U2：私有收藏与创作档案设置。 */
.community-account-panel { max-width: 48rem; }
.community-settings-form { display: grid; gap: 1.1rem; }
.community-settings-form ul { padding: 0; list-style: none; }
.community-settings-form li { margin-block: .45rem; }
.community-settings-form input[type="checkbox"] { width: auto; min-height: auto; margin-right: .45rem; }
.saved-library > h1 { margin: .3rem 0 1rem; color: var(--archive-blue); font: 700 clamp(2rem, 4vw, 3.4rem)/1.2 Georgia, "Noto Serif SC", serif; }
.saved-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.saved-item { min-width: 0; padding: 1.1rem; border: 1px solid var(--archive-line); background: rgba(255,255,255,.64); overflow-wrap: anywhere; }
.saved-item h2, .saved-item h3 { color: var(--archive-blue); }
.saved-item.is-unavailable { border-style: dashed; background: rgba(242, 232, 214, .7); }
.saved-item form { margin-top: 1rem; }
.saved-pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.series-editor-form > .field { margin-block: 1.4rem; }
.series-editor-form [hidden] { display: none !important; }
.series-editor-form + form { margin-top: 1rem; }
.series-picker { margin-block: 1.8rem; padding: clamp(14px, 3vw, 26px); border: 1px solid var(--archive-line); }
.series-picker-add { display: flex; gap: 12px; align-items: center; }
.series-picker-add select { flex: 1; min-width: 0; }
.series-picker-list { padding-left: 1.5rem; }
.series-picker-list li { padding: 12px 0; border-bottom: 1px solid var(--archive-line); overflow-wrap: anywhere; }
.series-picker-list li > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.series-picker .button { min-height: 44px; }
@media (max-width: 480px) { .series-picker-add { align-items: stretch; flex-direction: column; } }

@media (max-width: 48rem) {
  .saved-list { grid-template-columns: 1fr; }
}
.work-delete-control { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid rgba(180,147,67,.32); border-radius: 9px; background: #fbf4e6; }
.work-delete-control summary { color: #8f2942; cursor: pointer; }
.work-archive-control summary { color: #29305d; }
.work-delete-control p { margin: .5rem 0; color: #6d6270; font-size: .9rem; }
.studio-shortcuts { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; padding: .55rem; border: 1px solid #dfcfad; border-radius: 12px; background: rgba(255,250,241,.7); }
.studio-shortcuts a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.2rem; padding: .35rem .7rem; border-radius: 8px; color: #55465b; text-decoration: none; font-size: .88rem; }
.studio-shortcuts a:hover,.studio-shortcuts a:focus-visible { background: #f4e8d1; color: #942941; }
.studio-shortcuts a span { display: inline-grid; min-width: 1.25rem; min-height: 1.25rem; place-items: center; border-radius: 50%; background: #a52d48; color: white; font-size: .72rem; }
.studio-author-hero { border-top: 2px solid #c6a561!important; }
.studio-author-hero dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin: 1.25rem 0 0; }
.studio-author-hero dl > div { display: grid; grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr); gap: .6rem; align-items: baseline; min-width: 0; padding: .7rem .8rem; border: 1px solid #e5d8c0; border-radius: 8px; background: rgba(255,255,255,.48); }
.studio-author-hero dt { color: #817286; white-space: nowrap; }
.studio-author-hero dd { margin: 0; min-width: 0; color: #29305d; overflow-wrap: anywhere; }
.media-auto-order, .media-binding-order { display: inline-flex; align-items: center; min-height: 2.1rem; padding: .35rem .65rem; border: 1px dashed #c6a561; border-radius: 7px; background: #fff8e9; color: #765d4a; font-size: .86rem; }
.studio-work-list-panel>h2 { padding-bottom: .6rem; border-bottom: 1px solid #e5d8c0; }
.studio-work-card { padding: 1.25rem; border: 1px solid #e1d2b5; border-radius: 12px; background: linear-gradient(145deg,#fffdf8,#fbf3e5); box-shadow: 0 7px 24px rgba(30,25,50,.045); }
.studio-work-card h3 { margin: .35rem 0; color: #27203a; font: 1.35rem/1.5 "Noto Serif SC","Songti SC",serif; }
.studio-work-card .eyebrow { color: #a32c46; letter-spacing: .08em; }
.studio-work-card .inline-action { display: grid; gap: .65rem; margin-top: 1rem; padding: .85rem; border: 1px solid rgba(41,48,93,.18); border-radius: 12px; background: rgba(247,237,207,.58); }
.studio-work-card .inline-action label { display: grid; gap: .35rem; color: #765d4a; font-size: .86rem; }
.studio-work-card .inline-action input { width: 100%; box-sizing: border-box; border: 1px solid #d7c59c; border-radius: 8px; background: #fffdf8; }
.studio-work-card .inline-action .button { justify-self: start; border-radius: 999px; }
@media(max-width:640px){.studio-shortcuts{gap:.25rem;padding:.4rem}.studio-shortcuts a{font-size:.8rem;padding:.3rem .5rem}.studio-author-hero dl{grid-template-columns:1fr}.studio-author-hero dl > div{grid-template-columns:minmax(5.5rem,auto) minmax(0,1fr)}}