:root {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  color: #222d42;
  background: #f4f6fa;
  font-synthesis: none;
  --blue: #245be8;
  --ink: #172338;
  --muted: #727e92;
  --line: #e5eaf2;
  --sidebar: 224px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-size: 16px;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  white-space: nowrap;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #91b1ff;
  outline-offset: 3px;
}
input,
textarea,
select {
  border: 1px solid #dce3ee;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  min-width: 0;
  width: 100%;
  outline: 0;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #7198f3;
  box-shadow: 0 0 0 3px #245be810;
}
textarea {
  resize: vertical;
  line-height: 1.65;
}
label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #526075;
}
form > label,
form > .form-row {
  margin-bottom: 16px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 25px;
  letter-spacing: -0.5px;
  margin-top: 7px;
  font-weight: 650;
}
h2 {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.5;
}
h3 {
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 15px;
}
p {
  line-height: 1.8;
}
a {
  color: inherit;
  text-decoration: none;
}
[hidden] {
  display: none !important;
}
.primary {
  color: white;
  background: var(--blue);
  padding: 11px 19px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.primary:hover {
  background: #1949c9;
}
.subtle {
  background: #fff;
  border: 1px solid #dce3ee;
  padding: 10px 15px;
  border-radius: 8px;
  color: #46536b;
  font-size: 14px;
}
.subtle:hover {
  background: #eef3fd;
  border-color: #c5d5f4;
}
.text-button {
  color: var(--blue);
  background: none;
  padding: 5px 0;
  font-size: 14px;
}
.danger {
  color: #bf404e;
}
.wide {
  width: 100%;
}
.small {
  padding: 8px 17px;
}
.muted {
  color: var(--muted);
  font-size: 14px;
}
.note {
  font-size: 13px;
}
.eyebrow {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.button-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.check-label {
  flex-direction: row;
  align-items: center;
}
.check-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 28px 18px;
  z-index: 3;
}
.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 0 10px 28px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
}
.brand-mark {
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-family: serif;
  font-size: 25px;
  border-radius: 11px;
  width: 43px;
  height: 43px;
  box-shadow: 0 4px 10px #245be825;
}
.brand small {
  display: block;
  color: #909aab;
  font-size: 12px;
  letter-spacing: 1.5px;
  margin-top: 5px;
  font-weight: 400;
}
.project-picker {
  padding: 0 5px 23px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.project-picker label {
  font-size: 12px;
  display: block;
  margin-bottom: 9px;
  color: #8993a5;
}
.project-picker select {
  font-size: 14px;
  background: #f7f9fd;
  margin-bottom: 10px;
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  background: none;
  color: #69758a;
  width: 100%;
  padding: 12px 14px;
  margin: 3px 0;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
}
.nav-item span {
  font-size: 20px;
  width: 22px;
  text-align: center;
  color: #8a97ad;
}
.nav-item:hover {
  background: #f6f8fc;
}
.nav-item.active {
  background: #edf2ff;
  color: var(--blue);
  font-weight: 600;
}
.nav-item.active span {
  color: var(--blue);
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 13px;
}
.local-label {
  display: block;
  font-size: 12px;
  color: #929baa;
  line-height: 1.7;
  padding: 13px 9px 0;
}
main {
  margin-left: var(--sidebar);
  padding: 30px 34px 35px;
  max-width: 1860px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 27px;
  gap: 18px;
}
.header-actions {
  display: flex;
  gap: 9px;
}
.workflow {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 17px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}
.workflow button {
  background: none;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #58677d;
  font-size: 14px;
}
.workflow button:hover {
  color: var(--blue);
}
.workflow b {
  font-size: 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: #edf2fd;
  color: var(--blue);
  font-weight: 600;
}
.step-line {
  height: 1px;
  background: #e3e9f2;
  flex: 1;
  margin: 0 24px;
}
.writing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 22px;
  align-items: start;
}
.editor-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px #1b375b03;
}
.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 22px;
  border-bottom: 1px solid #eef1f6;
}
.editor-heading,
.editor-meta {
  display: flex;
  align-items: center;
  gap: 13px;
}
.editor-meta {
  font-size: 12px;
  color: #8591a4;
}
.pill {
  font-size: 12px;
  padding: 4px 8px;
  background: #f0f4fa;
  color: #6c7b91;
  border-radius: 5px;
  white-space: nowrap;
}
#chapter-control {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: #45536b;
}
#chapter-number {
  width: 68px;
  padding: 5px 4px 5px 10px;
  background: #f8faff;
  font-size: 14px;
}
.chapter-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 11px 20px;
  border-bottom: 1px solid #f1f3f8;
}
.chapter-strip:empty {
  display: none;
}
.chapter-strip button {
  background: #f6f8fb;
  color: #77849a;
  font-size: 12px;
  border-radius: 5px;
  padding: 6px 9px;
}
.chapter-strip button.selected {
  background: #eaf0ff;
  color: var(--blue);
}
#editor {
  display: block;
  min-height: 470px;
  height: calc(100vh - 375px);
  border: 0;
  border-radius: 0;
  padding: 32px 38px;
  font-family: "Songti SC", "Noto Serif SC", SimSun, serif;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.4px;
  resize: vertical;
}
#editor::placeholder {
  font-family: inherit;
  color: #afb7c5;
  font-size: 16px;
}
#editor:focus {
  box-shadow: none;
}
.editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  color: #95a0b0;
  font-size: 12px;
  border-top: 1px solid #f3f5f8;
}
.editor-footer .text-button {
  font-size: 12px;
  color: #7a89a0;
}
.editor-actions {
  display: flex;
  gap: 9px;
  padding: 17px 22px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  background: #fcfdff;
}
.inspector {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 21px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 19px;
}
.inspector input,
.inspector textarea,
.inspector select {
  font-size: 14px;
  background: #fcfdff;
  padding: 9px 10px;
}
.inspector-divider {
  border-top: 1px solid var(--line);
  margin: 22px 0;
}
.inspector label {
  font-size: 13px;
}
.inspector .section-heading h2 {
  font-size: 15px;
}
.empty-state {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.empty-state h2 {
  font-family: serif;
  font-size: 29px;
  font-weight: 500;
}
.empty-state p {
  color: #8390a4;
  font-size: 15px;
}
.empty-mark {
  display: grid;
  place-items: center;
  width: 94px;
  height: 115px;
  border: 1px solid #d8e2f8;
  border-radius: 3px 12px 12px 3px;
  background: #ecf2ff;
  box-shadow: -4px 0 #cfdbf5;
  font-family: serif;
  font-size: 20px;
  writing-mode: vertical-rl;
  letter-spacing: 5px;
  color: #5473b5;
  margin-bottom: 8px;
}
.notice {
  border: 1px solid #f0d398;
  background: #fff8e9;
  color: #876025;
  border-radius: 9px;
  padding: 13px 17px;
  font-size: 14px;
  margin-bottom: 20px;
}
.task-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 19px 23px;
  margin-top: 22px;
}
.task-panel .section-heading {
  margin-bottom: 10px;
}
.task-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-title h2 {
  font-size: 14px;
}
.task-indicator {
  width: 7px;
  height: 7px;
  background: #97a4b8;
  border-radius: 50%;
}
.task-indicator.running {
  background: var(--blue);
  animation: pulse 1.5s infinite;
}
.task-indicator.completed {
  background: #32806b;
}
.task-indicator.failed {
  background: #cc4b55;
}
#task-log {
  color: #7b889b;
  font-size: 13px;
  line-height: 1.9;
  max-height: 150px;
  overflow: auto;
  white-space: pre-wrap;
}
.error-text {
  font-size: 14px;
  color: #b64b52;
  margin-top: 12px;
}
.settings-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1100px;
}
.settings-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 22px;
  max-width: 1100px;
}
.settings-card h2 {
  margin-bottom: 20px;
}
.settings-card .section-heading h2 {
  margin-bottom: 0;
}
.settings-card > label {
  margin-bottom: 18px;
}
.settings-save {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  gap: 16px;
}
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 19px;
}
.role-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
}
.role-card h3 {
  font-size: 18px;
  margin: 12px 0;
}
.role-card p {
  font-size: 14px;
  color: #7c899a;
  white-space: pre-wrap;
  max-height: 120px;
  overflow: hidden;
  margin-bottom: 17px;
}
dialog {
  border: 1px solid #dce4f1;
  border-radius: 16px;
  padding: 28px;
  width: min(520px, calc(100vw - 28px));
  color: var(--ink);
  box-shadow: 0 30px 100px #15264930;
  max-height: 90vh;
  overflow: auto;
}
dialog::backdrop {
  background: #14213869;
  backdrop-filter: blur(3px);
}
.large-dialog {
  width: min(850px, calc(100vw - 28px));
}
.dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 23px;
}
.dialog-heading h2 {
  font-size: 20px;
}
.dialog-heading > button {
  font-size: 25px;
  background: none;
  color: #8d98a9;
  padding: 3px 8px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 23px;
}
.large-dialog > p {
  margin-bottom: 16px;
}
#result-text {
  font: 16px/1.9 inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 65vh;
  overflow: auto;
}
#toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #203250;
  color: #fff;
  box-shadow: 0 5px 20px #15284e30;
  border-radius: 9px;
  padding: 13px 23px;
  font-size: 14px;
  max-width: 90vw;
  z-index: 100;
  display: none;
}
#toast.show {
  display: block;
}
#toast.error {
  background: #a23d49;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}
