/* X1 paints its own environment without changing the accepted stage layout. */
.x1-demo { background: radial-gradient(ellipse at 16% 0%, #153c61, transparent 48%), linear-gradient(135deg, #061325, #0b152d 65%, #061321); }
.x1-demo .brand-mark { display: grid; place-items: center; background: linear-gradient(135deg, #1ab8e8, #285ab4); color: #effaff; font-weight: 800; box-shadow: inset 0 1px #ffffff3b, 0 0 24px #17a7e726; }
.x1-demo .brand-copy { width: auto; }
.x1-demo .brand .eyebrow, .x1-demo .brand-copy h1 { text-align: left; text-align-last: auto; letter-spacing: .035em; }
.x1-demo .brand .eyebrow { color: #f0f7ff; text-shadow: 0 0 22px #43b0f03d; }
.x1-demo .stage-card { border-color: #79caff38; box-shadow: 0 14px 60px #00091f5c, inset 0 1px #a2d9ff12; }
.x1-demo .avatar-panel::before {
  /* Paint only: inherited geometry, layout, platform and canvas stay intact. */
  background-image: url('/assets/x1/background/xiaozhi-tech-stage-v1.png');
  background-size: cover;
  background-position: center;
  filter: none;
}
.x1-demo .avatar-panel::after {
  background:
    linear-gradient(90deg, #03132908 0%, #03132908 39%, #020d2666 58%, #020d268c 100%),
    linear-gradient(0deg, #020a1b3d, transparent 25%, transparent 80%, #020a1b26);
}
.x1-demo .chat-panel {
  border-color: #8bcfff45;
  background: linear-gradient(145deg, #06182bd9, #061227e0);
  box-shadow: 0 20px 60px #01091e4d, inset 0 1px #b5e8ff1c;
}
.x1-demo .answer-bubble { border-color: #8bcfff2e; background: #0b284a6b; }
.x1-demo .composer { border-color: #62cfff40; background: #020c1fd9; }
.x1-demo .suggestions button { border-color: #77cfff33; background: #0a244364; }
.x1-demo .status-pill { box-shadow: inset 0 1px #85f3e814, 0 0 22px #00c9c00a; }
.x1-demo .send-button { background: linear-gradient(135deg, #16b9ec, #087be1); box-shadow: 0 0 18px #08a3ed26; }
.x1-demo .scene-vignette {
  background: linear-gradient(to top, #02091b47, transparent 24%);
  box-shadow: inset 0 0 70px #01071638;
}
.x1-admin .eyebrow { color: #30719a; }
.x1-admin .login-description a { color: #95e5ff; }
@media (max-width: 700px) {
  .x1-demo .avatar-panel::before { background-position: 29% center; }
  .x1-demo .chat-panel { background: linear-gradient(145deg, #06182be6, #061227ed); }
}

/* Demo-local editor styles do not affect the stage or character. */
.x1-admin .proper-terms-card { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.x1-admin .proper-terms-heading, .x1-admin .proper-terms-row-head, .x1-admin .proper-terms-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.x1-admin .proper-terms-heading h2 { margin: 0; font-size: 20px; }
.x1-admin .proper-terms-actions { justify-content: flex-start; margin-top: 18px; }
.x1-admin .proper-terms-rows { display: grid; gap: 14px; }
.x1-admin .proper-terms-row { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #071d32; }
.x1-admin .proper-terms-row-head { margin-bottom: 14px; }
.x1-admin .proper-terms-row-head h3 { margin: 0; color: #e7f8ff; font-size: 15px; }
.x1-admin .proper-terms-switch { display: inline-flex; align-items: center; gap: 8px; color: #bad7e4; }
.x1-admin .proper-terms-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; }
.x1-admin .proper-terms-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; margin-top: 16px; }
.x1-admin .proper-terms-options .proper-terms-switch { align-self: center; line-height: 1.7; }
.x1-admin .proper-terms-card label:not(.proper-terms-switch) { display: grid; gap: 8px; min-width: 0; color: #c0dce7; font-size: 13px; }
.x1-admin .proper-terms-card input:not([type=checkbox]), .x1-admin .proper-terms-card textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: #f2fbff; background: #061b2d; font: inherit; line-height: 1.7; }
.x1-admin .proper-terms-card textarea { resize: vertical; }
.x1-admin .proper-terms-card input:focus-visible, .x1-admin .proper-terms-card textarea:focus-visible, .x1-admin .proper-terms-card button:focus-visible { outline: 2px solid #55dbff; outline-offset: 2px; }
.x1-admin .proper-terms-preview { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.x1-admin .proper-terms-preview h3 { margin-top: 0; }
.x1-admin #previewProperTerms { margin-top: 12px; }
.x1-admin #properTermsPreviewResult { white-space: pre-wrap; overflow-wrap: anywhere; }
.x1-admin .proper-terms-import { margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.x1-admin .proper-terms-import h3 { margin: 0 0 12px; }
.x1-admin .proper-terms-import-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.x1-admin .proper-terms-import-controls label { flex: 1 1 260px; }
.x1-admin .proper-terms-import input[type=file] { max-width: 100%; }
.x1-admin #properTermsImportWarnings { padding-left: 22px; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 700px) {
  .x1-admin .proper-terms-card { padding: 18px 14px; }
  .x1-admin .proper-terms-row { padding: 14px; }
  .x1-admin .proper-terms-fields { grid-template-columns: minmax(0, 1fr); }
  .x1-admin .proper-terms-options { grid-template-columns: minmax(0, 1fr); }
  .x1-admin .proper-terms-import { padding: 14px; }
}