@media (min-width: 1600px) {
  main {
    padding: 35px 50px;
  }
  .writing-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
  #editor {
    padding: 36px 65px;
  }
}
@media (max-width: 1150px) {
  :root {
    --sidebar: 190px;
  }
  .sidebar {
    padding: 23px 12px;
  }
  main {
    padding: 25px 20px;
  }
  .writing-grid {
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 15px;
  }
  .inspector {
    padding: 16px;
  }
  #editor {
    padding: 25px;
  }
  .step-line {
    margin: 0 12px;
  }
  .editor-toolbar {
    padding: 14px;
  }
  .editor-actions {
    padding: 14px;
    gap: 7px;
  }
  .editor-actions button {
    padding: 10px 12px;
  }
  .brand {
    padding-left: 4px;
  }
}
@media (max-width: 900px) {
  .writing-grid {
    grid-template-columns: 1fr;
  }
  .inspector {
    max-height: none;
  }
  #params-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  #params-form > label,
  #params-form > .form-row {
    margin: 0;
  }
  #params-form .inspector-divider,
  #params-form h3 {
    display: none;
  }
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .workflow {
    padding: 15px 10px;
  }
  .workflow button {
    gap: 6px;
    font-size: 13px;
  }
  .step-line {
    margin: 0 8px;
  }
  #editor {
    min-height: 400px;
  }
  .editor-toolbar {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .sidebar {
    position: static;
    width: 100%;
    padding: 16px 15px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .brand {
    padding: 0;
    font-size: 18px;
  }
  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }
  .brand small,
  .project-picker label,
  .sidebar-bottom .local-label {
    display: none;
  }
  .project-picker {
    display: flex;
    gap: 8px;
    margin: 15px 0 7px;
    padding: 0;
    border: 0;
  }
  .project-picker select {
    margin: 0;
    flex: 1;
  }
  .project-picker .wide {
    width: auto;
  }
  nav {
    display: flex;
    overflow-x: auto;
    gap: 3px;
  }
  .nav-item {
    width: auto;
    flex-shrink: 0;
    padding: 9px 11px;
    font-size: 13px;
    gap: 7px;
  }
  .nav-item span {
    display: none;
  }
  .sidebar-bottom {
    padding: 0;
    margin: 3px 0 0;
    border: 0;
  }
  .sidebar-bottom .nav-item {
    margin: 0;
  }
  .sidebar-bottom {
    position: absolute;
    right: 13px;
    top: 19px;
  }
  main {
    margin: 0;
    padding: 21px 14px;
  }
  .topbar {
    margin-bottom: 20px;
    align-items: flex-end;
  }
  .topbar h1 {
    font-size: 22px;
  }
  .header-actions {
    gap: 6px;
  }
  .header-actions button {
    padding: 8px 10px;
    font-size: 12px;
  }
  .workflow {
    margin-bottom: 16px;
    justify-content: space-between;
  }
  .workflow button {
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
  }
  .step-line {
    margin: 0 7px;
  }
  .workflow b {
    height: 25px;
    width: 25px;
  }
  .editor-toolbar {
    gap: 8px;
  }
  .editor-heading,
  .editor-meta {
    gap: 8px;
  }
  #editor {
    padding: 24px 20px;
    font-size: 17px;
    min-height: 390px;
  }
  #params-form {
    display: block;
  }
  #params-form > label,
  #params-form > .form-row {
    margin-bottom: 16px;
  }
  .settings-card {
    padding: 20px;
  }
  .settings-save {
    align-items: flex-start;
  }
  .settings-save .muted {
    max-width: 170px;
  }
  .task-panel {
    padding: 17px;
  }
  .section-heading {
    align-items: flex-start;
  }
  .task-title {
    flex-wrap: wrap;
  }
  .empty-state {
    min-height: 52vh;
  }
  .empty-state h2 {
    font-size: 25px;
  }
  .button-row {
    gap: 8px;
  }
  dialog {
    padding: 22px;
  }
  .editor-footer {
    padding: 12px 14px;
  }
}
:root .auth-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #f2f5fb;
  display: grid;
  place-items: center;
  padding: 20px;
}
.auth-card {
  background: white;
  padding: 40px;
  width: min(440px, 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 15px 70px #223c6510;
}
.dingtalk-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.auth-card .dingtalk-logo {
  display: block;
}
.auth-card .brand-mark,
.auth-card .dingtalk-logo {
  margin-bottom: 20px;
}
.auth-card h1 {
  margin-bottom: 10px;
}
.auth-card > p {
  margin-bottom: 24px;
}
.auth-card > label {
  margin-bottom: 18px;
}
.auth-card .error-text {
  margin-bottom: 15px;
}
.users-list {
  margin: 18px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}
#users-card {
  margin-top: 25px;
}
:root body:has(#auth-screen:not([hidden])) > aside,
:root body:has(#auth-screen:not([hidden])) > main {
  visibility: hidden;
}
.webdav-card {
  margin-top: 25px;
}
.webdav-card .button-row {
  margin-top: 15px;
}
@media (max-width: 640px) {
  .sidebar-bottom .local-label {
    display: block;
    padding: 0;
    text-align: right;
    font-size: 12px;
  }
  .sidebar-bottom #current-user {
    display: none;
  }
  .sidebar-bottom #logout {
    font-size: 12px;
  }
}

/* Focused writing desk and separate organization workspace. */
.workspace-tabs,
.compact-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #dfe5ef;
  overflow-x: auto;
  flex-shrink: 0;
}
.workspace-tabs {
  margin: 0 0 18px;
  gap: 22px;
}
.workspace-tabs button,
.compact-tabs button {
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
  color: #68758a;
  padding: 14px 3px;
  border-bottom: 2px solid transparent;
}
.workspace-tabs button.active,
.compact-tabs button.active {
  color: #245be8;
  border-bottom-color: #245be8;
  font-weight: 650;
}
.compact-tabs {
  margin-bottom: 22px;
  gap: 24px;
}
.work-context,
.management-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.writing-grid {
  display: block;
}
.editor-card {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 260px);
  min-height: 410px;
}
#editor {
  flex: 1;
  min-height: 150px;
  height: auto;
  resize: none;
  padding: 26px 42px;
}
.editor-toolbar,
.editor-footer,
.editor-actions,
.chapter-strip {
  flex-shrink: 0;
}
#params-dialog {
  width: min(600px, calc(100vw - 32px));
}
#params-dialog .inspector {
  border: 0;
  padding: 0;
  width: 100%;
  background: white;
}
#params-dialog .section-heading {
  gap: 20px;
}
#params-dialog .note {
  margin-bottom: 0;
}
#params-chapter h3 {
  display: none;
}
#tasks-dialog .task-panel {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
#tasks-button.busy {
  color: #245be8;
  background: #eef3ff;
  border-color: #bdcffb;
}
.management-heading h2 {
  font-size: 20px;
  margin: 0 0 6px;
}
.management-heading p {
  margin: 0;
}
.team-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid #e0e6ef;
  background: #fff;
  border-radius: 10px;
}
.stat-card strong {
  font-size: 27px;
  letter-spacing: -0.6px;
  color: #203250;
}
.member-table {
  background: #fff;
  border: 1px solid #e0e6ef;
  border-radius: 10px;
  overflow: hidden;
}
.member-row {
  display: grid;
  grid-template-columns:
    minmax(140px, 1fr) minmax(130px, 1fr) minmax(100px, 1fr)
    auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid #edf0f5;
  min-height: 86px;
}
.member-row:last-child {
  border-bottom: 0;
}
.member-person {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.member-row > .pill {
  justify-self: start;
}
.table-empty {
  padding: 40px;
  text-align: center;
  color: #728096;
}
.qr-card {
  border: 1px solid #e0e6ef;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  background: #fff;
}
.qr-card h3 {
  margin: 12px 0 0;
}
.qr-card img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.qr-card p {
  font-size: 13px;
  margin: 4px 0;
}
#qr-status {
  text-align: center;
  color: #245be8;
  font-weight: 600;
}
.qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: white;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  color: #78879b;
}
.qr-placeholder img {
  width: 230px;
  height: 230px;
}
#login-qr-panel {
  text-align: center;
}
#auth-mode {
  display: block;
  margin: 16px auto 0;
}
#password-fields label {
  margin-bottom: 16px;
}
.connection-fields {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  line-height: 1.6;
  margin: 26px 0;
}
.connection-fields dt {
  font-weight: 600;
}
.connection-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #66748a;
}
#connection-view {
  max-width: 850px;
  margin-top: 28px;
}
#settings-view > .compact-tabs {
  margin-top: 24px;
}
#settings-view .settings-layout {
  align-items: start;
}
#settings-view:has([data-settings-tab="retrieval"].active) .settings-layout {
  grid-template-columns: 1fr;
}
#settings-view:has([data-settings-tab="retrieval"].active)
  .settings-layout
  > div {
  max-width: 650px;
  width: 100%;
}
.settings-save {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #f6f8fc;
  padding: 15px 0;
  border-top: 1px solid #e0e6ef;
}
body:has(#admin-tabs:not([hidden])) .project-picker {
  display: none;
}
@media (min-width: 901px) {
  main {
    padding-top: 24px;
  }
  .topbar {
    margin-bottom: 22px;
  }
}
@media (max-width: 900px) {
  .editor-card {
    height: calc(100dvh - 320px);
  }
  .member-row {
    grid-template-columns: 1fr 1fr;
  }
  .member-row .button-row {
    justify-content: flex-end;
  }
  .team-stats {
    gap: 10px;
  }
  .stat-card {
    padding: 15px;
  }
  .workspace-tabs {
    gap: 20px;
  }
  .connection-fields {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .connection-fields dd {
    margin-bottom: 15px;
  }
}
@media (max-width: 640px) {
  .editor-card {
    min-height: 440px;
    height: 65dvh;
  }
  #editor {
    padding: 20px;
  }
  .work-context {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .management-heading {
    align-items: flex-start;
  }
  .management-heading h2 {
    font-size: 18px;
  }
  .stat-card strong {
    font-size: 22px;
  }
  .stat-card {
    padding: 12px;
    font-size: 12px;
  }
  .member-row {
    padding: 16px;
    gap: 12px;
  }
  .workspace-tabs {
    margin-bottom: 12px;
  }
  .header-actions {
    flex-wrap: wrap;
  }
  .sidebar-bottom {
    display: block;
  }
  .sidebar nav #admin-nav {
    display: inline-flex;
  }
  .qr-card {
    padding: 14px;
  }
}
#invite-qr,
#login-qr-box {
  display: flex;
  justify-content: center;
  min-height: 350px;
  background: #fff;
}
#invite-qr iframe,
#login-qr-box iframe {
  display: block;
  width: 300px;
  max-width: 100%;
  height: 350px;
  border: 0;
}
#invite-qr, #login-qr-box { flex-direction:column; align-items:center; }
.scan-fallback { font-size:12px; padding:4px 8px 10px; }

.qr-result { text-align: center; padding: 12px 12px 4px; }
.qr-result-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: #e8f7ee; color: #218553; font-size: 34px; font-weight: 600; }
.qr-result-icon.is-ended { background: #fff4df; color: #94610b; }
.qr-result h3 { font-size: 22px; margin: 0 0 12px; }
.qr-result-person { font-weight: 600; margin-bottom: 12px; }
.qr-result .muted { line-height: 1.7; margin-bottom: 28px; }

select.enhanced-native-select { display: none !important; }
sl-select.app-select { display:block; width:100%; min-width:0; font:inherit;
  --sl-input-height-small:36px; --sl-input-font-size-small:13px;
  --sl-input-border-radius-small:8px; --sl-input-border-color:#d8e1ef;
  --sl-input-border-color-hover:#a0b4d4; --sl-input-border-color-focus:#245be8;
  --sl-focus-ring-color:#245be830; --sl-input-color:#344054;
  --sl-color-primary-600:#245be8; --sl-z-index-dropdown:1000;
}
sl-select.app-select::part(listbox) { padding:6px; border-radius:10px; box-shadow:0 12px 32px #182c4926; }
sl-select.app-select sl-option::part(base) { border-radius:6px; font-size:13px; }
sl-select.app-select sl-option::part(base):hover { background:#edf2ff; color:#245be8; }

sl-select.app-select::part(form-control-label) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

#project-form .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }
@media (max-width:480px) { #project-form .form-grid { grid-template-columns:1fr; } }

.settings-layout.models-list-layout { display:block; }
.models-list-layout > div:empty { display:none; }
.configured-model-row { display:flex; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.configured-model-row:last-child { border-bottom:0; }
.configured-model-info { display:grid; gap:6px; flex:1; min-width:0; overflow-wrap:anywhere; }
.model-config-dialog { width:min(620px,calc(100vw - 32px)); }
.model-config-dialog .settings-card { border:0; padding:0; box-shadow:none; }
.model-config-dialog .settings-card > h2 { display:none; }
#model-catalog > .section-heading { flex-wrap:wrap; gap:16px; }
.models-hidden { display:none !important; }

.project-list {display:grid;gap:16px;margin-top:24px}
.project-list-row {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;background:white;border:1px solid var(--border,#dce3ef);border-radius:14px}
.project-list-info h3 {margin:0 0 10px}.project-list-info p {margin:0}.project-list-info {min-width:0;overflow-wrap:anywhere}
.project-search {display:block;max-width:420px;margin-top:20px}
@media(max-width:700px){.project-list-row{align-items:flex-start;flex-direction:column}}

.workflow-guide{padding:20px 24px;margin-bottom:20px;border:1px solid #dce3ef;border-radius:14px;background:white}.workflow-guide h2{font-size:18px;margin:0}.workflow-guide .section-heading{flex-wrap:wrap;gap:16px}

.usage-filters{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:20px 0}.usage-filters label{margin:0}.usage-table-wrap{overflow:auto;background:white;border:1px solid #dce3ef;border-radius:12px}.usage-table{border-collapse:collapse;width:100%;text-align:left}.usage-table th,.usage-table td{padding:14px 16px;border-bottom:1px solid #edf0f5;white-space:nowrap}.usage-table th{background:#f7f9fd;color:#65728b}#usage-dialog{width:min(1100px,94vw)}

/* Dense management tables: one line per record, shared column alignment. */
.member-table { overflow-x: auto; border-radius: 6px; }
.admin-table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; table-layout: auto; }
.admin-table th, .admin-table td, .usage-table th, .usage-table td { padding: 7px 14px; height: 42px; box-sizing: border-box; line-height: 20px; font-size: 13px; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid #e9edf3; }
.admin-table th, .usage-table th { height: 36px; padding-top: 6px; padding-bottom: 6px; background: #f5f7fa; color: #65728b; font-weight: 600; }
.admin-table tbody tr:last-child td, .usage-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover, .usage-table tbody tr:hover { background: #f7faff; }
.admin-table th:last-child, .admin-table td:last-child { width: 180px; }
.admin-table button, .usage-table button { padding: 2px 7px; min-height: 26px; height: 26px; font-size: 12px; line-height: 20px; border-radius: 4px; margin-right: 6px; }
.admin-table .admin-table-empty { height: 64px; text-align: center; color: #728096; }

/* Usage totals stay on a compact strip rather than dashboard cards. */
.usage-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 10px 14px;
  margin: 12px 0;
  background: #fff;
  border: 1px solid #e0e6ef;
  border-radius: 6px;
}
.usage-summary-bar .stat-card {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  line-height: 24px;
}
.usage-summary-bar .stat-card strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.usage-summary-bar .stat-card > span { white-space: nowrap; }

/* One compact toolbar owns writing actions; no empty footer action drawer. */
#workspace .workflow-guide { padding: 10px 16px; margin-bottom: 10px; }
#workspace .workflow-guide p { margin: 3px 0; font-size: 12px; line-height: 20px; }
#workspace .workflow-guide h2 { font-size: 14px; line-height: 22px; }
#workflow-status:empty { display: none; }
#workspace .workspace-tabs { margin-bottom: 10px; }
#workspace .editor-card { min-height: 280px; }
#workspace .editor-toolbar { padding: 10px 16px; flex-wrap: wrap; gap: 8px 16px; }
#workspace .editor-meta { flex-wrap: wrap; gap: 8px; }
#workspace .editor-footer { padding: 6px 16px; min-height: 32px; }
.editor-more { position: relative; color: #344564; }
.editor-more summary { cursor: pointer; list-style: none; padding: 7px 12px; border: 1px solid #dce3ef; border-radius: 6px; font-size: 13px; background: white; }
.editor-more summary::-webkit-details-marker { display: none; }
.editor-more summary:focus-visible { outline: 2px solid #245be8; outline-offset: 2px; }
.editor-more-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px; padding: 5px; background: white; border: 1px solid #dce3ef; border-radius: 8px; box-shadow: 0 8px 24px #162c4c20; }
.editor-more-menu button { display: block; width: 100%; border: 0; background: transparent; text-align: left; padding: 8px 12px; border-radius: 4px; font-size: 13px; white-space: nowrap; }
.editor-more-menu button:hover { background: #eef3ff; color: #245be8; }
.editor-more-menu button[hidden] { display: none; }

#params-dialog { padding: 0; overflow: hidden; }
#params-dialog[open] { display: flex; flex-direction: column; }
#params-dialog .inspector { padding: 24px; overflow-y: auto; min-height: 0; }
#params-dialog .params-actions { margin: 0; padding: 14px 24px; border-top: 1px solid #e7ecf3; background: #fff; flex-shrink: 0; }
#params-dialog .params-actions button { min-width: 76px; }

.creation-steps { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #dce3ef; border-radius: 8px; background: white; overflow-x: auto; }
.creation-steps button { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 165px; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 8px 10px; text-align: left; color: #43516a; font-size: 13px; white-space: nowrap; }
.creation-steps small { display: block; font-size: 11px; color: #8591a4; line-height: 18px; font-weight: normal; }
.creation-steps .step-number { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; background: #edf1f7; border-radius: 50%; font-weight: 650; }
.creation-steps .step-state { font-size: 11px; margin-left: auto; color: #8591a4; }
.creation-steps .step-arrow { color: #aab4c4; font-size: 24px; }
.creation-steps button.current { border-color: #cad8ff; background: #eef3ff; color: #245be8; font-weight: 650; }
.creation-steps button.current .step-number { background: #245be8; color: white; }
.creation-steps button.saved:not(.current) .step-number { background: #e6f4ed; color: #23845b; }
.creation-steps button:disabled { opacity: .55; cursor: not-allowed; }
#workspace .workflow-guide { border: 0; border-radius: 0; background: transparent; padding: 2px 0 8px; margin-bottom: 4px; }
#workspace .workflow-guide .section-heading { margin-bottom: 0; }
@media (max-width: 1100px) { .creation-steps .step-state { display: none; } .creation-steps button { min-width: 140px; } }

.knowledge-dialog{width:min(620px,calc(100vw - 32px))}.knowledge-help p{line-height:1.65;margin:0 0 10px}.knowledge-file-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}#knowledge-file-name{overflow-wrap:anywhere}#knowledge-preview{font-size:13px;line-height:1.6;background:#f8faff;resize:vertical}.knowledge-dialog>.muted{font-size:12px;line-height:1.6}

.story-memory { margin: 0 0 18px; padding: 18px 20px; background: #fff; border: 1px solid #dce4f4; border-radius: 12px; }
.memory-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.memory-heading h2 { font-size: 16px; margin: 0 0 6px; }
.memory-heading p { margin: 0; font-size: 13px; }
.memory-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.memory-cards button { text-align: left; padding: 12px 14px; background: #f7f9fe; border: 1px solid #e1e7f2; border-radius: 8px; min-width: 0; color: #354665; }
.memory-cards button:hover { border-color: #2856ee; }
.memory-cards strong { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.memory-cards strong span { font-size: 12px; color: #2856ee; font-weight: 400; }
.memory-cards small { display: block; margin-top: 7px; color: #71809b; }
.memory-cards p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 800px) { .memory-cards { grid-template-columns: 1fr; } .memory-heading { align-items: flex-start; flex-direction: column; } }

.genre-field { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #425373; }
.genre-value { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.genre-picker { position: relative; }
.genre-picker > summary { cursor: pointer; list-style: none; border: 1px solid #d6dfef; border-radius: 8px; background: white; padding: 10px 30px 10px 12px; min-height: 38px; overflow-wrap: anywhere; }
.genre-picker > summary::-webkit-details-marker { display: none; }
.genre-picker > summary::after { content: '⌄'; position: absolute; right: 12px; top: 9px; }
.genre-picker[open] > summary { border-color: #2856ee; }
.genre-picker > summary:focus-visible, .genre-popup button:focus-visible { outline: 2px solid #2856ee; outline-offset: 2px; }
.genre-popup { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); width: min(480px, 78vw); display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #dce4f4; border-radius: 8px; background: white; box-shadow: 0 8px 24px #263b6426; overflow: hidden; }
.genre-categories, .genre-subjects { max-height: 252px; overflow-y: auto; padding: 6px; }
.genre-categories { border-right: 1px solid #e1e7f2; }
.genre-popup button { display: block; width: 100%; text-align: left; border: 0; background: white; color: #354665; padding: 9px 12px; border-radius: 4px; }
.genre-popup button:hover { background: #f1f5ff; }
.genre-popup button[aria-pressed="true"] { background: #eaf0ff; color: #2454ef; }
.genre-note { grid-column: 1 / -1; margin: 0; padding: 8px 12px; font-size: 12px; color: #71809b; border-top: 1px solid #e1e7f2; }

#params-dialog .genre-popup { left: 0; right: auto; }

/* Generation progress: compact workspace status and detailed task inspector. */
.task-inline { display:flex; align-items:center; gap:14px; padding:16px 18px; margin:16px 0 20px; border:1px solid #dce5fb; border-radius:12px; background:linear-gradient(100deg,#eef3ff,#fff); }
.task-orbit { display:grid; place-items:center; flex:0 0 40px; height:40px; border-radius:12px; background:#e0e9ff; color:#2856ee; font-size:23px; }
.task-inline-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.task-inline-copy strong { font-size:14px; color:#26395d; }
.task-inline-copy > span { color:#73809a; font-size:12px; line-height:1.5; }
.task-inline[data-status="completed"] { background:#f0faf5; border-color:#d4ecdf; }
.task-inline[data-status="failed"] { background:#fff5f3; border-color:#f3d7d2; }
#tasks-dialog.generation-dialog { width:min(820px,calc(100vw - 32px)); padding:26px; max-height:calc(100dvh - 48px); overflow-y:auto; }
.task-eyebrow { display:block; color:#8190a9; font-size:11px; margin-bottom:8px; letter-spacing:1px; }
.generation-dialog .dialog-heading { align-items:flex-start; margin-bottom:22px; }
.generation-dialog .dialog-heading h2 { margin:0; font-size:22px; }
.task-hero { padding:20px 22px; background:linear-gradient(120deg,#f0f4ff,#f9fbff); border:1px solid #e0e8fb; border-radius:12px; }
.generation-dialog .task-title h2 { font-size:15px; margin:0; }
#task-current { margin:14px 0 20px; font-size:18px; font-weight:600; color:#26395d; line-height:1.5; }
.task-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }
.task-metrics > div { display:flex; flex-direction:column; gap:8px; }
.task-metrics span { font-size:12px; color:#7d8aa1; }
.task-metrics strong { font-size:17px; color:#334562; font-variant-numeric:tabular-nums; }
#task-progress-bar { display:block; appearance:auto; width:100%; height:7px; accent-color:#2856ee; border:0; border-radius:5px; overflow:hidden; }
#task-progress-note { font-size:11px; margin:10px 0 0; line-height:1.6; }
.task-stages { list-style:none; margin:18px 0 22px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.task-stages li { padding:12px; display:grid; grid-template-columns:26px 1fr; gap:3px 9px; border:1px solid #e4e9f2; border-radius:8px; }
.stage-number { grid-row:span 2; height:25px; display:grid; place-items:center; background:#f0f3f8; color:#94a0b4; border-radius:50%; font-size:12px; }
.task-stages strong { font-size:12px; color:#60708a; }
.task-stages small { font-size:11px; color:#95a0b2; }
.task-stages .current { background:#f0f4ff; border-color:#b8cafb; }
.task-stages .current .stage-number { background:#2856ee; color:white; }
.task-stages .done .stage-number { background:#e0f3e9; color:#20835c; }
.task-stages .stopped { border-color:#f0c9c2; }
.task-log-heading { display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; }
.task-log-heading h3 { margin:0; font-size:14px; }
.task-log-heading > span { font-size:11px; }
#tasks-dialog #task-log { max-height:180px; min-height:70px; padding:10px 14px; border:1px solid #e6ebf3; border-radius:8px; background:#fafbfd; white-space:normal; }
.task-log-row { display:grid; grid-template-columns:64px 1fr; gap:12px; padding:6px 0; font-size:12px; line-height:1.7; }
.task-log-row time { color:#96a0b2; font-variant-numeric:tabular-nums; }
.task-log-row > span { white-space:pre-wrap; overflow-wrap:anywhere; color:#586982; }
.task-dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid #e8edf5; padding-top:16px; margin-top:20px; }
.task-dialog-footer > p { font-size:11px; line-height:1.6; max-width:330px; margin:0; }
@media (max-width:600px) { .task-inline { flex-wrap:wrap; } .task-inline > button { margin-left:54px; } #tasks-dialog.generation-dialog { padding:18px; } .task-stages { grid-template-columns:repeat(2,1fr); } .task-hero { padding:16px; } .task-metrics { gap:8px; } .task-metrics strong { font-size:14px; } .task-dialog-footer { flex-direction:column; align-items:flex-start; } }

/* The manuscript owns the main column; reference material never precedes it. */
#workspace.writer-layout .writing-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:start; gap:18px; }
#workspace.writer-layout .editor-card { min-width:0; min-height:560px; }
#workspace.writer-layout #story-memory { margin:0; padding:16px; max-height:75dvh; overflow-y:auto; }
.writer-layout .memory-heading { flex-direction:column; align-items:stretch; gap:12px; }
.writer-layout .memory-heading p { font-size:12px; line-height:1.7; }
.writer-layout .memory-cards { grid-template-columns:1fr; }
.writer-layout .memory-cards strong { flex-direction:column; gap:5px; }
.writer-layout .memory-cards p { -webkit-line-clamp:4; }
.writer-layout .creation-steps { padding:5px 8px; margin-bottom:8px; }
.writer-layout .creation-steps button { min-width:120px; padding:5px 8px; }
.writer-layout .creation-steps small, .writer-layout .creation-steps .step-state { display:none; }
#workspace.writer-layout .workflow-guide { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 20px; padding:4px 0 10px; margin-bottom:0; }
.writer-layout #workflow-status:empty { display:none; }
.writer-layout #workflow-status:not(:empty) { grid-column:1; margin:0; font-size:12px; }
.writer-layout #task-inline { grid-column:2; grid-row:1 / span 2; margin:0; padding:8px 10px; gap:10px; }
.writer-layout .task-orbit { display:none; }
.writer-layout .task-inline-copy strong { font-size:12px; }
.writer-layout .task-inline-copy > span { font-size:11px; }
.writer-layout #editor { padding:28px clamp(24px,4vw,68px); font-size:18px; line-height:1.95; min-height:360px; }
.writer-layout .editor-toolbar { flex-wrap:wrap; gap:10px; padding:12px 16px; }
.writer-layout .editor-meta { flex-wrap:wrap; gap:8px; }
.writer-layout .editor-heading { flex-wrap:wrap; gap:8px; }
.writer-layout .chapter-strip { padding:7px 16px; }
@media (max-width:1200px) {
  #workspace.writer-layout .writing-grid { grid-template-columns:minmax(0,1fr); }
  #workspace.writer-layout #story-memory { max-height:none; }
  .writer-layout .memory-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .writer-layout .memory-heading { flex-direction:row; align-items:center; }
}
@media (max-width:900px) {
  #workspace.writer-layout .workflow-guide { grid-template-columns:minmax(0,1fr); }
  .writer-layout #task-inline { grid-column:1; grid-row:auto; }
}
@media (max-width:600px) {
  .writer-layout .memory-cards { grid-template-columns:1fr; }
  .writer-layout .memory-heading { flex-direction:column; align-items:stretch; }
  .writer-layout #editor { padding:22px; font-size:17px; }
}
body.writing-focus { overflow:hidden; }
body.writing-focus > aside, body.writing-focus main > .topbar,
body.writing-focus #workspace > .creation-steps, body.writing-focus #workspace > .workflow-guide,
body.writing-focus #story-memory, body.writing-focus #dependency-warning { display:none !important; }
body.writing-focus #workspace .editor-card { position:fixed; inset:16px; z-index:50; width:auto; height:auto !important; min-height:0; margin:0; box-shadow:0 10px 50px #263b6420; }
body.writing-focus #editor { min-height:0; padding:32px max(28px,calc((100% - 850px)/2)); line-height:2; }
@media (max-width:600px) { body.writing-focus #workspace .editor-card { inset:6px; } body.writing-focus #editor { padding:20px; } }

/* Memory cards must wrap inside the narrow reference column. */
#story-memory, #story-memory .memory-heading, #story-memory .memory-heading > div,
#story-memory .memory-cards, #story-memory .memory-cards > button { min-width:0; max-width:100%; box-sizing:border-box; }
#story-memory .memory-cards > button { width:100%; white-space:normal; overflow-wrap:anywhere; word-break:normal; }
#story-memory .memory-cards small { white-space:normal; overflow-wrap:anywhere; font-size:12px; line-height:1.65; }
#story-memory .memory-cards p { white-space:pre-line; overflow-wrap:anywhere; word-break:normal; line-height:1.75; margin-top:10px; }
#story-memory .memory-cards strong { white-space:normal; overflow-wrap:anywhere; }
#story-memory .memory-heading h2 { display:flex; flex-wrap:wrap; align-items:center; gap:6px; line-height:1.5; }
#story-memory #memory-status { white-space:normal; overflow-wrap:anywhere; }
#story-memory #rebuild-memory { white-space:normal; height:auto; line-height:1.5; }
#story-memory #memory-characters { border-top:1px solid #e4eaf5; padding-top:8px; }

#role-review-dialog { width:min(900px,calc(100vw - 32px)); max-height:90dvh; }
#role-review-dialog .dialog-heading p { margin:6px 0 0; font-size:13px; }
#role-review-list { display:grid; gap:16px; margin-top:18px; }
.role-candidate { padding:18px; border:1px solid #dce4f4; border-radius:10px; background:#f8faff; }
.role-candidate-select { display:flex; flex-direction:row; align-items:center; gap:10px; margin-bottom:14px; }
.role-candidate-select input { width:18px; height:18px; }
.role-candidate-text { grid-column:1 / -1; }
.role-candidate textarea { font-size:14px; line-height:1.8; }
.role-candidate > .muted { font-size:12px; }
.role-saved { color:#25835b; font-size:13px; margin-bottom:0; }
.role-review-footer { display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:-28px; padding:16px 0; background:white; border-top:1px solid #e4eaf4; }
#roles-grid > .muted { grid-column:1 / -1; line-height:1.8; }

#full-book-dialog { width:min(600px,calc(100vw - 32px)); }
.full-book-budget { padding:16px; background:#eef3ff; border-radius:10px; color:#2856ee; font-weight:600; line-height:1.7; }
#full-book-dialog p { line-height:1.8; }
#full-book-dialog .muted { font-size:13px; }
.full-book-option { display:flex; align-items:center; gap:10px; margin:20px 0; }
.full-book-option input { width:18px; height:18px; }
#full-book-form .button-row { justify-content:flex-end; }

/* Connection feedback stays alongside the configuration being tested. */
.connection-status { display:flex; gap:14px; margin:16px 0; padding:18px; border:1px solid #cbd8ff; border-radius:12px; background:#f2f6ff; color:#29477c; }
.connection-status[hidden] { display:none; }
.connection-status-body { min-width:0; }
.connection-status-body strong { font-size:15px; }
.connection-status-body p { margin:6px 0 10px; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.connection-status-body small { font-size:12px; opacity:.8; font-variant-numeric:tabular-nums; }
.connection-status-icon { flex:0 0 26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#dce7ff; font-weight:700; }
.connection-status[data-state="loading"] .connection-status-icon { box-sizing:border-box; background:transparent; border:3px solid #d4dffc; border-top-color:#2855ed; animation:connection-spin .85s linear infinite; }
.connection-status[data-state="success"] { background:#effaf5; border-color:#bce5d0; color:#206b4d; }
.connection-status[data-state="success"] .connection-status-icon { background:#d6f0e2; }
.connection-status[data-state="error"] { background:#fff4f3; border-color:#f0ceca; color:#9c3439; }
.connection-status[data-state="error"] .connection-status-icon { background:#f9dedc; }
@keyframes connection-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .connection-status[data-state="loading"] .connection-status-icon { animation:none; } }

.account-selector { max-width:520px; }
.account-selector > p { color:#65748b; line-height:1.7; }
.account-selector form { display:grid; gap:12px; margin:24px 0; }
.account-choice { display:grid; grid-template-columns:1fr auto; gap:8px 16px; text-align:left; padding:18px; border:1px solid #d8e1f3; border-radius:12px; background:#f8faff; color:#243451; }
.account-choice strong { overflow-wrap:anywhere; }
.account-choice span { grid-column:1; font-size:13px; color:#65748b; }
.account-choice b { grid-column:2; grid-row:1 / 3; align-self:center; color:#2855ed; font-size:13px; }
.account-choice:hover,.account-choice:focus-visible { border-color:#2855ed; background:#edf3ff; }