:root {
  color: #f8efe4;
  background: #17120f;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji",
    sans-serif;
}

:root:has(.cinema-shell[data-font-size="small"]),
:root:has(.cottage-chat-shell[data-font-size="small"]) {
  font-size: 14px;
}

:root:has(.cinema-shell[data-font-size="standard"]),
:root:has(.cottage-chat-shell[data-font-size="standard"]) {
  font-size: 16px;
}

:root:has(.cinema-shell[data-font-size="large"]),
:root:has(.cottage-chat-shell[data-font-size="large"]) {
  font-size: 17.5px;
}

* {
  box-sizing: border-box;
}

@media (pointer: fine) {
  html,
  body,
  #root {
    cursor: url("/cottage/cursors/paper-plane.svg") 4 4, auto !important;
  }

  button:not(:disabled),
  a[href],
  summary,
  [role="button"]:not([aria-disabled="true"]),
  [data-sfx],
  label[for],
  select,
  input[type="button"],
  input[type="checkbox"],
  input[type="color"],
  input[type="file"],
  input[type="range"],
  input[type="radio"],
  input[type="submit"],
  .cursor-pointer {
    cursor: url("/cottage/cursors/paper-plane-pointer.svg") 4 4, pointer !important;
  }

  .cursor-default {
    cursor: url("/cottage/cursors/paper-plane.svg") 4 4, default !important;
  }

  input,
  textarea,
  [contenteditable="true"] {
    cursor: text !important;
  }
}

body {
  min-width: 320px;
  margin: 0;
  background-color: #17120f;
  overflow-x: hidden;
}

* {
  scrollbar-width: none;
  scrollbar-color:
    color-mix(in srgb, var(--kx-muted, #8f7a62) 12%, transparent)
    transparent;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-muted, #8f7a62) 12%, transparent);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--kx-primary, #dcbda8) 22%, transparent);
  background-clip: padding-box;
}

body::before {
  display: none;
}

.app-switcher {
  position: fixed;
  right: 18px;
  top: 14px;
  z-index: 80;
  display: flex;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 999px;
  background: rgba(83, 53, 38, 0.34);
  padding: 5px;
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: 0 14px 34px rgba(44, 27, 18, 0.18);
}

.app-switcher button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.64);
  background: transparent;
  padding: 0 13px;
  font-size: 0.78rem;
}

.app-switcher button:hover,
.app-switcher button.active {
  color: #fff7ec;
  background: rgba(255, 244, 226, 0.14);
}

.cottage-route-switcher {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 226, 187, 0.16);
  background: linear-gradient(180deg, rgba(38, 28, 22, 0.9), rgba(30, 22, 18, 0.72));
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  backdrop-filter: blur(18px) saturate(1.12);
  box-shadow: none;
}

.cottage-route-switcher button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.66);
  background: transparent;
  padding: 0 13px;
  white-space: nowrap;
  font-size: 0.82rem;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.cottage-route-switcher button svg {
  width: 20px;
  height: 20px;
}

.cottage-route-switcher button:hover,
.cottage-route-switcher button.active {
  border-color: rgba(255, 226, 187, 0.14);
  color: #fff8ee;
  background: rgba(255, 244, 226, 0.11);
}

.cottage-install-banner {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 120;
  display: flex;
  width: min(430px, calc(100vw - 28px));
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 8px;
  color: rgba(255, 248, 238, 0.88);
  background:
    linear-gradient(135deg, rgba(35, 26, 20, 0.92), rgba(19, 15, 12, 0.86)),
    radial-gradient(circle at 12% 0%, rgba(220, 189, 168, 0.16), transparent 38%);
  padding: 12px 12px 12px 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px) saturate(1.08);
}

.cottage-install-banner > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.cottage-install-banner strong {
  color: #fff8ee;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.cottage-install-banner span {
  color: rgba(255, 248, 238, 0.62);
  font-size: 0.72rem;
  line-height: 1.45;
}

.cottage-install-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.cottage-install-actions button {
  min-height: 30px;
  border: 1px solid rgba(255, 226, 187, 0.2);
  border-radius: 999px;
  color: #fff8ee;
  background: rgba(220, 189, 168, 0.14);
  padding: 0 11px;
  font-size: 0.72rem;
}

.cottage-install-actions button:hover {
  border-color: rgba(255, 226, 187, 0.34);
  background: rgba(220, 189, 168, 0.22);
}

.cottage-install-banner[data-theme="white-gold"] {
  border-color: rgba(149, 115, 63, 0.18);
  color: #463729;
  background:
    linear-gradient(135deg, rgba(255, 253, 247, 0.94), rgba(248, 242, 231, 0.86)),
    radial-gradient(circle at 12% 0%, rgba(181, 152, 105, 0.15), transparent 38%);
}

.cottage-install-banner[data-theme="white-gold"] strong {
  color: #463729;
}

.cottage-install-banner[data-theme="white-gold"] span {
  color: rgba(70, 55, 41, 0.62);
}

.cottage-install-banner[data-theme="white-gold"] .cottage-install-actions button {
  border-color: rgba(149, 115, 63, 0.2);
  color: #463729;
  background: rgba(181, 152, 105, 0.16);
}

@media (max-width: 520px) {
  .cottage-install-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .cottage-install-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.cottage-route-switcher[data-theme="white-gold"] {
  border-color: rgba(149, 115, 63, 0.16);
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(246, 239, 226, 0.72));
  box-shadow: none;
}

.cottage-route-switcher[data-theme="white-gold"] button {
  border-color: rgba(149, 115, 63, 0.12);
  color: rgba(70, 55, 41, 0.68);
  background: rgba(255, 255, 255, 0.42);
}

.cottage-route-switcher[data-theme="white-gold"] button:hover,
.cottage-route-switcher[data-theme="white-gold"] button.active {
  border-color: rgba(149, 115, 63, 0.28);
  color: #463729;
  background: rgba(221, 196, 151, 0.26);
}

.cottage-route-switcher[data-theme="pink-mocha"] {
  border-color: rgba(226, 218, 220, 0.14);
  background: linear-gradient(180deg, rgba(73, 55, 52, 0.9), rgba(51, 40, 35, 0.72));
}

.cottage-route-switcher[data-theme="pink-mocha"] button {
  border-color: rgba(226, 218, 220, 0.1);
  color: rgba(249, 236, 232, 0.68);
  background: rgba(255, 255, 255, 0.045);
}

.cottage-route-switcher[data-theme="pink-mocha"] button:hover,
.cottage-route-switcher[data-theme="pink-mocha"] button.active {
  border-color: rgba(226, 218, 220, 0.24);
  color: #fff7f3;
  background: rgba(181, 140, 140, 0.18);
}

button,
textarea,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cinema-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 14px 0 28px;
}

.room-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #17120f;
}

.room-background img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.room-background img.room-background-layer {
  transition: opacity 1600ms ease-in-out;
}

.room-background-fill {
  z-index: 0;
  object-fit: cover;
  opacity: 0;
  filter: blur(24px) saturate(1.08);
  transform: scale(1.1);
}

.room-background-main {
  z-index: 1;
  object-fit: cover;
}

.room-background img.room-background-layer.is-visible {
  opacity: 1;
}

.room-background img.room-background-layer.is-hidden {
  opacity: 0;
}

.room-background.fit-cover .room-background-fill {
  opacity: 0;
}

.room-background.fit-cover .room-background-main {
  object-fit: cover;
}

.room-background.fit-stage .room-background-main,
.room-background.fit-contain .room-background-main {
  object-fit: contain;
}

.room-background.fit-stage .room-background-fill,
.room-background.fit-contain .room-background-fill {
  opacity: 0.72;
}

.room-background.fit-stage img.room-background-fill.room-background-layer.is-visible,
.room-background.fit-contain img.room-background-fill.room-background-layer.is-visible {
  opacity: 0.72;
}

.room-background.fit-stage .room-background-fill {
  filter: blur(30px) saturate(1.14) brightness(0.92);
  transform: scale(1.16);
}

.room-background.fit-stage img.room-background-fill.room-background-layer.is-visible {
  opacity: 0.9;
}

.room-background.fit-stage::after {
  background:
    linear-gradient(90deg, rgba(17, 10, 7, 0.18), transparent 18%, transparent 82%, rgba(17, 10, 7, 0.18)),
    linear-gradient(180deg, rgba(17, 10, 7, 0.04), rgba(17, 10, 7, 0.13)),
    radial-gradient(circle at 50% 30%, rgba(255, 231, 190, 0.07), transparent 28%);
}

.room-background.fit-contain .room-background-fill,
.room-background.fit-contain img.room-background-fill.room-background-layer.is-visible {
  opacity: 0.08;
}

.room-background::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(17, 10, 7, 0.04), rgba(17, 10, 7, 0.16)),
    radial-gradient(circle at 50% 30%, rgba(255, 231, 190, 0.08), transparent 26%);
  pointer-events: none;
}

.cinema-light-veil {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #090706;
  animation: cinemaLightVeil 1600ms ease-in-out forwards;
}

.cinema-light-map {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: max(100vw, calc(100vh * 0.5625));
  height: max(100vh, calc(100vw * 1.7777778));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.cinema-light-map.contain {
  width: min(100vw, calc(100vh * 0.5625));
  height: min(100vh, calc(100vw * 1.7777778));
}

.cinema-light-hotspot {
  position: absolute;
  left: 10%;
  top: 43%;
  width: 25%;
  height: 41%;
  border: 0;
  border-radius: 28px;
  background: transparent;
  pointer-events: auto;
}

.cinema-light-marker {
  position: absolute;
  left: 30%;
  top: calc(30% - 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) translateY(3px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.cinema-light-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 237, 208, 0.44);
  border-radius: 999px;
  color: rgba(255, 248, 236, 0.96);
  background: rgba(255, 230, 192, 0.19);
  box-shadow: 0 0 25px rgba(255, 217, 163, 0.25);
  backdrop-filter: blur(5px);
}

.cinema-light-label {
  width: max-content;
  border: 1px solid rgba(255, 237, 208, 0.26);
  border-radius: 999px;
  padding: 5px 12px;
  color: rgba(255, 247, 234, 0.94);
  background: rgba(44, 29, 20, 0.52);
  font-size: 0.76rem;
  line-height: 1.2;
  backdrop-filter: blur(6px);
}

.cinema-light-hotspot:hover .cinema-light-marker,
.cinema-light-hotspot:focus-visible .cinema-light-marker {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

.cinema-light-hotspot:focus-visible {
  outline: 1px solid rgba(255, 232, 194, 0.45);
  outline-offset: -2px;
}

@keyframes cinemaLightVeil {
  0% {
    opacity: 0;
  }
  46%,
  54% {
    opacity: 0.38;
  }
  100% {
    opacity: 0;
  }
}

.cinema-shell[data-font="soft"],
.cottage-chat-shell[data-font="soft"] {
  font-family: "Songti SC", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;
}

.cinema-shell[data-font-size="small"] {
  font-size: 1rem;
}

.cinema-shell[data-font-size="standard"] {
  font-size: 1rem;
}

.cinema-shell[data-font-size="large"] {
  font-size: 1rem;
}

.cinema-shell[data-theme="white-gold"] {
  color: #463729;
}

.cinema-shell[data-theme="white-gold"] .cinema-header,
.cinema-shell[data-theme="white-gold"] .settings-route-header,
.cinema-shell[data-theme="white-gold"] .settings-route-shell .ghost-panel,
.cinema-shell[data-theme="white-gold"] .settings-page-card {
  color: #463729;
  background: linear-gradient(135deg, rgba(255, 253, 247, 0.82), rgba(239, 211, 168, 0.26));
}

.cinema-shell[data-theme="pink-mocha"] .cinema-header,
.cinema-shell[data-theme="pink-mocha"] .settings-route-header,
.cinema-shell[data-theme="pink-mocha"] .settings-route-shell .ghost-panel,
.cinema-shell[data-theme="pink-mocha"] .settings-page-card {
  color: #e2dadc;
  background: linear-gradient(135deg, rgba(49, 42, 33, 0.82), rgba(181, 140, 140, 0.2));
}

.cinema-shell[data-theme="white-gold"] .room-side-entry button,
.cinema-shell[data-theme="white-gold"] .settings-section,
.cinema-shell[data-theme="white-gold"] .settings-route-mark {
  border-color: rgba(149, 115, 63, 0.22);
  color: #463729;
  background: rgba(255, 255, 255, 0.52);
}

.cinema-shell[data-theme="white-gold"] .settings-section-copy strong,
.cinema-shell[data-theme="white-gold"] .settings-route-header h1,
.cinema-shell[data-theme="white-gold"] .theme-orb-row button,
.cinema-shell[data-theme="white-gold"] .settings-switch,
.cinema-shell[data-theme="white-gold"] .settings-grid label {
  color: #463729;
}

.cinema-shell[data-theme="white-gold"] .settings-section-copy small,
.cinema-shell[data-theme="white-gold"] .settings-route-header h1 span,
.cinema-shell[data-theme="white-gold"] .settings-route-header p,
.cinema-shell[data-theme="white-gold"] .settings-hint,
.cinema-shell[data-theme="white-gold"] .settings-footer {
  color: rgba(70, 55, 41, 0.62);
}

.cinema-shell[data-theme="pink-mocha"] .room-side-entry button {
  color: #e2dadc;
  background: rgba(49, 42, 33, 0.58);
}

.cinema-shell.labels-hidden .glass-action span,
.cinema-shell.labels-hidden .talk-launcher span,
.cinema-shell.labels-hidden .subtitle-pill span,
.cinema-shell.labels-hidden .web-assist-button span {
  display: none;
}

.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: default;
}

.panel-backdrop.is-closing {
  pointer-events: none;
}

.cinema-header {
  position: fixed;
  left: 18px;
  top: 72px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  max-width: min(360px, calc(100vw - 120px));
  margin-bottom: 0;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 244, 226, 0.06)),
    rgba(18, 13, 16, 0.24);
  backdrop-filter: blur(16px) saturate(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 24px rgba(28, 18, 15, 0.12);
}

.cinema-header h1 {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  line-height: 1;
  letter-spacing: 0;
}

.cinema-header h1 span {
  display: block;
  color: rgba(248, 239, 228, 0.68);
  font-size: 0.68rem;
  font-weight: 500;
  margin-top: 3px;
}

.cinema-header-logo {
  width: 15px;
  height: 15px;
  color: currentColor;
  filter: drop-shadow(0 0 8px rgba(255, 244, 226, 0.2));
}

.eyebrow,
.muted {
  margin: 0;
  color: rgba(248, 239, 228, 0.68);
  font-size: 0.82rem;
}

.header-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.36);
  border-radius: 999px;
  background: rgba(255, 244, 226, 0.1);
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.cinema-header .header-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.header-settings {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.26);
  border-radius: 999px;
  color: #fff4e4;
  background: rgba(255, 244, 226, 0.08);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.header-settings:hover,
.header-settings.active {
  transform: translateY(-1px);
  border-color: rgba(255, 226, 187, 0.48);
  background: rgba(255, 210, 151, 0.18);
}

.room-side-entry {
  position: fixed;
  right: max(18px, calc((100vw - 1480px) / 2 + 18px));
  top: 14px;
  z-index: 48;
  display: flex;
  gap: 8px;
  transform: none;
}

.room-side-entry button {
  display: grid;
  position: relative;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.22);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.86);
  background: rgba(102, 66, 47, 0.42);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: 0 16px 38px rgba(35, 21, 14, 0.2);
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.room-side-entry button:hover {
  border-color: rgba(255, 226, 187, 0.4);
  color: #fff8ef;
  background: rgba(255, 244, 226, 0.18);
  transform: translateY(-1px);
}

.room-side-entry span {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 120px;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.82);
  background: rgba(54, 34, 24, 0.74);
  padding: 6px 10px;
  font-size: 0.72rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.room-side-entry button:hover span {
  opacity: 1;
  transform: translateY(0);
}

.workspace {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  /* Main screen knob: top = vertical position, width = projector size. */
  top: clamp(118px, 13vh, 198px);
  z-index: 12;
  width: clamp(480px, 64vw, 760px);
  margin: 0 auto;
  align-items: start;
}

.visually-hidden-file {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.player-column,
.companion-column,
.lower-grid {
  min-width: 0;
}

.projector-area {
  position: relative;
}

.projector-area.player-floating::before {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  content: "";
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.tool-button,
.primary-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.24);
  border-radius: 8px;
  color: #fff4e4;
  background: rgba(255, 244, 226, 0.1);
  padding: 0 14px;
}

.tool-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.screen-controls {
  /* Button row knob: margin-top moves the controls below the screen. */
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: min(860px, 100%);
  margin: 12px auto 0;
  padding: 5px 7px;
  border: 1px solid rgba(255, 244, 226, 0.28);
  border-radius: 999px;
  background: rgba(255, 244, 226, 0.1);
  backdrop-filter: blur(10px) saturate(1.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.control-panel-slot {
  position: relative;
  z-index: 34;
  width: min(520px, calc(100vw - 44px));
  margin: 0 auto;
}

.icon-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 244, 226, 0.28);
  border-radius: 999px;
  color: #fff4e4;
  background: rgba(255, 244, 226, 0.12);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.icon-button:hover,
.icon-button.active {
  transform: translateY(-1px);
  border-color: rgba(255, 226, 187, 0.5);
  background: rgba(255, 210, 151, 0.22);
}

.icon-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.watch-prompt-button {
  position: relative;
}

.watch-prompt-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 20;
  min-width: max-content;
  max-width: 160px;
  transform: translate(-50%, 4px);
  border: 1px solid rgba(255, 244, 226, 0.24);
  border-radius: 999px;
  background: rgba(42, 24, 16, 0.72);
  color: #fff4e4;
  padding: 5px 9px;
  font-size: 0.72rem;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(12px) saturate(1.1);
  transition: opacity 160ms ease, transform 160ms ease;
}

.watch-prompt-button:hover .watch-prompt-tooltip,
.watch-prompt-button:focus-visible .watch-prompt-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.control-divider {
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  margin: 5px 2px;
  background: rgba(255, 244, 226, 0.18);
}

.tool-button:disabled,
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.primary-button {
  width: 100%;
  border-color: rgba(255, 201, 122, 0.52);
  background: linear-gradient(135deg, #c98547, #8e5840);
}

.video-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 226, 187, 0.28);
  border-radius: 8px;
  background: #050505;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
}

.video-stage.empty {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.player-corner-controls {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 8;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 180ms ease;
}

.player-corner-controls .compact-soft-button {
  height: 34px;
}

.video-stage:hover .player-corner-controls,
.video-stage:focus-within .player-corner-controls {
  opacity: 1;
}

.video-stage.web-active .player-corner-controls {
  opacity: 1;
}

.video-stage.web-active .player-corner-controls .icon-button,
.video-stage.web-active .player-corner-controls .compact-soft-button {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fffaf2;
  background: rgba(22, 16, 13, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px) saturate(1.12);
}

.video-stage.web-active .player-corner-controls .icon-button:hover,
.video-stage.web-active .player-corner-controls .compact-soft-button:hover {
  border-color: rgba(255, 226, 187, 0.72);
  background: rgba(87, 54, 39, 0.92);
}

.status-strip {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: max-content;
  max-width: min(760px, 100%);
  margin: 0;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.78);
  background: rgba(73, 42, 30, 0.34);
  padding: 6px 13px;
  font-size: 0.8rem;
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.status-strip strong {
  overflow: hidden;
  max-width: 46vw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-stage.floating {
  position: fixed;
  z-index: 50;
  resize: both;
  min-width: 280px;
  min-height: 170px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 120px);
  aspect-ratio: auto;
  cursor: default;
}

.video-stage.floating.compact {
  width: 360px;
  height: 216px;
}

.video-stage.floating.wide {
  width: 520px;
  height: 312px;
}

.video-stage.floating.large {
  width: 760px;
  height: 456px;
}

.floating-handle {
  position: absolute;
  inset: 0 0 auto;
  z-index: 7;
  display: block;
  height: 28px;
  cursor: move;
  touch-action: none;
  user-select: none;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent;
  padding: 0 10px;
  font-size: 0;
}

.video-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.audio-track-switch {
  position: absolute;
  right: 12px;
  bottom: 44px;
  z-index: 10;
  overflow: hidden;
  max-width: min(180px, calc(100% - 24px));
  min-height: 28px;
  border: 1px solid rgba(255, 244, 226, 0.26);
  border-radius: 999px;
  color: rgba(255, 248, 238, 0.88);
  background: rgba(23, 16, 12, 0.56);
  padding: 0 11px;
  font-size: 0.7rem;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(9px);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.audio-track-switch:hover,
.audio-track-switch:focus-visible {
  border-color: rgba(255, 226, 187, 0.5);
  color: #fff8ef;
  background: rgba(65, 42, 30, 0.72);
}

.web-frame-player {
  width: 100%;
  height: 100%;
  background: #050505;
}

.web-frame.in-stage {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.web-assist-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: min(720px, calc(100% - 24px));
  margin: 8px auto 0;
}

.web-assist-button,
.web-time-sync,
.screenshot-ready {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 244, 226, 0.24);
  border-radius: 999px;
  color: rgba(255, 248, 238, 0.9);
  background: rgba(71, 43, 32, 0.48);
  padding: 0 10px;
  font-size: 0.72rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px) saturate(1.08);
}

.web-assist-button:hover {
  border-color: rgba(255, 226, 187, 0.44);
  background: rgba(103, 65, 46, 0.58);
}

.web-time-sync {
  padding: 0 7px;
}

.web-time-sync button {
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 248, 238, 0.84);
  background: rgba(255, 255, 255, 0.08);
  padding: 0 7px;
  font-size: 0.68rem;
}

.web-time-sync button:hover {
  color: #fff8ee;
  background: rgba(255, 244, 226, 0.16);
}

.web-time-sync .sync-apply {
  border: 1px solid rgba(255, 226, 187, 0.22);
  background: rgba(255, 214, 151, 0.14);
}

.web-time-sync input {
  width: 70px;
  min-height: 24px;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 999px;
  color: #fff8ee;
  background: rgba(255, 255, 255, 0.1);
  padding: 0 8px;
  text-align: center;
  font-size: 0.72rem;
}

.screenshot-ready {
  color: rgba(255, 226, 187, 0.86);
}

.video-subtitle {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 5;
  width: min(82%, 760px);
  border-radius: 8px;
  color: #fffdf6;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.62));
  padding: 9px 14px;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  transform: translateX(-50%);
}

.plan-bubble {
  position: fixed;
  left: calc(50% + clamp(118px, 16vw, 220px));
  top: clamp(448px, calc(57svh - 48px), 662px);
  z-index: 28;
  display: inline-flex;
  max-width: min(76%, 620px);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 999px;
  color: rgba(58, 45, 37, 0.9);
  background: rgba(255, 255, 255, 0.62);
  padding: 9px 14px;
  box-shadow: 0 14px 34px rgba(46, 30, 21, 0.16);
  transform: translateX(-50%);
  backdrop-filter: blur(6px) saturate(1.04);
  animation: companion-bubble-in 220ms ease-out both;
}

.plan-bubble.is-hint {
  border-color: rgba(255, 255, 255, 0.48);
  color: rgba(72, 56, 46, 0.72);
  background: rgba(255, 255, 255, 0.5);
}

.plan-bubble-message,
.plan-bubble-listen,
.plan-bubble-close {
  border: 0;
  color: inherit;
  background: transparent;
  padding: 0;
}

.plan-bubble-message {
  max-width: min(56vw, 470px);
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-bubble-listen {
  border: 1px solid rgba(92, 70, 55, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  padding: 3px 9px;
  font-size: 0.68rem;
}

.plan-bubble-close {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  color: rgba(72, 56, 46, 0.48);
}

.plan-bubble-listen:hover,
.plan-bubble-close:hover {
  color: rgba(44, 33, 27, 0.88);
  background: rgba(255, 255, 255, 0.62);
}

@keyframes companion-bubble-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.empty-player {
  display: grid;
  height: 100%;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 99px 18px 18px;
  color: rgba(255, 244, 226, 0.86);
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62);
}

.empty-player-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 0;
}

.glass-action {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 38px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 244, 226, 0.28);
  border-radius: 999px;
  color: #fff8ee;
  background: rgba(72, 43, 32, 0.34);
  padding: 0;
  font-size: 14px;
  line-height: 1;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.glass-action svg {
  width: 17px;
  height: 17px;
}

.glass-action span {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 3;
  width: max-content;
  max-width: 170px;
  border: 1px solid rgba(255, 244, 226, 0.24);
  border-radius: 999px;
  color: rgba(255, 248, 238, 0.94);
  background: rgba(32, 20, 15, 0.68);
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -3px);
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(9px) saturate(1.08);
}

.glass-action:hover {
  border-color: rgba(255, 226, 187, 0.5);
  background: rgba(90, 55, 39, 0.48);
}

.glass-action:hover span,
.glass-action:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.format-hint {
  color: rgba(255, 244, 226, 0.66);
  font-size: 0.68rem;
  opacity: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58);
  transform: translateY(5px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.empty-player:has(.glass-action:hover) .format-hint,
.empty-player:focus-within .format-hint {
  opacity: 1;
  transform: translateY(39px);
}

.glass-action input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.talk-launcher {
  position: fixed;
  left: 50%;
  top: clamp(500px, 57svh, 710px);
  bottom: auto;
  z-index: 22;
  display: flex;
  width: max-content;
  max-width: min(480px, 100%);
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  border: 1px solid rgba(255, 244, 226, 0.24);
  border-radius: 999px;
  color: #fff8ee;
  background: rgba(88, 52, 39, 0.4);
  padding: 0 17px;
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}

.now-card,
.subtitle-card,
.panel,
.prompt-preview {
  border: 1px solid rgba(255, 226, 187, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(114, 76, 53, 0.36), rgba(255, 244, 226, 0.12));
  box-shadow: 0 14px 36px rgba(55, 33, 21, 0.2);
  backdrop-filter: blur(9px) saturate(1.08);
}

.pop-panel {
  width: min(760px, 100%);
  margin: 12px auto 0;
  animation: panel-fade 180ms ease-out;
}

.pop-panel.is-closing {
  pointer-events: none;
  animation: panel-fade-out 150ms ease-in forwards;
}

.sofa-companion {
  position: fixed;
  left: 50%;
  top: clamp(500px, 63svh, 690px);
  bottom: auto;
  z-index: 30;
  width: min(520px, calc(100vw - 72px));
  margin: 0;
  transform: translateX(-50%);
}

.panel-drag-edge {
  position: absolute;
  inset: -8px;
  z-index: 4;
  pointer-events: none;
}

.panel-drag-edge span {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
}

.panel-drag-edge .edge-top,
.panel-drag-edge .edge-bottom {
  left: 16px;
  right: 16px;
  height: 12px;
  cursor: move;
}

.panel-drag-edge .edge-top {
  top: 0;
}

.panel-drag-edge .edge-bottom {
  bottom: 0;
}

.panel-drag-edge .edge-left,
.panel-drag-edge .edge-right {
  top: 16px;
  bottom: 16px;
  width: 12px;
  cursor: move;
}

.panel-drag-edge .edge-left {
  left: 0;
}

.panel-drag-edge .edge-right {
  right: 0;
}

.ghost-panel {
  background: linear-gradient(135deg, rgba(96, 62, 44, 0.38), rgba(255, 244, 226, 0.1));
  box-shadow: 0 16px 42px rgba(55, 33, 21, 0.22);
}

@keyframes panel-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes panel-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.source-panel {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid rgba(255, 226, 187, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(114, 76, 53, 0.34), rgba(255, 244, 226, 0.11));
  padding: 12px;
  backdrop-filter: blur(9px) saturate(1.08);
}

.source-panel-head {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 244, 226, 0.88);
  font-size: 0.82rem;
  font-weight: 800;
}

.source-panel-close {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.3);
  border-radius: 999px;
  color: #fff8ee;
  background: rgba(32, 20, 15, 0.58);
  padding: 0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.source-panel-close:hover,
.source-panel-close:focus-visible {
  border-color: rgba(255, 226, 187, 0.56);
  background: rgba(99, 61, 43, 0.72);
  transform: translateY(-1px);
}

.source-helper-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.source-helper-row button {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 226, 187, 0.22);
  border-radius: 999px;
  color: rgba(255, 248, 238, 0.9);
  background: rgba(255, 244, 226, 0.08);
  padding: 0 11px;
  font-size: 0.76rem;
}

.source-helper-row button:hover {
  border-color: rgba(255, 226, 187, 0.44);
  background: rgba(255, 214, 151, 0.14);
}

.source-helper-row small {
  color: rgba(255, 244, 226, 0.48);
  font-size: 0.68rem;
  white-space: nowrap;
}

.search-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.search-line input {
  min-width: 0;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 8px;
  color: #fff4e4;
  background: rgba(255, 255, 255, 0.08);
  padding: 10px 12px;
}

.search-line button {
  min-height: 38px;
  border: 1px solid rgba(255, 226, 187, 0.24);
  border-radius: 8px;
  color: #fff4e4;
  background: rgba(255, 244, 226, 0.1);
  padding: 0 12px;
}

.source-quick-hint {
  margin: -2px 2px 0;
  color: rgba(255, 244, 226, 0.54);
  font-size: 0.72rem;
  line-height: 1.35;
}

.now-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 16px;
}

.now-card div {
  display: grid;
  gap: 4px;
}

.subtitle-card {
  position: relative;
  z-index: 38;
  width: min(460px, calc(100vw - 44px));
  max-height: min(40svh, 380px);
  overflow: hidden;
  margin: 8px auto 0;
  padding: 6px;
  border-radius: 999px;
}

.subtitle-card.expanded {
  border-radius: 8px;
}

.subtitle-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.subtitle-pill,
.subtitle-close {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 244, 226, 0.18);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.68);
  background: rgba(255, 244, 226, 0.08);
  padding: 0 8px;
  font-size: 0.66rem;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.subtitle-pill:hover,
.subtitle-pill.active,
.subtitle-close:hover {
  border-color: rgba(255, 226, 187, 0.34);
  color: #fff8ee;
  background: rgba(255, 244, 226, 0.16);
}

.subtitle-pill:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.subtitle-close {
  width: 25px;
  padding: 0;
}

.subtitle-expanded {
  margin-top: 6px;
}

.subtitle-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 4px 6px;
  color: rgba(255, 244, 226, 0.44);
  font-size: 0.62rem;
}

.subtitle-sync-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 0 7px;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 4px;
}

.subtitle-sync-row span {
  color: rgba(255, 244, 226, 0.68);
  padding: 0 4px;
  font-size: 0.64rem;
}

.subtitle-sync-row button {
  min-height: 22px;
  border: 1px solid rgba(255, 244, 226, 0.14);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.78);
  background: rgba(255, 244, 226, 0.08);
  padding: 0 8px;
  font-size: 0.62rem;
}

.subtitle-sync-row button:hover {
  border-color: rgba(255, 226, 187, 0.34);
  color: #fff8ee;
  background: rgba(255, 244, 226, 0.16);
}

.subtitle-sync-row button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.inline-panel-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  color: rgba(255, 244, 226, 0.58);
  font-size: 0.76rem;
}

.inline-panel-action .soft-button {
  min-height: 30px;
  padding: 0 11px;
  font-size: 0.76rem;
}

.active-subtitle {
  min-height: 28px;
  margin-top: 0;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 7px 9px;
  color: #fff8ee;
  font-size: 0.76rem;
  line-height: 1.42;
}

.subtitle-neighbors {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: rgba(248, 239, 228, 0.58);
  font-size: 0.9rem;
}

.subtitle-list {
  display: grid;
  max-height: min(26svh, 230px);
  gap: 5px;
  overflow: auto;
  margin-top: 8px;
  padding-right: 4px;
}

.subtitle-list button {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 7px;
  align-items: start;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 8px;
  color: rgba(255, 244, 226, 0.86);
  background: rgba(255, 255, 255, 0.07);
  padding: 6px 8px;
  text-align: left;
}

.subtitle-list button.active {
  border-color: rgba(255, 218, 168, 0.58);
  background: rgba(255, 214, 151, 0.14);
}

.subtitle-list button span {
  color: rgba(255, 218, 168, 0.74);
  font-size: 0.72rem;
}

.subtitle-list button strong {
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.42;
}

.compact-title {
  margin-bottom: 9px;
  font-size: 0.86rem;
}

.empty-plan {
  display: grid;
  gap: 14px;
}

.compact-empty {
  margin-top: 10px;
  gap: 0;
}

.companion-column {
  display: grid;
  gap: 14px;
}

.panel {
  padding: 16px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #ffe3bd;
  font-weight: 700;
}

.settings-panel {
  position: fixed;
  right: 20px;
  top: 92px;
  z-index: 42;
  width: min(680px, calc(100vw - 40px));
  max-height: calc(100svh - 120px);
  overflow: auto;
  margin: 0;
}

.settings-card {
  background: rgba(23, 15, 11, 0.68);
}

.settings-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #ffe3bd;
}

.settings-title div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-title span,
.settings-hint,
.settings-footer {
  color: rgba(248, 239, 228, 0.62);
  font-size: 0.78rem;
  line-height: 1.45;
}

.provider-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  padding: 5px;
}

.provider-tabs button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.8);
  background: transparent;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.provider-tabs button:hover,
.provider-tabs button.active {
  border-color: rgba(255, 218, 168, 0.58);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.16);
}

.provider-tabs button.active {
  transform: translateY(-1px);
}

.settings-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  margin: 10px 0;
  color: rgba(255, 244, 226, 0.82);
  font-size: 0.88rem;
}

.settings-switch input {
  width: 17px;
  height: 17px;
  accent-color: #d9a66a;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.settings-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-grid.compact.cognitive-load-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-grid label,
.settings-grid .settings-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: rgba(255, 244, 226, 0.74);
  font-size: 0.78rem;
}

.settings-tooltip-label {
  position: relative;
}

.settings-tooltip-label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.settings-tooltip-label svg {
  color: rgba(255, 226, 187, 0.48);
}

.settings-tooltip-label::after {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 80;
  width: min(260px, 78vw);
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 10px;
  color: rgba(255, 248, 237, 0.86);
  background: rgba(42, 29, 22, 0.94);
  padding: 9px 11px;
  box-shadow: 0 16px 38px rgba(20, 12, 8, 0.28);
  content: attr(data-tooltip);
  font-size: 0.72rem;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(14px) saturate(1.08);
}

.settings-tooltip-label:hover::after,
.settings-tooltip-label:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.settings-grid input,
.settings-grid select {
  min-width: 0;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 8px;
  color: #fff4e4;
  background: rgba(255, 255, 255, 0.08);
  padding: 9px 10px;
}

.model-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.model-preset-row button {
  min-height: 28px;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.62);
  background: rgba(255, 244, 226, 0.05);
  padding: 0 10px;
  font-size: 0.72rem;
  line-height: 1;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.model-preset-row button:hover,
.model-preset-row button.active {
  border-color: rgba(255, 218, 164, 0.42);
  color: rgba(255, 246, 231, 0.94);
  background: rgba(255, 214, 158, 0.15);
}

.settings-route-shell[data-theme="white-gold"] .model-preset-row button,
.cinema-shell[data-theme="white-gold"] .model-preset-row button {
  border-color: rgba(149, 115, 63, 0.2);
  color: rgba(70, 55, 41, 0.7);
  background: rgba(149, 115, 63, 0.05);
}

.settings-route-shell[data-theme="white-gold"] .model-preset-row button:hover,
.settings-route-shell[data-theme="white-gold"] .model-preset-row button.active,
.cinema-shell[data-theme="white-gold"] .model-preset-row button:hover,
.cinema-shell[data-theme="white-gold"] .model-preset-row button.active {
  border-color: rgba(149, 115, 63, 0.42);
  color: #463729;
  background: rgba(198, 153, 92, 0.16);
}

.settings-grid select option {
  color: #2c211b;
}

.settings-section-title {
  margin-top: 16px;
  color: #ffe3bd;
  font-size: 0.9rem;
  font-weight: 700;
}

.settings-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 226, 187, 0.12);
  padding-top: 12px;
}

.settings-page {
  position: fixed;
  inset: 22px;
  z-index: 52;
  width: auto;
  max-width: 1160px;
  max-height: calc(100svh - 44px);
  overflow: auto;
  margin: 0 auto;
}

.settings-route-shell {
  width: 100%;
  min-height: 100svh;
  padding: 58px 0 0;
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 8%, rgba(213, 177, 109, 0.14), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(125, 86, 58, 0.16), transparent 32%),
    linear-gradient(135deg, #050505, #14100c 46%, #090807);
}

.cinema-shell,
.settings-route-shell {
  scrollbar-width: none;
}

.cinema-shell::-webkit-scrollbar,
.settings-route-shell::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.settings-route-shell[data-theme="white-gold"] {
  color: #463729;
  background:
    radial-gradient(circle at 18% 8%, rgba(198, 160, 88, 0.18), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(221, 196, 151, 0.2), transparent 32%),
    linear-gradient(135deg, #f5f3ec, #e8edf4 50%, #f7f3e8);
}

.settings-route-shell[data-theme="white-gold"] .settings-route-header {
  color: #463729;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(221, 196, 151, 0.22));
}

.settings-route-shell[data-theme="white-gold"] .settings-route-header button {
  border-color: rgba(149, 115, 63, 0.22);
  color: #463729;
  background: rgba(255, 255, 255, 0.56);
}

.settings-route-shell[data-theme="white-gold"] .settings-route-header button:hover {
  color: #2f251c;
  background: rgba(221, 196, 151, 0.32);
}

.settings-route-shell[data-theme="white-gold"] .settings-route-header p,
.settings-route-shell[data-theme="white-gold"] .settings-route-header h1 span {
  color: rgba(70, 55, 41, 0.58);
}

.settings-route-shell[data-theme="white-gold"] .settings-route-mark {
  border-color: rgba(149, 115, 63, 0.22);
  color: #463729;
  background: rgba(255, 255, 255, 0.5);
}

.settings-route-shell[data-theme="pink-mocha"] {
  color: #e2dadc;
  background:
    radial-gradient(circle at 18% 8%, rgba(181, 140, 140, 0.2), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(226, 218, 220, 0.12), transparent 32%),
    linear-gradient(135deg, #42382e, #312a21 52%, #221c16);
}

.settings-route-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: min(1160px, calc(100vw - 48px));
  margin: 0 auto 14px;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 8px;
  color: #fff4e4;
  background: linear-gradient(135deg, rgba(104, 69, 50, 0.48), rgba(255, 244, 226, 0.12));
  padding: 12px 14px;
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 16px 42px rgba(34, 20, 14, 0.2);
}

.settings-route-shell[data-theme="black-gold"] .settings-route-header,
.settings-route-shell[data-theme="black-gold"] .settings-page-card,
.cinema-shell[data-theme="black-gold"] .settings-page-card {
  color: #f7ead0;
  background: linear-gradient(135deg, rgba(5, 5, 5, 0.78), rgba(41, 31, 20, 0.55));
}

.cinema-shell[data-theme="black-gold"] .now-card,
.cinema-shell[data-theme="black-gold"] .subtitle-card,
.cinema-shell[data-theme="black-gold"] .panel,
.cinema-shell[data-theme="black-gold"] .prompt-preview,
.cinema-shell[data-theme="black-gold"] .source-panel,
.cinema-shell[data-theme="black-gold"] .ghost-panel {
  background:
    linear-gradient(135deg, rgba(7, 7, 7, 0.78), rgba(38, 30, 19, 0.5)),
    rgba(0, 0, 0, 0.18);
}

.settings-route-header button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.22);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.82);
  background: rgba(255, 244, 226, 0.1);
  padding: 0 13px;
}

.settings-route-header button:hover {
  color: #fff8ef;
  background: rgba(255, 244, 226, 0.17);
}

.settings-route-header p {
  margin: 0;
  color: rgba(248, 239, 228, 0.48);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.settings-route-header h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 2px 0 0;
  font-size: 1.12rem;
}

.settings-route-header h1 span {
  color: rgba(248, 239, 228, 0.56);
  font-size: 0.78rem;
  font-weight: 500;
}

.settings-route-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.2);
  border-radius: 999px;
  background: rgba(255, 244, 226, 0.1);
}

.settings-route-shell .settings-page {
  position: relative;
  inset: auto;
  z-index: 2;
  width: min(1160px, calc(100vw - 48px));
  max-width: none;
  max-height: none;
}

.settings-route-shell .settings-page-card {
  min-height: auto;
}

.settings-page-card {
  display: grid;
  gap: 14px;
  min-height: min(760px, calc(100svh - 44px));
  border: 1px solid rgba(255, 226, 187, 0.2);
  border-radius: 10px;
  color: #fff4e4;
  background: linear-gradient(135deg, rgba(47, 29, 21, 0.78), rgba(124, 82, 55, 0.34));
  padding: 18px;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px) saturate(1.12);
}

.settings-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-section-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.settings-page-title,
.settings-section-heading > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.settings-page-title div,
.settings-section-heading div {
  display: grid;
  gap: 3px;
}

.settings-page-title span,
.settings-section-heading span {
  color: rgba(248, 239, 228, 0.62);
  font-size: 0.78rem;
  line-height: 1.45;
}

.settings-section {
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0;
  overflow: hidden;
}

.settings-section-toggle {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  color: inherit;
  background: transparent;
  padding: 14px;
  text-align: left;
}

.settings-section-toggle:hover {
  background: rgba(255, 244, 226, 0.045);
}

.settings-section-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 226, 187, 0.8);
  background: rgba(255, 244, 226, 0.06);
}

.settings-section-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.settings-section-copy strong {
  color: rgba(255, 248, 237, 0.92);
  font-size: 0.94rem;
}

.settings-section-copy small {
  color: rgba(248, 239, 228, 0.58);
  font-size: 0.74rem;
  line-height: 1.45;
}

.settings-section-chevron {
  color: rgba(255, 244, 226, 0.38);
  transition: transform 160ms ease, color 160ms ease;
}

.settings-section-chevron.open {
  color: rgba(255, 226, 187, 0.78);
  transform: rotate(180deg);
}

.settings-section-body {
  display: grid;
  gap: 12px;
  border-top: 1px solid rgba(255, 226, 187, 0.08);
  padding: 14px;
  animation: panelFadeIn 170ms ease both;
}

.visual-cortex-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(255, 226, 187, 0.1);
  border-radius: 10px;
  background: rgba(8, 7, 6, 0.2);
  padding: 14px;
}

.persona-page-card {
  gap: 16px;
}

.persona-section {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 10px;
  background: rgba(8, 7, 6, 0.2);
  padding: 15px;
}

.settings-section-heading strong {
  color: rgba(255, 248, 237, 0.92);
  font-size: 0.95rem;
}

.persona-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.persona-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: rgba(255, 244, 226, 0.76);
  font-size: 0.78rem;
}

.persona-field input,
.persona-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 10px;
  color: #fff4e4;
  background: rgba(255, 255, 255, 0.07);
  padding: 10px 12px;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease;
}

.persona-field textarea {
  resize: vertical;
  line-height: 1.65;
}

.persona-field input:focus,
.persona-field textarea:focus {
  border-color: rgba(255, 226, 187, 0.34);
  background: rgba(255, 255, 255, 0.095);
}

.persona-actions {
  display: flex;
  justify-content: flex-end;
}

.persona-actions button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.82);
  background: rgba(255, 244, 226, 0.09);
  padding: 0 13px;
}

.persona-actions button:hover {
  color: #fff8ef;
  background: rgba(255, 244, 226, 0.16);
}

.settings-section-toggle.static {
  cursor: default;
}

.settings-section-toggle.static:hover {
  background: transparent;
}

.persona-avatar-grid,
.persona-switch-grid,
.persona-tuning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.persona-avatar-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  padding: 12px;
}

.persona-avatar-preview {
  display: grid;
  width: 74px;
  height: 74px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.22);
  border-radius: 999px;
  color: rgba(255, 226, 187, 0.88);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 226, 187, 0.22), transparent 34%),
    rgba(255, 255, 255, 0.07);
  font-size: 1.35rem;
  font-weight: 800;
}

.persona-avatar-preview img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.persona-avatar-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.persona-avatar-actions button,
.memory-toolbar button,
.primary-memory-button,
.primary-mini-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.8);
  background: rgba(255, 244, 226, 0.08);
  padding: 0 12px;
  font-size: 0.74rem;
}

.persona-avatar-actions button:hover:not(:disabled),
.memory-toolbar button:hover,
.primary-memory-button:hover:not(:disabled),
.primary-mini-button:hover {
  border-color: rgba(255, 226, 187, 0.3);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.16);
}

.persona-avatar-actions button:disabled,
.primary-memory-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.persona-field.compact {
  gap: 5px;
}

.persona-switch-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 12px;
  color: rgba(255, 244, 226, 0.72);
  background: rgba(255, 255, 255, 0.055);
  padding: 0 12px;
  text-align: left;
}

.persona-switch-card.active {
  border-color: rgba(255, 226, 187, 0.28);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.13);
}

.persona-switch-card strong {
  color: rgba(255, 226, 187, 0.86);
  font-size: 0.74rem;
}

.persona-slider-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: center;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 12px;
  color: rgba(255, 244, 226, 0.74);
  background: rgba(255, 255, 255, 0.055);
  padding: 12px;
  font-size: 0.78rem;
}

.persona-slider-card input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #d5b16d;
}

.persona-slider-card strong {
  color: rgba(255, 226, 187, 0.9);
  font-size: 0.78rem;
}

.persona-slider-card em {
  grid-column: 1 / -1;
  color: rgba(255, 244, 226, 0.34);
  font-size: 0.66rem;
  font-style: normal;
}

.persona-slider-card.compact {
  width: 100%;
}

.avatar-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.42);
  padding: 20px;
}

.avatar-editor-card {
  display: grid;
  width: min(430px, calc(100vw - 40px));
  gap: 12px;
  border: 1px solid rgba(255, 226, 187, 0.2);
  border-radius: 14px;
  color: #fff4e4;
  background: linear-gradient(135deg, rgba(38, 25, 18, 0.94), rgba(99, 65, 43, 0.86));
  padding: 16px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px) saturate(1.1);
}

.avatar-editor-card .persona-avatar-preview {
  width: 132px;
  height: 132px;
  justify-self: center;
}

.persona-route-shell {
  width: 100%;
  padding: 66px 0 0;
}

.persona-original-page {
  display: grid;
  min-height: calc(100svh - 66px);
  overflow: visible;
  border: 1px solid rgba(255, 226, 187, 0.14);
  background: rgba(8, 7, 6, 0.28);
  backdrop-filter: blur(10px);
}

.persona-user-layer,
.persona-workbench {
  width: min(1240px, calc(100vw - 32px));
  margin: 0 auto;
}

.persona-user-layer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 126px;
  border-bottom: 1px solid rgba(255, 226, 187, 0.1);
  background: rgba(34, 25, 18, 0.48);
  padding: 20px 24px;
  backdrop-filter: blur(10px);
}

.persona-back-button,
.persona-save-button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.82);
  background: rgba(255, 244, 226, 0.08);
  padding: 0 14px;
}

.persona-back-button:hover,
.persona-save-button:hover {
  color: #fff8ee;
  background: rgba(255, 244, 226, 0.15);
}

.persona-save-button {
  border-color: rgba(255, 226, 187, 0.3);
  color: rgba(33, 24, 16, 0.94);
  background: rgba(255, 226, 187, 0.9);
  font-weight: 700;
}

.persona-user-avatar-block,
.persona-editor-avatar {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.persona-user-copy {
  display: grid;
  gap: 8px;
}

.persona-user-copy p,
.persona-panel-title p,
.persona-editor-title p {
  margin: 0;
  color: rgba(255, 226, 187, 0.54);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.persona-user-copy h2,
.persona-panel-title h2,
.persona-editor-title h2 {
  margin: 0;
  color: rgba(255, 248, 237, 0.96);
  font-size: 1.25rem;
  line-height: 1.2;
}

.persona-panel-title h2 {
  color: rgba(255, 244, 226, 0.5);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.persona-user-copy .persona-field {
  max-width: 460px;
}

.persona-user-copy .persona-field input {
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  padding: 4px 0 8px;
  color: rgba(255, 248, 237, 0.94);
  font-size: 1.35rem;
  font-weight: 700;
}

.persona-soft-toggle {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.74);
  background: rgba(255, 244, 226, 0.07);
  padding: 0 14px;
  white-space: nowrap;
}

.persona-soft-toggle.active {
  border-color: rgba(255, 226, 187, 0.3);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.14);
}

.persona-soft-toggle strong {
  color: rgba(255, 226, 187, 0.92);
  font-size: 0.76rem;
}

.persona-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: auto;
}

.persona-deck-panel,
.persona-editor-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.persona-deck-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: calc(100svh - 126px);
  overflow: hidden;
  border-right: 1px solid rgba(255, 226, 187, 0.1);
  background: rgba(3, 3, 3, 0.34);
  padding: 16px 12px;
}

.persona-deck-list {
  display: grid;
  gap: 9px;
}

.persona-deck-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.78);
  background: rgba(255, 255, 255, 0.045);
  padding: 7px 10px;
  text-align: left;
}

.persona-deck-card:hover,
.persona-deck-card.active {
  border-color: rgba(255, 226, 187, 0.28);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.12);
}

.persona-deck-card span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.persona-deck-card strong,
.persona-deck-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona-deck-card small {
  color: rgba(255, 244, 226, 0.48);
  font-size: 0.7rem;
}

.persona-add-card {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.82);
  background: rgba(255, 244, 226, 0.08);
  padding: 0 14px;
}

.persona-add-card:hover {
  border-color: rgba(255, 226, 187, 0.34);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.16);
}

.persona-editor-panel {
  display: grid;
  width: min(900px, calc(100% - 40px));
  gap: 14px;
  align-self: start;
  justify-self: center;
  padding: 24px 0 42px;
}

.persona-editor-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 8px;
}

.persona-editor-title {
  display: grid;
  gap: 4px;
}

.persona-editor-title span {
  color: rgba(255, 244, 226, 0.58);
  font-size: 0.78rem;
}

.persona-code-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 244, 226, 0.9);
  font-weight: 700;
}

.persona-field-hint {
  color: rgba(255, 244, 226, 0.42);
  font-size: 0.68rem;
  line-height: 1.5;
}

.persona-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.persona-field input[type="color"] {
  min-height: 43px;
  padding: 5px;
}

.persona-cognitive-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.persona-gates-card {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(255, 226, 187, 0.08);
  padding-top: 14px;
}

.persona-gates-label {
  color: rgba(255, 244, 226, 0.42);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.persona-memory-gate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 14px;
  color: rgba(255, 244, 226, 0.72);
  background: rgba(255, 255, 255, 0.05);
  padding: 0 13px;
  text-align: left;
}

.persona-memory-gate span {
  display: grid;
  gap: 2px;
}

.persona-memory-gate small {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  opacity: 0.62;
}

.persona-memory-gate.active {
  border-color: rgba(255, 226, 187, 0.3);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.13);
}

.persona-memory-gate strong {
  color: rgba(255, 226, 187, 0.9);
  font-size: 0.76rem;
}

.persona-active-status {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.28);
  border-radius: 10px;
  color: rgba(255, 226, 187, 0.9);
  background: rgba(255, 214, 151, 0.1);
  font-size: 0.82rem;
  font-weight: 700;
}

.persona-danger-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 169, 144, 0.18);
  border-radius: 999px;
  color: rgba(255, 196, 176, 0.8);
  background: rgba(132, 48, 38, 0.12);
}

.persona-danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.persona-avatar-preview.sm {
  width: 44px;
  height: 44px;
  font-size: 0.9rem;
}

.persona-avatar-preview.md {
  width: 74px;
  height: 74px;
}

.persona-avatar-preview.lg {
  width: 104px;
  height: 104px;
  font-size: 1.65rem;
}

.persona-avatar-actions label {
  position: relative;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.8);
  background: rgba(255, 244, 226, 0.08);
  padding: 0 12px;
  font-size: 0.74rem;
  cursor: pointer;
}

.persona-avatar-actions label:hover {
  border-color: rgba(255, 226, 187, 0.3);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.16);
}

.persona-avatar-actions .persona-avatar-eye-toggle {
  width: 32px;
  min-width: 32px;
  padding: 0;
}

.persona-avatar-actions .persona-avatar-eye-toggle.active {
  border-color: rgba(255, 226, 187, 0.32);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.14);
}

.visually-hidden-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.primary-mini-button,
.primary-memory-button {
  border-color: rgba(255, 226, 187, 0.36);
  color: rgba(45, 30, 20, 0.94);
  background: rgba(255, 226, 187, 0.9);
}

.memory-page-card {
  gap: 16px;
}

.memory-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 226, 187, 0.08);
  padding-bottom: 14px;
}

.memory-title-copy {
  display: grid;
  gap: 4px;
}

.memory-title-copy h2 {
  margin: 0;
  color: rgba(255, 226, 187, 0.96);
  font-size: 1.45rem;
  line-height: 1.1;
}

.memory-title-copy p {
  margin: 0;
  color: rgba(255, 244, 226, 0.46);
  font-size: 0.82rem;
}

.memory-head-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.memory-head-actions button,
.memory-primary-tool,
.memory-count-chip,
.memory-chip-add,
.memory-inline-add button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.78);
  background: rgba(255, 244, 226, 0.08);
  padding: 0 11px;
  font-size: 0.74rem;
}

.memory-head-actions button:hover,
.memory-primary-tool:hover,
.memory-chip-add:hover,
.memory-inline-add button:hover {
  border-color: rgba(255, 226, 187, 0.32);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.14);
}

.memory-primary-tool {
  border-color: rgba(255, 226, 187, 0.3);
  color: rgba(255, 226, 187, 0.92);
  background: rgba(255, 214, 151, 0.12);
}

.memory-smart-menu {
  position: relative;
}

.memory-smart-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  width: 230px;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 12px;
  background: rgba(44, 31, 23, 0.94);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
  animation: panelFadeIn 140ms ease-out;
}

.memory-smart-group {
  display: grid;
  gap: 2px;
  padding: 8px;
}

.memory-smart-group + .memory-smart-group {
  border-top: 1px solid rgba(255, 226, 187, 0.1);
}

.memory-smart-group > span {
  color: rgba(255, 226, 187, 0.46);
  padding: 3px 5px 5px;
  font-size: 0.66rem;
}

.memory-smart-group button {
  justify-content: flex-start;
  border: 0;
  border-radius: 8px;
  background: transparent;
  min-height: 32px;
  padding: 0 8px;
  font-size: 0.74rem;
}

.memory-smart-group button:hover {
  background: rgba(255, 214, 151, 0.12);
}

.spin-soft {
  animation: spinSoft 1s linear infinite;
}

@keyframes spinSoft {
  to {
    transform: rotate(360deg);
  }
}

.memory-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.memory-dashboard-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  padding: 12px;
}

.memory-dashboard-card svg {
  grid-row: span 2;
  color: rgba(255, 226, 187, 0.78);
}

.memory-dashboard-card strong {
  color: rgba(255, 248, 237, 0.94);
  font-size: 1.2rem;
  line-height: 1;
}

.memory-dashboard-card span {
  color: rgba(255, 244, 226, 0.5);
  font-size: 0.72rem;
}

.memory-compose-card {
  background: rgba(255, 255, 255, 0.035);
}

.memory-compose {
  display: grid;
  gap: 12px;
}

.memory-compose textarea {
  width: 100%;
  border: 0;
  color: rgba(255, 248, 237, 0.88);
  background: transparent;
  resize: vertical;
  outline: none;
}

.memory-compose-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255, 226, 187, 0.08);
  padding-top: 12px;
  color: rgba(255, 226, 187, 0.72);
}

.memory-compose-foot input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  color: rgba(255, 248, 237, 0.84);
  background: transparent;
  outline: none;
}

.memory-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.memory-count-chip {
  color: rgba(255, 226, 187, 0.72);
  background: rgba(255, 255, 255, 0.045);
}

.memory-search {
  display: flex;
  min-height: 36px;
  min-width: min(420px, 100%);
  flex: 1 1 260px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  padding: 0 12px;
  color: rgba(255, 226, 187, 0.72);
}

.memory-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  color: rgba(255, 248, 237, 0.9);
  background: transparent;
  outline: none;
}

.memory-tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.memory-filter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.memory-filter-toggle,
.memory-filter-clear {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.72);
  background: rgba(255, 255, 255, 0.055);
  padding: 0 10px;
  font-size: 0.72rem;
}

.memory-filter-toggle span {
  color: rgba(255, 226, 187, 0.46);
  font-size: 0.66rem;
}

.memory-filter-clear {
  color: rgba(255, 190, 175, 0.78);
  background: rgba(255, 145, 120, 0.07);
}

.memory-tag-filter.compact {
  max-height: 124px;
  overflow: auto;
  border: 1px solid rgba(255, 226, 187, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.08);
  padding: 8px;
}

.memory-tag-filter button {
  min-height: 28px;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.68);
  background: rgba(255, 255, 255, 0.055);
  padding: 0 10px;
  font-size: 0.72rem;
}

.memory-tag-filter.compact button {
  min-height: 24px;
  padding: 0 8px;
  font-size: 0.66rem;
}

.memory-tag-filter button.active,
.memory-tag-filter button:hover {
  border-color: rgba(255, 226, 187, 0.3);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.15);
}

.memory-list {
  display: grid;
  gap: 10px;
}

.memory-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px dashed rgba(255, 226, 187, 0.16);
  border-radius: 12px;
  color: rgba(255, 244, 226, 0.46);
  padding: 28px;
  text-align: center;
}

.memory-empty strong {
  color: rgba(255, 248, 237, 0.74);
}

.memory-entry-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  padding: 12px;
}

.memory-entry-card:hover {
  border-color: rgba(255, 226, 187, 0.24);
  background: rgba(255, 255, 255, 0.075);
}

.memory-entry-content {
  margin: 0;
  color: rgba(255, 248, 237, 0.82);
  font-size: 0.86rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

.memory-alias-block {
  display: grid;
  gap: 8px;
}

.memory-alias-toggle {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 4px;
  border: 0;
  color: rgba(255, 244, 226, 0.42);
  background: transparent;
  padding: 0;
  font-size: 0.72rem;
}

.memory-alias-toggle:hover {
  color: rgba(255, 226, 187, 0.88);
}

.memory-alias-body {
  display: grid;
  gap: 8px;
  border-left: 1px solid rgba(255, 226, 187, 0.13);
  margin-left: 5px;
  padding-left: 10px;
}

.memory-entry-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.memory-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memory-tag-chip,
.memory-mini-chip {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 226, 187, 0.1);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.56);
  background: rgba(0, 0, 0, 0.12);
  padding: 0 8px;
  font-size: 0.68rem;
}

.memory-mini-chip {
  color: rgba(255, 226, 187, 0.72);
  background: rgba(255, 214, 151, 0.08);
}

.memory-tag-chip button,
.memory-mini-chip button {
  display: grid;
  border: 0;
  color: rgba(255, 244, 226, 0.28);
  background: transparent;
  padding: 0;
}

.memory-tag-chip button:hover,
.memory-mini-chip button:hover {
  color: rgba(255, 128, 112, 0.9);
}

.memory-chip-add {
  width: 22px;
  min-height: 22px;
  padding: 0;
}

.memory-tag-more {
  min-width: 28px;
  min-height: 22px;
  border: 1px solid rgba(255, 226, 187, 0.1);
  border-radius: 999px;
  color: rgba(255, 226, 187, 0.5);
  background: rgba(255, 255, 255, 0.04);
  padding: 0 8px;
  font-size: 0.68rem;
}

.memory-tag-more:hover {
  border-color: rgba(255, 226, 187, 0.25);
  color: rgba(255, 248, 237, 0.88);
  background: rgba(255, 214, 151, 0.12);
}

.memory-inline-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.memory-inline-add input {
  width: 88px;
  min-height: 22px;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 999px;
  color: rgba(255, 248, 237, 0.78);
  background: rgba(0, 0, 0, 0.12);
  padding: 0 8px;
  outline: none;
  font-size: 0.68rem;
}

.memory-inline-add button {
  width: 22px;
  min-height: 22px;
  padding: 0;
}

.memory-entry-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: rgba(255, 244, 226, 0.32);
  font-size: 0.68rem;
}

.memory-entry-meta > button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 145, 120, 0.16);
  border-radius: 999px;
  color: rgba(255, 190, 175, 0.72);
  background: rgba(255, 145, 120, 0.07);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease;
}

.memory-entry-card:hover .memory-entry-meta > button,
.memory-entry-meta > button:focus-visible {
  opacity: 0.76;
  pointer-events: auto;
  transform: none;
}

.memory-entry-meta > button:hover {
  color: rgba(255, 218, 208, 0.95);
  background: rgba(255, 145, 120, 0.14);
  opacity: 1;
}

.settings-route-shell[data-theme="white-gold"] .persona-field,
.settings-route-shell[data-theme="white-gold"] .persona-switch-card,
.settings-route-shell[data-theme="white-gold"] .persona-slider-card,
.settings-route-shell[data-theme="white-gold"] .persona-user-layer,
.settings-route-shell[data-theme="white-gold"] .persona-deck-panel,
.settings-route-shell[data-theme="white-gold"] .persona-editor-panel,
.settings-route-shell[data-theme="white-gold"] .persona-deck-card,
.settings-route-shell[data-theme="white-gold"] .persona-memory-gate,
.settings-route-shell[data-theme="white-gold"] .persona-soft-toggle,
.settings-route-shell[data-theme="white-gold"] .memory-search,
.settings-route-shell[data-theme="white-gold"] .memory-filter-toggle,
.settings-route-shell[data-theme="white-gold"] .memory-filter-clear,
.settings-route-shell[data-theme="white-gold"] .memory-tag-filter button,
.settings-route-shell[data-theme="white-gold"] .memory-entry-card,
.settings-route-shell[data-theme="white-gold"] .memory-empty,
.settings-route-shell[data-theme="white-gold"] .memory-count-chip,
.settings-route-shell[data-theme="white-gold"] .memory-head-actions button,
.settings-route-shell[data-theme="white-gold"] .memory-primary-tool,
.settings-route-shell[data-theme="white-gold"] .memory-tag-chip,
.settings-route-shell[data-theme="white-gold"] .memory-mini-chip,
.settings-route-shell[data-theme="white-gold"] .memory-inline-add input {
  color: rgba(70, 55, 41, 0.72);
}

.settings-route-shell[data-theme="white-gold"] .persona-field input,
.settings-route-shell[data-theme="white-gold"] .persona-field textarea,
.settings-route-shell[data-theme="white-gold"] .persona-field input[type="color"],
.settings-route-shell[data-theme="white-gold"] .memory-search input,
.settings-route-shell[data-theme="white-gold"] .memory-compose textarea,
.settings-route-shell[data-theme="white-gold"] .memory-compose-foot input {
  color: #463729;
  background: rgba(255, 255, 255, 0.58);
}

.settings-route-shell[data-theme="white-gold"] .settings-section-copy strong,
.settings-route-shell[data-theme="white-gold"] .settings-section-heading strong,
.settings-route-shell[data-theme="white-gold"] .persona-user-copy h2,
.settings-route-shell[data-theme="white-gold"] .persona-panel-title h2,
.settings-route-shell[data-theme="white-gold"] .persona-editor-title h2,
.settings-route-shell[data-theme="white-gold"] .persona-deck-card strong,
.settings-route-shell[data-theme="white-gold"] .memory-empty strong,
.settings-route-shell[data-theme="white-gold"] .memory-dashboard-card strong,
.settings-route-shell[data-theme="white-gold"] .memory-title-copy h2,
.settings-route-shell[data-theme="white-gold"] .memory-entry-content {
  color: #463729;
}

.settings-route-shell[data-theme="white-gold"] .persona-user-copy p,
.settings-route-shell[data-theme="white-gold"] .persona-panel-title p,
.settings-route-shell[data-theme="white-gold"] .persona-editor-title p,
.settings-route-shell[data-theme="white-gold"] .persona-editor-title span,
.settings-route-shell[data-theme="white-gold"] .persona-deck-card small {
  color: rgba(70, 55, 41, 0.58);
}

.settings-route-shell[data-theme="white-gold"] .persona-user-layer,
.settings-route-shell[data-theme="white-gold"] .persona-deck-panel,
.settings-route-shell[data-theme="white-gold"] .persona-editor-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(232, 221, 207, 0.62));
}

.settings-route-shell[data-theme="white-gold"] .persona-deck-card,
.settings-route-shell[data-theme="white-gold"] .persona-editor-head,
.settings-route-shell[data-theme="white-gold"] .persona-memory-gate,
.settings-route-shell[data-theme="white-gold"] .persona-soft-toggle,
.settings-route-shell[data-theme="white-gold"] .persona-avatar-actions button,
.settings-route-shell[data-theme="white-gold"] .persona-avatar-actions label {
  color: rgba(70, 55, 41, 0.72);
  background: rgba(255, 255, 255, 0.48);
}

.settings-route-shell[data-theme="white-gold"] .memory-dashboard-card span {
  color: rgba(70, 55, 41, 0.58);
}

.settings-route-shell[data-theme="white-gold"] .memory-title-copy p,
.settings-route-shell[data-theme="white-gold"] .memory-entry-meta,
.settings-route-shell[data-theme="white-gold"] .memory-alias-toggle {
  color: rgba(70, 55, 41, 0.52);
}

.visual-block {
  display: grid;
  gap: 12px;
}

.visual-block-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 244, 226, 0.88);
  font-size: 0.88rem;
  font-weight: 700;
}

.visual-block-title svg {
  color: rgba(255, 226, 187, 0.82);
}

.visual-background-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.visual-inline-row {
  display: grid;
  grid-template-columns: max-content minmax(150px, 210px) max-content;
  align-items: center;
  gap: 9px;
}

.visual-inline-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.visual-compact-setting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.visual-compact-title {
  min-width: 58px;
  white-space: nowrap;
}

.background-inline-row .visual-compact-title {
  min-width: 92px;
}

.visual-duo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.theme-orb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.theme-orb-row button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  color: rgba(255, 244, 226, 0.64);
  background: transparent;
  padding: 0;
  font-size: 0.72rem;
}

.theme-orb-row button > span {
  display: block;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 244, 226, 0.12);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.theme-orb-row button.active > span,
.theme-orb-row button:hover > span {
  border-color: rgba(255, 226, 187, 0.8);
  box-shadow: 0 0 16px rgba(213, 177, 109, 0.22);
  transform: scale(1.07);
}

.theme-orb-row button svg {
  position: absolute;
  right: 1px;
  top: 27px;
  border-radius: 999px;
  color: #2a1c13;
  background: rgba(255, 226, 187, 0.9);
  padding: 1px;
}

.theme-orb-row em {
  font-style: normal;
}

.segmented-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 2px;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 5px;
}

.segmented-row button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.72);
  background: transparent;
  padding: 0 13px;
}

.segmented-row button.active {
  border-color: rgba(255, 226, 187, 0.28);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.16);
}

.option-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 5px;
}

.option-button-row button {
  min-height: 25px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.7);
  background: transparent;
  padding: 0 11px;
  font-size: 0.76rem;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.option-button-row button:hover,
.option-button-row button.active {
  border-color: rgba(255, 226, 187, 0.34);
  color: #fff8ee;
  background: rgba(255, 214, 151, 0.16);
}

.option-button-row button.active {
  transform: translateY(-1px);
}

.even-option-row {
  display: grid;
  grid-template-columns: repeat(var(--option-count, 2), minmax(0, 1fr));
}

.even-option-row button {
  width: 100%;
  padding: 0 8px;
}

.font-style-row {
  --option-count: 2;
}

.font-size-row {
  --option-count: 3;
}

.settings-switch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
}

.settings-grid label span,
.settings-grid .settings-field > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.settings-grid input[type="file"] {
  min-height: 38px;
  color: rgba(255, 244, 226, 0.68);
}

.background-upload-card {
  position: relative;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px dashed rgba(255, 226, 187, 0.26);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.82);
  background:
    linear-gradient(135deg, rgba(255, 244, 226, 0.08), rgba(255, 214, 151, 0.06)),
    rgba(255, 255, 255, 0.035);
  padding: 0 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.background-upload-card:hover {
  border-color: rgba(255, 226, 187, 0.48);
  background:
    linear-gradient(135deg, rgba(255, 244, 226, 0.12), rgba(255, 214, 151, 0.1)),
    rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
}

.background-upload-card strong {
  font-size: 0.82rem;
}

.visual-inline-row .background-upload-card {
  min-height: 32px;
  padding: 0 13px;
}

.background-upload-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cinema-layout-control {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cinema-layout-control > span {
  color: rgba(255, 244, 226, 0.62);
  font-size: 0.72rem;
  white-space: nowrap;
}

.cinema-layout-cycle {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 244, 226, 0.1), rgba(255, 214, 151, 0.08)),
    rgba(255, 255, 255, 0.04);
  padding: 0 12px 0 9px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.cinema-layout-cycle:hover {
  border-color: rgba(255, 226, 187, 0.36);
  color: #fff8ee;
  background:
    linear-gradient(135deg, rgba(255, 244, 226, 0.14), rgba(255, 214, 151, 0.12)),
    rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.cinema-layout-cycle svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.cinema-layout-cycle strong {
  font-size: 0.76rem;
  line-height: 1;
  white-space: nowrap;
}

.compact-option-row {
  width: max-content;
  max-width: 100%;
}

.stream-row-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 226, 187, 0.08);
  padding-top: 16px;
}

.stream-row-card > div {
  display: grid;
  gap: 2px;
}

.stream-row-card strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 244, 226, 0.88);
  font-size: 0.84rem;
}

.stream-row-card small {
  color: rgba(248, 239, 228, 0.42);
  font-size: 0.7rem;
}

.reply-aesthetics-card {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(255, 226, 187, 0.08);
  padding-top: 15px;
}

.reply-aesthetics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reply-aesthetics-copy {
  display: grid;
  gap: 3px;
}

.reply-aesthetics-title-line {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 9px;
}

.reply-aesthetics-title-line .mini-toggle {
  flex: 0 0 auto;
}

.reply-aesthetics-copy strong {
  color: color-mix(in srgb, var(--kx-text-main) 86%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
}

.reply-aesthetics-copy small {
  color: color-mix(in srgb, var(--kx-text-main) 48%, transparent);
  font-size: 0.68rem;
  line-height: 1.55;
}

.reply-emoji-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.reply-emoji-row > span {
  color: color-mix(in srgb, var(--kx-text-main) 50%, transparent);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reply-emoji-row button {
  display: inline-flex;
  min-height: 28px;
  min-width: 2.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 226, 187, 0.13);
  border-radius: 999px;
  color: color-mix(in srgb, var(--kx-text-main) 58%, transparent);
  background: rgba(255, 255, 255, 0.045);
  padding: 0 0.58rem;
  font-size: 0.68rem;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.reply-emoji-row button.active,
.reply-emoji-row button:hover {
  border-color: color-mix(in srgb, var(--kx-primary) 50%, transparent);
  color: var(--kx-primary);
  background: color-mix(in srgb, var(--kx-primary) 12%, transparent);
}

.hud-toggle-card {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(255, 226, 187, 0.08);
  padding-top: 15px;
}

.hud-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hud-toggle-row button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 226, 187, 0.13);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.56);
  background: rgba(255, 255, 255, 0.045);
  padding: 0 11px;
  font-size: 0.74rem;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.hud-toggle-row button.active,
.hud-toggle-row button:hover {
  border-color: rgba(218, 170, 95, 0.5);
  color: rgba(255, 226, 187, 0.94);
  background: rgba(218, 170, 95, 0.12);
}

.mini-toggle {
  position: relative;
  width: 34px;
  height: 18px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--kx-primary, #dcbda8) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-text-main, #fff4e2) 12%, transparent);
  padding: 0;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mini-toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-panel-bg, #fff) 88%, white 12%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease;
}

.mini-toggle.active {
  border-color: color-mix(in srgb, var(--kx-primary, #dcbda8) 72%, transparent);
  background: var(--kx-primary, #dcbda8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kx-primary, #dcbda8) 12%, transparent);
}

.mini-toggle.active span {
  transform: translateX(16px);
}

.settings-route-shell[data-theme="white-gold"] .mini-toggle,
.settings-route-shell[data-theme="custom"] .mini-toggle,
.cinema-shell[data-theme="white-gold"] .mini-toggle,
.cinema-shell[data-theme="custom"] .mini-toggle {
  border-color: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 34%, var(--kx-border, transparent));
  background: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 8%, var(--kx-panel-soft, transparent));
}

.settings-route-shell[data-theme="white-gold"] .mini-toggle:not(.active) span,
.settings-route-shell[data-theme="custom"] .mini-toggle:not(.active) span,
.cinema-shell[data-theme="white-gold"] .mini-toggle:not(.active) span,
.cinema-shell[data-theme="custom"] .mini-toggle:not(.active) span {
  background: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 56%, white 44%);
}

.settings-route-shell[data-theme="white-gold"] .mini-toggle.active,
.settings-route-shell[data-theme="custom"] .mini-toggle.active {
  border-color: transparent;
  background: #a694bc;
  box-shadow: none;
}

.settings-route-shell[data-theme="white-gold"] .mini-toggle.active span,
.settings-route-shell[data-theme="custom"] .mini-toggle.active span {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(79, 67, 101, 0.2);
}

.settings-page .settings-footer {
  margin-top: 0;
}

.cinema-shell[data-theme="white-gold"] .settings-page-title span,
.cinema-shell[data-theme="white-gold"] .settings-section-heading span,
.cinema-shell[data-theme="white-gold"] .settings-hint,
.cinema-shell[data-theme="white-gold"] .settings-footer,
.cinema-shell[data-theme="white-gold"] .settings-switch,
.cinema-shell[data-theme="white-gold"] .settings-grid label {
  color: rgba(70, 55, 41, 0.68);
}

.cinema-shell[data-theme="white-gold"] .provider-tabs button,
.cinema-shell[data-theme="white-gold"] .option-button-row button,
.cinema-shell[data-theme="white-gold"] .hud-toggle-row button {
  color: rgba(70, 55, 41, 0.72);
}

.cinema-shell[data-theme="white-gold"] .hud-toggle-row button.active,
.cinema-shell[data-theme="white-gold"] .hud-toggle-row button:hover {
  color: rgba(84, 61, 31, 0.95);
  background: rgba(199, 154, 80, 0.12);
}

.cinema-shell[data-theme="white-gold"] .provider-tabs button.active,
.cinema-shell[data-theme="white-gold"] .provider-tabs button:hover,
.cinema-shell[data-theme="white-gold"] .option-button-row button.active,
.cinema-shell[data-theme="white-gold"] .option-button-row button:hover {
  border-color: rgba(149, 115, 63, 0.38);
  color: #463729;
  background: rgba(181, 152, 105, 0.18);
}

.cinema-shell[data-theme="white-gold"] .option-button-row,
.cinema-shell[data-theme="white-gold"] .provider-tabs {
  border-color: rgba(149, 115, 63, 0.18);
  background: rgba(255, 255, 255, 0.45);
}

.cinema-shell[data-theme="white-gold"] .settings-grid input,
.cinema-shell[data-theme="white-gold"] .settings-grid select,
.cinema-shell[data-theme="white-gold"] textarea {
  color: #463729;
  background: rgba(255, 255, 255, 0.68);
}

.cinema-shell[data-theme="white-gold"] .background-upload-card {
  border-color: rgba(149, 115, 63, 0.24);
  color: #463729;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(221, 196, 151, 0.16)),
    rgba(255, 255, 255, 0.36);
}

.cinema-shell[data-theme="white-gold"] .visual-block-title,
.cinema-shell[data-theme="white-gold"] .stream-row-card strong {
  color: rgba(70, 55, 41, 0.82);
}

.cinema-shell[data-theme="white-gold"] .stream-row-card small {
  color: rgba(70, 55, 41, 0.52);
}

.cinema-shell[data-theme="white-gold"] .visual-cortex-card {
  border-color: rgba(149, 115, 63, 0.14);
  background: rgba(255, 255, 255, 0.28);
}

.cinema-shell[data-theme="white-gold"] .settings-grid input::placeholder {
  color: rgba(70, 55, 41, 0.42);
}

.panel-close {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  margin-left: auto;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: #fff4e4;
  background: rgba(255, 255, 255, 0.06);
}

textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid rgba(255, 226, 187, 0.2);
  border-radius: 8px;
  color: #fff8ee;
  background: rgba(255, 255, 255, 0.06);
  padding: 10px 12px;
  line-height: 1.5;
}

.chat-list {
  display: grid;
  max-height: 360px;
  gap: 10px;
  overflow: auto;
  margin-top: 14px;
}

.chat-bubble {
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.55;
}

.chat-bubble.user {
  justify-self: end;
  max-width: 88%;
  background: rgba(255, 207, 150, 0.16);
}

.chat-bubble.companion {
  background: rgba(139, 177, 169, 0.16);
}

.chat-bubble.companion.is-streaming {
  width: min(62ch, 100%);
  min-width: min(280px, 100%);
}

.cinema-companion-markdown,
.cottage-markdown {
  display: grid;
  gap: 0.62em;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Inter, "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  line-height: 1.78;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.cinema-companion-markdown > :first-child,
.cottage-markdown > :first-child {
  margin-top: 0;
}

.cinema-companion-markdown > :last-child,
.cottage-markdown > :last-child {
  margin-bottom: 0;
}

.cinema-companion-markdown p,
.cottage-markdown p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.78;
  letter-spacing: 0;
}

.cinema-companion-markdown h1,
.cinema-companion-markdown h2,
.cinema-companion-markdown h3,
.cinema-companion-markdown h4,
.cinema-companion-markdown h5,
.cinema-companion-markdown h6,
.cottage-markdown h1,
.cottage-markdown h2,
.cottage-markdown h3,
.cottage-markdown h4,
.cottage-markdown h5,
.cottage-markdown h6 {
  margin: 0.08em 0 -0.08em;
  color: inherit;
  font: inherit;
  font-size: 1.02em;
  font-weight: 600;
  line-height: 1.72;
  letter-spacing: 0;
}

.cinema-companion-markdown strong,
.cottage-markdown strong {
  color: inherit;
  font-weight: 600;
  font-synthesis: none;
  -webkit-text-stroke: 0 currentColor;
}

.cinema-companion-markdown em {
  color: inherit;
}

.cottage-markdown em {
  font-style: normal;
  opacity: 0.92;
}

.cinema-companion-markdown hr,
.cottage-markdown hr {
  width: 100%;
  margin: 0.72em 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

@media (max-width: 620px), (pointer: coarse) {
  .cinema-companion-markdown strong,
  .cottage-markdown strong,
  .chronicle-reading-body strong {
    font-weight: 500;
  }
}

.cinema-companion-markdown ul,
.cinema-companion-markdown ol,
.cottage-markdown ul,
.cottage-markdown ol {
  margin: 0;
  padding-left: 1.25em;
}

.cinema-companion-markdown li + li,
.cottage-markdown li + li {
  margin-top: 0.25em;
}

.cinema-companion-markdown blockquote,
.cottage-markdown blockquote {
  margin: 0;
  border-left: 2px solid rgba(255, 226, 187, 0.28);
  color: rgba(255, 244, 226, 0.72);
  padding-left: 10px;
}

.cinema-companion-markdown code,
.cottage-markdown code {
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.16);
  padding: 0.1em 0.35em;
}

.cinema-companion-markdown pre,
.cottage-markdown pre {
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  padding: 10px;
}

.cinema-companion-markdown pre code,
.cottage-markdown pre code {
  border: 0;
  background: transparent;
  padding: 0;
}

.frame-preview {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.lower-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 0;
}

.lower-grid.pop-panel {
  position: fixed;
  left: 50%;
  bottom: clamp(76px, 9svh, 128px);
  z-index: 46;
  width: min(680px, calc(100vw - 44px));
  max-height: min(68svh, 680px);
  overflow: auto;
  transform: translateX(-50%);
}

.companion-plan-panel {
  position: relative;
  z-index: 46;
  width: min(420px, calc(100vw - 44px));
  max-height: min(56svh, 560px);
  overflow: auto;
  margin: 8px auto 0;
}

.companion-plan-panel .panel {
  background: linear-gradient(135deg, rgba(114, 76, 53, 0.36), rgba(255, 244, 226, 0.12));
  backdrop-filter: blur(9px) saturate(1.08);
}

.companion-map-panel {
  position: relative;
  z-index: 46;
  width: min(288px, calc(100vw - 44px));
  max-height: min(288px, 56svh);
  margin: 8px auto 0;
}

.companion-map-popover {
  overflow-y: auto;
  max-height: min(288px, 56svh);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(9, 8, 7, 0.76);
  padding: 11px;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.companion-map-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.companion-map-kicker,
.companion-map-help {
  margin: 0;
}

.companion-map-kicker {
  color: rgba(255, 255, 255, 0.43);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.companion-map-help {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.62rem;
}

.companion-map-panel .panel-close {
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.06);
}

.companion-map-list {
  display: grid;
  gap: 4px;
}

.companion-map-row {
  display: block;
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.045);
  padding: 7px 10px;
  text-align: left;
  transition: background 160ms ease;
}

.companion-map-row:hover,
.companion-map-row.active {
  background: rgba(255, 255, 255, 0.1);
}

.companion-map-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.companion-map-time {
  color: rgba(255, 226, 187, 0.72);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.62rem;
}

.companion-map-status {
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.56rem;
}

.companion-map-status.pending {
  color: rgba(255, 226, 187, 0.56);
}

.companion-map-cue {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.62rem;
  line-height: 1rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.companion-map-row:hover .companion-map-cue {
  color: rgba(255, 255, 255, 0.7);
}

.panel-title-meta {
  margin-left: auto;
  color: rgba(248, 239, 228, 0.42);
  font-size: 0.72rem;
  font-weight: 500;
}

.panel-title-meta + .panel-close {
  margin-left: 4px;
}

.companion-option-card {
  margin-top: 9px;
  border: 1px solid rgba(255, 226, 187, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 8px;
}

.companion-option-card.darker {
  background: rgba(85, 53, 38, 0.18);
}

.option-label {
  margin-bottom: 7px;
  color: rgba(248, 239, 228, 0.38);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pill-grid {
  display: grid;
  gap: 6px;
}

.mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.density-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pill-grid button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.58);
  background: rgba(255, 255, 255, 0.07);
  padding: 0 8px;
  font-size: 0.74rem;
}

.pill-grid button:hover,
.pill-grid button.active {
  border-color: rgba(255, 244, 226, 0.18);
  color: #fff8ee;
  background: rgba(255, 255, 255, 0.15);
}

.pill-grid button.active.warm {
  border-color: rgba(255, 218, 168, 0.26);
  color: #fff0d2;
  background: rgba(255, 214, 151, 0.16);
}

.companion-generate {
  min-height: 36px;
  margin-top: 11px;
  border-radius: 999px;
  font-size: 0.8rem;
}

.companion-generating-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 8px auto 0;
  border: 1px solid rgba(255, 238, 213, 0.14);
  border-radius: 999px;
  background: rgba(47, 31, 24, 0.46);
  padding: 6px 12px;
  color: rgba(255, 241, 220, 0.72);
  font-size: 0.7rem;
  line-height: 1;
  backdrop-filter: blur(7px);
}

.companion-generating-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.companion-generating-dots i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  animation: companionGeneratingDotBounce 0.92s ease-in-out infinite;
}

.companion-generating-dots i:nth-child(2) {
  animation-delay: 0.14s;
}

.companion-generating-dots i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes companionGeneratingDotBounce {
  0%,
  80%,
  100% {
    opacity: 0.42;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.mini-warning {
  margin-top: 8px;
  color: rgba(255, 225, 179, 0.68);
  font-size: 0.72rem;
  text-align: center;
}

.playlist-panel .panel {
  background: linear-gradient(135deg, rgba(96, 62, 44, 0.48), rgba(255, 244, 226, 0.1));
  backdrop-filter: blur(10px) saturate(1.08);
}

.record-list,
.plan-list {
  display: grid;
  gap: 12px;
}

.star-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 9px;
}

.record-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 9px;
}

.record-row .record-thumb {
  display: grid;
  position: relative;
  overflow: hidden;
  width: 92px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 8px;
  color: rgba(255, 244, 226, 0.48);
  background: rgba(0, 0, 0, 0.26);
  padding: 0;
  text-align: center;
}

.record-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.record-thumb-button span {
  position: absolute;
  inset: auto 6px 5px;
  border-radius: 999px;
  color: rgba(255, 250, 242, 0.88);
  background: rgba(0, 0, 0, 0.46);
  padding: 2px 0;
  font-size: 0.58rem;
  opacity: 0;
  transition: opacity 160ms ease;
}

.record-thumb-button:hover span {
  opacity: 1;
}

.record-row button,
.plan-list button,
.star-map button {
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 8px;
  color: #fff4e4;
  background: rgba(255, 255, 255, 0.075);
  padding: 9px;
  text-align: left;
}

.record-main,
.plan-list button,
.star-map button {
  display: grid;
  gap: 4px;
}

.record-row > .record-main {
  min-width: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.record-row > .record-main:focus-visible {
  outline: 1px solid rgba(255, 226, 187, 0.42);
  outline-offset: 4px;
}

.record-title-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.record-title-line strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-title-line .record-title-edit {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  cursor: text;
  padding: 0;
  font: inherit;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-title-line .record-title-edit:hover {
  color: #fff8ee;
  text-decoration: underline;
  text-decoration-color: rgba(255, 226, 187, 0.28);
  text-underline-offset: 3px;
}

.record-title-input {
  min-width: 0;
  width: min(260px, 100%);
  border: 1px solid rgba(255, 226, 187, 0.3);
  border-radius: 10px;
  color: #fff8ee;
  background: rgba(28, 19, 15, 0.72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  padding: 6px 9px;
  font: inherit;
  font-weight: 800;
  line-height: 1.25;
}

.record-title-input:focus {
  border-color: rgba(255, 226, 187, 0.52);
  outline: 0;
}

.record-title-line em {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.48);
  background: rgba(255, 244, 226, 0.07);
  padding: 2px 6px;
  font-size: 0.58rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

.record-title-line em.current {
  color: rgba(255, 244, 226, 0.78);
  background: rgba(255, 210, 151, 0.16);
}

.record-row small {
  color: rgba(248, 239, 228, 0.42);
  font-size: 0.72rem;
}

.record-meta {
  overflow: hidden;
  color: rgba(248, 239, 228, 0.54);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-progress {
  display: block;
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 244, 226, 0.12);
}

.record-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 219, 170, 0.62);
}

.record-resume {
  white-space: nowrap;
  border-color: rgba(255, 226, 187, 0.24) !important;
  background: rgba(255, 244, 226, 0.12) !important;
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  width: 196px;
}

.record-actions button {
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 0.72rem;
  text-align: center;
}

.record-actions .danger {
  color: rgba(255, 209, 199, 0.72);
  background: rgba(180, 55, 40, 0.12);
}

.playlist-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 226, 187, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  padding: 28px 18px;
  text-align: center;
}

.playlist-empty strong {
  color: #fff7eb;
}

.playlist-footnote {
  margin-top: 12px;
  border: 1px solid rgba(255, 226, 187, 0.08);
  border-radius: 8px;
  color: rgba(248, 239, 228, 0.46);
  background: rgba(0, 0, 0, 0.12);
  padding: 9px 11px;
  font-size: 0.72rem;
  line-height: 1.6;
}

.chat-page-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 18px;
  width: min(1280px, calc(100vw - 36px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 76px 0 28px;
  color: #fff4e4;
}

.chat-page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 219, 170, 0.13), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(185, 118, 97, 0.12), transparent 34%),
    linear-gradient(135deg, #17120f, #281a14 48%, #15100d);
}

.chat-session-sidebar,
.chat-window-panel {
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(102, 68, 48, 0.36), rgba(255, 244, 226, 0.09));
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 20px 48px rgba(31, 18, 12, 0.24);
}

.chat-session-sidebar {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: min(760px, calc(100svh - 104px));
  overflow: hidden;
}

.chat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 226, 187, 0.1);
  padding: 14px;
}

.chat-sidebar-head p {
  margin: 0;
  color: rgba(248, 239, 228, 0.48);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chat-sidebar-head h1 {
  margin: 3px 0 0;
  font-size: 1.05rem;
}

.chat-sidebar-head button,
.chat-head-actions button,
.long-chat-bubble button {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.72);
  background: rgba(255, 255, 255, 0.08);
}

.chat-sidebar-head button,
.chat-head-actions button {
  width: 34px;
  height: 34px;
}

.chat-sidebar-head button:hover,
.chat-head-actions button:hover,
.long-chat-bubble button:hover {
  color: #fff8ef;
  background: rgba(255, 244, 226, 0.15);
}

.chat-session-list {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 12px;
}

.chat-session-list button {
  border: 1px solid rgba(255, 226, 187, 0.1);
  border-radius: 8px;
  color: rgba(255, 244, 226, 0.64);
  background: rgba(255, 255, 255, 0.045);
  padding: 10px;
  text-align: left;
}

.chat-session-list button:hover,
.chat-session-list button.active {
  color: #fff6e9;
  background: rgba(255, 244, 226, 0.12);
}

.chat-session-list strong,
.chat-session-list span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-session-list span {
  margin-top: 4px;
  color: rgba(248, 239, 228, 0.42);
  font-size: 0.72rem;
}

.chat-window-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: min(760px, calc(100svh - 104px));
  overflow: hidden;
}

.chat-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 226, 187, 0.1);
  padding: 13px 14px;
}

.chat-title-editor {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
}

.chat-title-editor input {
  min-width: 0;
  width: 100%;
  border: 0;
  color: #fff7ed;
  background: transparent;
  font-weight: 700;
  outline: none;
}

.chat-head-actions {
  display: flex;
  gap: 8px;
}

.chat-message-list {
  display: grid;
  align-content: start;
  gap: 13px;
  overflow: auto;
  padding: 18px;
}

.long-chat-message {
  display: flex;
}

.long-chat-message.user {
  justify-content: flex-end;
}

.long-chat-message.companion {
  justify-content: flex-start;
}

.long-chat-bubble {
  display: flex;
  max-width: min(74ch, 86%);
  gap: 10px;
  border: 1px solid rgba(255, 226, 187, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 11px 12px;
}

.long-chat-message.user .long-chat-bubble {
  background: rgba(255, 211, 165, 0.14);
}

.long-chat-bubble p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.65;
}

.long-chat-bubble button {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  font-size: 0.82rem;
}

.empty-chat-state {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin: auto;
  max-width: 420px;
  color: rgba(255, 244, 226, 0.56);
  text-align: center;
}

.empty-chat-state strong {
  color: rgba(255, 248, 237, 0.82);
}

.chat-input-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border-top: 1px solid rgba(255, 226, 187, 0.1);
  padding: 12px;
}

.chat-input-bar textarea {
  min-height: 42px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 8px;
  color: #fff7eb;
  background: rgba(0, 0, 0, 0.16);
  padding: 10px 12px;
  outline: none;
}

.chat-input-bar button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.22);
  border-radius: 8px;
  color: #fff7eb;
  background: rgba(255, 244, 226, 0.12);
  padding: 0 15px;
}

.chat-input-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.chat-error {
  position: absolute;
  right: 18px;
  bottom: 18px;
  border: 1px solid rgba(255, 145, 120, 0.28);
  border-radius: 8px;
  color: #ffe5de;
  background: rgba(87, 30, 22, 0.78);
  padding: 10px 12px;
  font-size: 0.82rem;
}

.cottage-chat-shell {
  position: relative;
  display: flex;
  min-height: 100svh;
  justify-content: center;
  overflow: hidden;
  padding: 58px 0 0;
  color: #fff4e4;
}

.cottage-chat-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 230, 186, 0.16), transparent 26%),
    radial-gradient(circle at 80% 82%, rgba(180, 112, 92, 0.16), transparent 34%),
    linear-gradient(135deg, #16100d, #271912 46%, #130f0c);
}

.cottage-chat-bg::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 226, 187, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 226, 187, 0.04) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.18;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.cottage-chat-shell[data-theme="black-gold"] .cottage-chat-bg {
  background:
    radial-gradient(circle at 20% 12%, rgba(213, 177, 109, 0.12), transparent 26%),
    radial-gradient(circle at 80% 82%, rgba(88, 72, 45, 0.14), transparent 34%),
    linear-gradient(135deg, #050505, #14100c 48%, #080706);
}

.cottage-chat-shell[data-theme="black-gold"] .cottage-chat-main,
.cottage-chat-shell[data-theme="black-gold"] .cottage-chat-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 226, 187, 0.055), rgba(255, 226, 187, 0.018)),
    rgba(8, 8, 8, 0.78);
}

.cottage-chat-shell[data-theme="black-gold"] .cottage-message-card {
  background: rgba(255, 255, 255, 0.055);
}

.cottage-chat-shell[data-theme="black-gold"] .cottage-message-row.user .cottage-message-card {
  background: rgba(255, 226, 187, 0.1);
}

.cottage-chat-shell[data-theme="white-gold"] {
  color: #463729;
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-chat-bg {
  background:
    radial-gradient(circle at 20% 12%, rgba(198, 160, 88, 0.16), transparent 26%),
    radial-gradient(circle at 80% 82%, rgba(221, 196, 151, 0.2), transparent 34%),
    linear-gradient(135deg, #f5f3ec, #e8edf4 50%, #f7f3e8);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-chat-main,
.cottage-chat-shell[data-theme="white-gold"] .cottage-chat-sidebar {
  border-color: rgba(149, 115, 63, 0.18);
  color: #463729;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(246, 235, 218, 0.36)),
    rgba(255, 255, 255, 0.46);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-session-search,
.cottage-chat-shell[data-theme="white-gold"] .cottage-message-card,
.cottage-chat-shell[data-theme="white-gold"] .cottage-composer,
.cottage-chat-shell[data-theme="white-gold"] .cottage-attachment-menu {
  border-color: rgba(149, 115, 63, 0.18);
  color: #463729;
  background: rgba(255, 255, 255, 0.58);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-message-row.user .cottage-message-card {
  background: rgba(221, 196, 151, 0.24);
}

.cottage-chat-shell[data-theme="white-gold"] input,
.cottage-chat-shell[data-theme="white-gold"] textarea {
  color: #463729;
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-message-hud,
.cottage-chat-shell[data-theme="white-gold"] .cottage-message-actions-bar,
.cottage-chat-shell[data-theme="white-gold"] .cottage-session-main span,
.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-title p {
  color: rgba(70, 55, 41, 0.52);
}

.cottage-chat-shell[data-theme="pink-mocha"] .cottage-chat-bg {
  background:
    radial-gradient(circle at 20% 12%, rgba(181, 140, 140, 0.18), transparent 26%),
    radial-gradient(circle at 80% 82%, rgba(226, 218, 220, 0.12), transparent 34%),
    linear-gradient(135deg, #42382e, #312a21 52%, #221c16);
}

.cottage-chat-shell[data-theme="pink-mocha"] .cottage-chat-main,
.cottage-chat-shell[data-theme="pink-mocha"] .cottage-chat-sidebar {
  background:
    linear-gradient(180deg, rgba(226, 218, 220, 0.07), rgba(181, 140, 140, 0.035)),
    rgba(49, 42, 33, 0.78);
}

.cottage-chat-shell[data-theme="custom"] {
  color: #4f4365;
}

.cottage-chat-shell[data-theme="custom"] .cottage-chat-bg {
  background:
    radial-gradient(circle at 18% 12%, rgba(166, 148, 188, 0.22), transparent 28%),
    radial-gradient(circle at 78% 84%, rgba(220, 189, 168, 0.16), transparent 34%),
    linear-gradient(135deg, #efe9f2, #fbf9fc 52%, #e2d8e9);
}

.cottage-chat-shell[data-theme="custom"] .cottage-chat-main,
.cottage-chat-shell[data-theme="custom"] .cottage-chat-sidebar {
  border-color: rgba(143, 127, 162, 0.2);
  color: #4f4365;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(231, 218, 241, 0.34)),
    rgba(251, 249, 252, 0.58);
}

.cottage-chat-shell[data-theme="custom"] .cottage-session-search,
.cottage-chat-shell[data-theme="custom"] .cottage-message-card,
.cottage-chat-shell[data-theme="custom"] .cottage-composer,
.cottage-chat-shell[data-theme="custom"] .cottage-attachment-menu {
  border-color: rgba(143, 127, 162, 0.2);
  color: #4f4365;
  background: rgba(255, 255, 255, 0.58);
}

.cottage-chat-shell[data-theme="custom"] .cottage-message-row.user .cottage-message-card {
  background: rgba(166, 148, 188, 0.20);
}

.cottage-chat-shell[data-theme="custom"] input,
.cottage-chat-shell[data-theme="custom"] textarea {
  color: #4f4365;
}

.cottage-chat-shell[data-theme="custom"] .cottage-message-hud,
.cottage-chat-shell[data-theme="custom"] .cottage-message-actions-bar,
.cottage-chat-shell[data-theme="custom"] .cottage-session-main span,
.cottage-chat-shell[data-theme="custom"] .cottage-sidebar-title p {
  color: rgba(79, 67, 101, 0.52);
}

.cottage-chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 38;
  display: none;
  border: 0;
  background: rgba(22, 15, 12, 0.08);
}

.cottage-chat-sidebar {
  position: fixed;
  top: 58px;
  bottom: 0;
  left: 0;
  z-index: 45;
  display: grid;
  width: min(286px, 100vw);
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  overflow: visible;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 8px;
  background: rgba(53, 35, 26, 0.78);
  backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: 0 20px 58px rgba(25, 14, 10, 0.32);
  transform: translateX(calc(-100% - 30px));
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.cottage-chat-sidebar.is-open {
  transform: translateX(0);
}

.cottage-sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 226, 187, 0.08);
  padding: 13px 14px 12px;
  font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

.cottage-sidebar-title p {
  margin: 0;
  color: rgba(248, 239, 228, 0.48);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.cottage-sidebar-title h1 {
  margin: 3px 0 0;
  color: rgba(255, 248, 237, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
}

.cottage-sidebar-title button,
.cottage-chat-actions button,
.cottage-sidebar-toggle,
.cottage-session-search button {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.68);
  background: rgba(255, 255, 255, 0.07);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.cottage-sidebar-title button,
.cottage-chat-actions button,
.cottage-sidebar-toggle {
  width: 34px;
  height: 34px;
}

.cottage-sidebar-title .cottage-sidebar-close {
  width: 27px;
  height: 27px;
  border-color: rgba(255, 226, 187, 0.08);
  color: rgba(255, 244, 226, 0.46);
  background: rgba(255, 255, 255, 0.025);
}

.cottage-sidebar-title .cottage-sidebar-close:hover {
  border-color: rgba(255, 226, 187, 0.22);
  color: rgba(255, 248, 237, 0.82);
  background: rgba(255, 244, 226, 0.09);
}

.cottage-sidebar-toggle {
  position: relative;
  overflow: hidden;
  transform: translateX(0);
  box-shadow: inset 0 0 0 1px rgba(var(--kx-primary-rgb, 176, 141, 85), 0);
}

.cottage-sidebar-toggle-bars {
  position: relative;
  z-index: 1;
  display: flex;
  width: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.cottage-sidebar-toggle-bars i {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: width 220ms ease, opacity 160ms ease, transform 220ms ease;
}

.cottage-sidebar-toggle-bars i:first-child {
  width: 20px;
}

.cottage-sidebar-toggle-bars i:last-child {
  width: 12px;
}

.cottage-sidebar-toggle::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(var(--kx-primary-rgb, 176, 141, 85), 0.22), transparent 66%);
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 180ms ease, transform 180ms ease;
}

.cottage-sidebar-toggle svg {
  position: relative;
  z-index: 1;
  transition: transform 180ms ease;
}

.cottage-sidebar-toggle:hover {
  transform: translateX(-1px);
}

.cottage-sidebar-toggle:hover::after {
  opacity: 1;
  transform: scale(1);
}

.cottage-sidebar-toggle.is-open {
  border-color: rgba(255, 226, 187, 0.1);
  color: rgba(255, 244, 226, 0.52);
  background: rgba(255, 255, 255, 0.035);
}

.cottage-sidebar-toggle.is-open svg {
  opacity: 0.78;
}

.cottage-sidebar-toggle:hover .cottage-sidebar-toggle-bars i:last-child,
.cottage-chat-shell.has-sidebar .cottage-sidebar-toggle-bars i:last-child {
  width: 20px;
}

.cottage-chat-shell.has-sidebar .cottage-sidebar-toggle-bars i:first-child {
  width: 15px;
}

.cottage-sidebar-title button:hover,
.cottage-chat-actions button:hover,
.cottage-sidebar-toggle:hover,
.cottage-session-search button:hover {
  border-color: rgba(255, 226, 187, 0.28);
  color: #fff9ef;
  background: rgba(255, 244, 226, 0.13);
}

.cottage-sidebar-actions {
  display: flex;
  gap: 7px;
  padding: 12px 14px 10px;
}

.cottage-sidebar-actions button {
  display: inline-flex;
  min-height: 34px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.2);
  border-radius: 8px;
  color: rgba(255, 230, 192, 0.92);
  background: rgba(255, 230, 192, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.cottage-sidebar-actions .cottage-new-session-button { min-width: 0; flex: 1; }
.cottage-sidebar-actions .cottage-new-session-options-button {
  width: 34px;
  flex: 0 0 34px;
  justify-content: center;
  padding-inline: 0;
}
.cottage-sidebar-actions .cottage-import-session-button { width: auto; flex: 0 0 auto; padding-inline: 10px; }

.cottage-sidebar-actions button:hover {
  color: #2b1d15;
  background: rgba(255, 226, 187, 0.82);
}

.cottage-session-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 14px 12px;
  border: 1px solid rgba(255, 226, 187, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 244, 226, 0.32);
}

.cottage-session-search svg {
  margin-left: 10px;
  flex: 0 0 auto;
}

.cottage-session-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  color: rgba(255, 248, 237, 0.86);
  background: transparent;
  padding: 9px 8px;
  font-size: 0.78rem;
  outline: none;
}

.cottage-session-search input::placeholder {
  color: rgba(255, 244, 226, 0.28);
}

.cottage-session-search button {
  width: 24px;
  height: 24px;
  margin-right: 6px;
}

.cottage-session-list {
  display: grid;
  align-content: start;
  gap: 7px;
  overflow: auto;
  padding: 2px 10px 12px;
  font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

.cottage-session-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 244, 226, 0.58);
  background: transparent;
  padding: 6px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cottage-session-item:hover,
.cottage-session-item.active {
  border-color: rgba(255, 226, 187, 0.13);
  color: rgba(255, 248, 237, 0.92);
  background: rgba(255, 255, 255, 0.07);
}

.cottage-session-section {
  display: grid;
  gap: 6px;
  margin-top: 5px;
}

.cottage-session-section-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.1);
  border-radius: 8px;
  color: rgba(255, 226, 187, 0.78);
  background: rgba(255, 226, 187, 0.055);
  padding: 8px 10px;
  font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.cottage-session-section-toggle:hover {
  border-color: rgba(255, 226, 187, 0.22);
  color: rgba(255, 248, 237, 0.9);
  background: rgba(255, 226, 187, 0.09);
}

.cottage-session-section-toggle > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.cottage-session-section-toggle em {
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  padding: 1px 6px;
  color: rgba(255, 226, 187, 0.66);
  font-size: 0.58rem;
  font-style: normal;
}

.cottage-session-section-list {
  display: grid;
  gap: 7px;
  padding-left: 8px;
}

.cottage-session-main {
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  padding: 4px;
  text-align: left;
}

.cottage-session-main strong,
.cottage-session-main span,
.cottage-session-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cottage-session-main strong {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0;
}

.cottage-session-main span {
  margin-top: 4px;
  color: rgba(248, 239, 228, 0.36);
  font-size: 0.68rem;
}

.cottage-session-main small {
  margin-top: 3px;
  color: rgba(248, 239, 228, 0.22);
  font-size: 0.62rem;
  line-height: 1.35;
}

.cottage-session-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: start;
  gap: 4px;
  margin-top: 3px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(4px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.cottage-session-item:hover .cottage-session-actions,
.cottage-session-item:focus-within .cottage-session-actions,
.cottage-session-item.show-actions .cottage-session-actions {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.cottage-session-actions button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.075);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.38);
  background: rgba(255, 255, 255, 0.035);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.cottage-session-actions button:hover {
  border-color: rgba(255, 226, 187, 0.24);
  color: rgba(255, 248, 237, 0.9);
  background: rgba(255, 244, 226, 0.13);
}

.cottage-session-actions button:last-child:hover {
  border-color: rgba(255, 145, 120, 0.24);
  color: rgba(255, 199, 186, 0.95);
  background: rgba(255, 145, 120, 0.12);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-session-actions button {
  border-color: rgba(149, 115, 63, 0.13);
  color: rgba(92, 68, 43, 0.44);
  background: rgba(181, 152, 105, 0.07);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-session-actions button:hover {
  border-color: rgba(149, 115, 63, 0.38);
  color: #5c442b;
  background: rgba(181, 152, 105, 0.22);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-session-actions button:last-child {
  color: rgba(127, 68, 55, 0.58);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-session-actions button:last-child:hover {
  border-color: rgba(127, 68, 55, 0.28);
  color: #7f4437;
  background: rgba(127, 68, 55, 0.12);
}

@media (hover: none), (pointer: coarse) {
  .cottage-session-actions {
    opacity: 0.46;
    pointer-events: auto;
    transform: none;
  }

  .cottage-session-item.active .cottage-session-actions,
  .cottage-session-item.show-actions .cottage-session-actions {
    opacity: 0.78;
  }

  .cottage-session-actions button {
    width: 23px;
    height: 23px;
  }
}

.cottage-session-rename-input {
  min-width: 0;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 7px;
  color: rgba(255, 248, 237, 0.9);
  background: rgba(0, 0, 0, 0.16);
  padding: 8px;
  font-size: 0.82rem;
  outline: none;
}

.cottage-session-empty {
  padding: 30px 10px;
  color: rgba(248, 239, 228, 0.32);
  text-align: center;
  font-size: 0.78rem;
}

.cottage-search-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 1px 4px 4px;
  color: rgba(255, 244, 226, 0.46);
  font-size: 0.7rem;
}

.cottage-search-summary strong {
  color: rgba(255, 232, 197, 0.88);
  font-size: 0.88rem;
}

.cottage-search-group {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 226, 187, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  padding: 7px;
}

.cottage-search-group.is-watch {
  border-color: rgba(var(--color-primary), 0.14);
  background: rgba(var(--color-primary), 0.035);
}

.cottage-search-group-head,
.cottage-search-hit {
  width: 100%;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.cottage-search-group-head {
  display: grid;
  gap: 3px;
  border-radius: 7px;
  padding: 4px 5px;
}

.cottage-search-group-head:hover {
  background: rgba(255, 244, 226, 0.07);
}

.cottage-search-group-head strong,
.cottage-search-group-head span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cottage-search-group-title-line {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.cottage-search-group-title-line em {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 999px;
  padding: 1px 5px;
  color: rgba(255, 226, 187, 0.74);
  font-size: 0.56rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

.cottage-search-group-title-line strong {
  min-width: 0;
}

.cottage-search-group-head strong {
  color: rgba(255, 248, 237, 0.86);
  font-size: 0.78rem;
}

.cottage-search-group-head span {
  color: rgba(248, 239, 228, 0.36);
  font-size: 0.66rem;
}

.cottage-search-group-head small {
  display: block;
  overflow: hidden;
  color: rgba(248, 239, 228, 0.3);
  font-size: 0.65rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cottage-search-hit-list {
  display: grid;
  gap: 5px;
}

.cottage-search-hit {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255, 226, 187, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.09);
  padding: 7px 8px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.cottage-search-hit:hover {
  border-color: rgba(255, 226, 187, 0.2);
  background: rgba(255, 244, 226, 0.08);
}

.cottage-search-hit > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255, 244, 226, 0.5);
  font-size: 0.62rem;
}

.cottage-search-hit > span strong {
  color: rgba(255, 226, 187, 0.78);
  font-weight: 700;
}

.cottage-search-hit p {
  margin: 0;
  color: rgba(255, 248, 237, 0.74);
  font-size: 0.72rem;
  line-height: 1.55;
}

.cottage-search-hit mark {
  border-radius: 4px;
  color: #2c1c12;
  background: rgba(255, 226, 187, 0.86);
  padding: 0 2px;
}

.cottage-chat-main {
  position: relative;
  display: grid;
  width: min(1000px, 100vw);
  height: calc(100svh - 58px);
  grid-template-rows: 44px minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 187, 0.13);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 244, 226, 0.07), rgba(255, 244, 226, 0.03)),
    rgba(35, 24, 18, 0.74);
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 24px 64px rgba(24, 14, 10, 0.32);
}

.cottage-chat-hud {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 226, 187, 0.08);
  padding: 0 12px;
}

.cottage-chat-title {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(255, 226, 187, 0.8);
}

.cottage-chat-title input {
  min-width: 0;
  max-width: min(420px, 64vw);
  border: 0;
  color: rgba(255, 248, 237, 0.92);
  background: transparent;
  text-align: center;
  font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  outline: none;
}

.cottage-chat-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cottage-chat-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.cottage-message-scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px min(6vw, 54px);
}

.cottage-load-older {
  align-self: center;
  min-height: 31px;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.62);
  background: rgba(255, 255, 255, 0.055);
  padding: 0 13px;
  font-size: 0.72rem;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.cottage-load-older:hover {
  border-color: rgba(255, 226, 187, 0.26);
  color: rgba(255, 248, 237, 0.9);
  background: rgba(255, 244, 226, 0.11);
}

.cottage-empty-chat {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: auto;
  max-width: 450px;
  color: rgba(255, 244, 226, 0.5);
  text-align: center;
}

.cottage-empty-chat strong {
  color: rgba(255, 248, 237, 0.84);
  font-size: 0.95rem;
}

.cottage-empty-chat span {
  color: rgba(248, 239, 228, 0.42);
  font-size: 0.78rem;
  line-height: 1.6;
}

.cottage-message-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cottage-message-row.user {
  flex-direction: row-reverse;
}

.cottage-message-avatar {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 226, 187, 0.82);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
}

.cottage-message-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.cottage-message-row.user .cottage-message-avatar {
  color: rgba(76, 48, 33, 0.88);
  background: rgba(255, 226, 187, 0.78);
}

.cottage-message-stack {
  display: grid;
  max-width: min(76ch, 82%);
  gap: 5px;
}

.cottage-message-row.user .cottage-message-stack {
  justify-items: end;
}

.cottage-message-row.companion.is-streaming .cottage-message-stack {
  width: min(68ch, 82%);
  min-width: min(360px, calc(100vw - 132px));
}

.cottage-message-row.companion.is-streaming .cottage-message-card {
  width: 100%;
}

.cottage-message-card {
  position: relative;
  max-width: 100%;
  border: 1px solid rgba(255, 226, 187, 0.13);
  border-radius: 22px 22px 22px 7px;
  color: rgba(255, 248, 237, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045)),
    rgba(42, 29, 22, 0.58);
  padding: 12px 14px 13px;
  box-shadow: 0 14px 34px rgba(20, 12, 8, 0.16);
  backdrop-filter: blur(10px) saturate(1.08);
  font-size: 0.98rem;
  line-height: 1.78;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

.cottage-message-card.is-editing {
  width: min(560px, 82vw);
}

.cottage-message-row.user .cottage-message-card {
  border-color: rgba(255, 226, 187, 0.18);
  border-radius: 22px 22px 7px 22px;
  background:
    linear-gradient(180deg, rgba(255, 226, 187, 0.18), rgba(255, 226, 187, 0.09)),
    rgba(91, 58, 39, 0.62);
}

.cottage-message-row.search-highlight .cottage-message-card {
  animation: cottageSearchPulse 1.55s ease;
}

@keyframes cottageSearchPulse {
  0%,
  100% {
    border-color: rgba(255, 226, 187, 0.16);
    box-shadow: 0 14px 34px rgba(20, 12, 8, 0.16);
  }
  32% {
    border-color: rgba(255, 226, 187, 0.78);
    box-shadow:
      0 0 0 3px rgba(255, 226, 187, 0.16),
      0 16px 38px rgba(20, 12, 8, 0.22);
  }
}

.cottage-message-card p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.78;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

.cottage-reasoning-chip {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: rgba(212, 209, 220, 0.58);
  background: linear-gradient(90deg, rgba(116, 111, 128, 0.055), rgba(116, 111, 128, 0.018) 72%, transparent);
  padding: 3px 11px;
}

.cottage-reasoning-chip.is-open {
  width: 100%;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(116, 111, 128, 0.075), rgba(116, 111, 128, 0.026) 68%, transparent),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 54%);
  padding: 3px 11px 10px;
}

.cottage-reasoning-chip.is-open::before {
  content: "";
  position: absolute;
  right: 19px;
  top: 11px;
  z-index: 0;
  width: 8px;
  height: 8px;
  pointer-events: none;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
  opacity: 0.26;
  animation: cottageReasoningAmbientStar 4.8s ease-in-out infinite;
}

.cottage-reasoning-chip.is-open::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 5px;
  z-index: 0;
  width: 70px;
  height: 42px;
  pointer-events: none;
  background:
    radial-gradient(circle at 14px 26px, currentColor 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 38px 11px, currentColor 0 0.7px, transparent 1.05px),
    radial-gradient(circle at 56px 30px, currentColor 0 0.65px, transparent 1px);
  opacity: 0.14;
  animation: cottageReasoningAmbientDust 5.8s ease-in-out infinite;
}

.cottage-reasoning-summary {
  display: flex;
  position: relative;
  z-index: 1;
  cursor: pointer;
  align-items: center;
  width: 100%;
  min-height: 28px;
  border: 0;
  gap: 7px;
  color: inherit;
  background: transparent;
  padding: 0;
  font-size: calc(var(--cottage-chat-text-size, 15px) - 2px);
  letter-spacing: 0.04em;
  line-height: 1;
  list-style: none;
  user-select: none;
}

.cottage-reasoning-chip.is-open .cottage-reasoning-summary {
  animation: cottageReasoningTitlePulse 760ms ease-out both;
}

.cottage-reasoning-chip.is-open .cottage-reasoning-summary::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 1px;
  width: 7px;
  height: 7px;
  pointer-events: none;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
  opacity: 0;
  transform: translateY(3px) scale(0.72) rotate(0deg);
  animation: cottageReasoningSpark 1680ms cubic-bezier(.16, .84, .32, 1) both;
}

.cottage-reasoning-chip.is-open .cottage-reasoning-summary::after {
  content: "";
  position: absolute;
  left: 8px;
  top: -9px;
  width: min(72%, 240px);
  height: 42px;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 72%, currentColor 0 1px, transparent 1.45px),
    radial-gradient(circle at 24% 30%, currentColor 0 0.9px, transparent 1.25px),
    radial-gradient(circle at 38% 62%, currentColor 0 0.75px, transparent 1.15px),
    radial-gradient(circle at 55% 24%, currentColor 0 0.7px, transparent 1.05px),
    radial-gradient(circle at 72% 54%, currentColor 0 0.85px, transparent 1.2px),
    radial-gradient(circle at 91% 20%, currentColor 0 0.65px, transparent 1px);
  opacity: 0;
  transform: translateY(3px);
  animation: cottageReasoningDust 1900ms ease-out both;
}

.cottage-reasoning-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: inherit;
  --interactive-accent: currentColor;
  --text-accent: color-mix(in srgb, currentColor 74%, #a694bc 26%);
}

.cottage-reasoning-body {
  position: relative;
  z-index: 1;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    max-height 760ms cubic-bezier(.16, .84, .32, 1),
    margin-top 420ms ease,
    opacity 1120ms cubic-bezier(.16, .84, .32, 1),
    transform 760ms cubic-bezier(.16, .84, .32, 1);
  cursor: pointer;
  outline: none;
}

.cottage-reasoning-chip.is-open .cottage-reasoning-body {
  max-height: min(60vh, 520px);
  margin-top: 8px;
  opacity: 1;
  transform: translateY(0);
}

.cottage-reasoning-chip.is-open .cottage-reasoning-icon {
  animation: cottageReasoningIconPulse 760ms ease-out both;
}

.cottage-reasoning-body:focus-visible {
  box-shadow: 0 0 0 2px rgba(212, 209, 220, 0.16);
}

.cottage-reasoning-chip pre {
  margin: 0 0 9px;
  white-space: pre-wrap;
  color: rgba(224, 221, 230, 0.62);
  font-family: inherit;
  font-size: calc(var(--cottage-chat-text-size, 15px) - 2px);
  line-height: 2;
}

.cottage-reasoning-chip pre:last-child {
  margin-bottom: 0;
}

.cottage-reasoning-chip pre.raw {
  color: rgba(196, 192, 204, 0.52);
}

@keyframes cottageReasoningReveal {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  34% {
    opacity: 0.24;
    transform: translateY(-3px);
  }
  76% {
    opacity: 0.86;
    transform: translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cottageReasoningTitlePulse {
  0% {
    opacity: 1;
  }
  28% {
    opacity: 0.76;
  }
  66% {
    opacity: 0.96;
  }
  100% {
    opacity: 1;
  }
}

@keyframes cottageReasoningIconPulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  68% {
    opacity: 0.98;
    transform: scale(1.035);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cottageReasoningSpark {
  0% {
    opacity: 0;
    transform: translateY(3px) scale(0.72) rotate(0deg);
  }
  18% {
    opacity: 0.52;
    transform: translateY(-4px) scale(1) rotate(10deg);
  }
  56% {
    opacity: 0.42;
    transform: translateY(-12px) scale(0.88) rotate(24deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-22px) scale(0.48) rotate(42deg);
  }
}

@keyframes cottageReasoningDust {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  22% {
    opacity: 0.30;
  }
  62% {
    opacity: 0.22;
    transform: translateY(-7px);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px);
  }
}

@keyframes cottageReasoningAmbientStar {
  0%, 100% {
    opacity: 0.32;
    transform: scale(0.92) rotate(0deg);
  }
  48% {
    opacity: 0.68;
    transform: scale(1.12) rotate(10deg);
  }
}

@keyframes cottageReasoningAmbientDust {
  0%, 100% {
    opacity: 0.16;
    transform: translateY(0);
  }
  50% {
    opacity: 0.34;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cottage-reasoning-chip.is-open::before,
  .cottage-reasoning-chip.is-open::after,
  .cottage-reasoning-chip.is-open .cottage-reasoning-summary,
  .cottage-reasoning-chip.is-open .cottage-reasoning-summary::before,
  .cottage-reasoning-chip.is-open .cottage-reasoning-summary::after,
  .cottage-reasoning-chip.is-open .cottage-reasoning-body,
  .cottage-reasoning-chip.is-open .cottage-reasoning-icon {
    animation: none;
    transition: none;
  }
}

.cottage-message-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 8px;
  color: rgba(248, 239, 228, 0.36);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  user-select: none;
}

.cottage-message-row.user .cottage-message-hud {
  justify-content: flex-end;
}

.cottage-message-actions-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px;
  color: rgba(248, 239, 228, 0.38);
  opacity: 0.9;
  transition: opacity 160ms ease;
}

.cottage-message-row.user .cottage-message-actions-bar {
  justify-content: flex-end;
  opacity: 0;
}

.cottage-message-row.user:hover .cottage-message-actions-bar {
  opacity: 1;
}

.cottage-message-actions-bar button {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  gap: 4px;
  border: 0;
  color: inherit;
  background: transparent;
  padding: 0;
  font-size: 0.66rem;
  transition: color 160ms ease, opacity 160ms ease;
}

.cottage-message-actions-bar button:hover:not(:disabled) {
  color: rgba(255, 226, 187, 0.86);
}

.cottage-message-actions-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.cottage-edit-box {
  display: grid;
  width: 100%;
  gap: 9px;
}

.cottage-edit-box textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 92px;
  resize: vertical;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 12px;
  color: rgba(255, 248, 237, 0.92);
  background: rgba(0, 0, 0, 0.12);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.65;
  outline: none;
}

.cottage-edit-box textarea:focus {
  border-color: rgba(255, 226, 187, 0.34);
}

.cottage-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cottage-edit-actions button {
  min-height: 30px;
  border: 1px solid rgba(255, 226, 187, 0.17);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.82);
  background: rgba(255, 244, 226, 0.09);
  padding: 0 12px;
  font-size: 0.74rem;
}

.cottage-edit-actions button:first-child {
  color: rgba(55, 35, 24, 0.92);
  background: rgba(255, 226, 187, 0.86);
}

.cottage-message-attachments {
  display: grid;
  gap: 9px;
  margin-bottom: 9px;
}

.cottage-message-image {
  display: block;
  max-width: min(100%, 420px);
  max-height: 360px;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 10px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.14);
  box-shadow: 0 10px 24px rgba(20, 12, 8, 0.18);
}

.cottage-message-file {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 12px;
  color: rgba(255, 244, 226, 0.78);
  background: rgba(255, 255, 255, 0.055);
  padding: 9px 10px;
}

.cottage-message-file span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cottage-message-file small {
  flex: 0 0 auto;
  color: rgba(248, 239, 228, 0.42);
  font-size: 0.68rem;
}

.cottage-message-card > button {
  position: absolute;
  right: 8px;
  bottom: -12px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.13);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.46);
  background: rgba(49, 32, 24, 0.86);
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease, background 140ms ease;
}

.cottage-message-card:hover > button {
  opacity: 1;
}

.cottage-message-card > button:hover {
  color: #fff7eb;
  background: rgba(255, 244, 226, 0.16);
}

.cottage-thinking {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin-left: 44px;
  color: rgba(255, 226, 187, 0.72);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-left: 1px;
}

.thinking-dots i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  animation: thinking-dot-bounce 0.92s ease-in-out infinite;
}

.thinking-dots i:nth-child(2) {
  animation-delay: 0.14s;
}

.thinking-dots i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes thinking-dot-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.46;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.cottage-composer {
  display: grid;
  gap: 9px;
  border-top: 1px solid rgba(255, 226, 187, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 244, 226, 0.03), rgba(255, 244, 226, 0.015)),
    rgba(28, 19, 14, 0.72);
  padding: 12px min(6vw, 54px);
}

.cottage-composer-row {
  display: flex;
  width: min(900px, 100%);
  align-items: flex-end;
  gap: 8px;
  margin: 0 auto;
}

.cottage-attach-area {
  position: relative;
  flex: 0 0 auto;
}

.cottage-input-wrap {
  display: flex;
  min-height: 40px;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  border: 1px solid rgba(255, 226, 187, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  padding: 9px 13px;
  transition: border-color 160ms ease, background 160ms ease;
}

.cottage-input-wrap:focus-within {
  border-color: rgba(255, 226, 187, 0.28);
  background: rgba(255, 255, 255, 0.09);
}

.cottage-composer textarea {
  width: 100%;
  min-height: 20px;
  resize: none;
  border: 0;
  color: rgba(255, 248, 237, 0.92);
  background: transparent;
  padding: 0 2px;
  font-size: 0.9rem;
  line-height: 20px;
  outline: none;
}

.cottage-composer textarea::placeholder {
  color: rgba(255, 244, 226, 0.34);
}

.cottage-attach-trigger,
.cottage-send-button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.2);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.76);
  background: rgba(255, 255, 255, 0.075);
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.cottage-attach-trigger:hover,
.cottage-send-button:hover:not(:disabled) {
  border-color: rgba(255, 226, 187, 0.32);
  color: #fff7eb;
  background: rgba(255, 244, 226, 0.13);
}

.cottage-attach-trigger.active {
  transform: rotate(45deg);
}

.cottage-send-button {
  color: rgba(55, 35, 24, 0.92);
  background: rgba(255, 226, 187, 0.86);
}

.cottage-send-button:hover:not(:disabled) {
  color: rgba(41, 26, 17, 0.95);
  background: rgba(255, 237, 205, 0.96);
}

.cottage-attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  z-index: 5;
  display: grid;
  min-width: 128px;
  gap: 6px;
  border: 1px solid rgba(255, 226, 187, 0.17);
  border-radius: 14px;
  background: rgba(42, 29, 22, 0.92);
  padding: 8px;
  box-shadow: 0 16px 40px rgba(20, 12, 8, 0.28);
  backdrop-filter: blur(14px) saturate(1.1);
}

.cottage-attach-menu button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.1);
  border-radius: 10px;
  color: rgba(255, 244, 226, 0.84);
  background: rgba(255, 255, 255, 0.055);
  padding: 0 10px;
  text-align: left;
}

.cottage-attach-menu button:hover {
  border-color: rgba(255, 226, 187, 0.2);
  background: rgba(255, 244, 226, 0.12);
}

.cottage-send-button:disabled,
.cottage-attach-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.cottage-attachment-tray {
  display: flex;
  width: min(900px, 100%);
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto;
}

.cottage-pending-attachment {
  position: relative;
  min-width: 0;
}

.cottage-pending-attachment img {
  display: block;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 12px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.14);
}

.cottage-pending-file {
  display: grid;
  min-width: 142px;
  max-width: 220px;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 7px;
  row-gap: 2px;
  align-items: center;
  border: 1px solid rgba(255, 226, 187, 0.14);
  border-radius: 12px;
  color: rgba(255, 244, 226, 0.78);
  background: rgba(255, 255, 255, 0.06);
  padding: 9px 11px;
}

.cottage-pending-file svg {
  grid-row: span 2;
}

.cottage-pending-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.cottage-pending-file small {
  color: rgba(248, 239, 228, 0.42);
  font-size: 0.66rem;
}

.cottage-attachment-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.82);
  background: rgba(57, 34, 25, 0.95);
  padding: 0;
}

.cottage-chat-error {
  position: absolute;
  right: 18px;
  bottom: 72px;
  max-width: min(460px, calc(100% - 36px));
  border: 1px solid rgba(255, 145, 120, 0.24);
  border-radius: 8px;
  color: #ffe5de;
  background: rgba(87, 30, 22, 0.82);
  padding: 10px 12px;
  text-align: left;
  font-size: 0.8rem;
  box-shadow: 0 14px 38px rgba(24, 14, 10, 0.3);
}

.cottage-confirm-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}

.cottage-confirm-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(11, 7, 5, 0.5);
  backdrop-filter: blur(8px);
}

.cottage-new-window-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.cottage-new-window-dismiss {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.cottage-new-window-panel-layer {
  position: absolute;
  inset: 126px 0 0;
  z-index: 6;
  overflow-y: auto;
  background: rgba(8, 5, 4, 0.34);
  padding: 12px;
  backdrop-filter: blur(3px);
}

.cottage-confirm-card {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(360px, 100%);
  gap: 12px;
  border: 1px solid rgba(255, 226, 187, 0.18);
  border-radius: 14px;
  color: rgba(255, 248, 237, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 244, 226, 0.1), rgba(255, 244, 226, 0.045)),
    rgba(42, 29, 22, 0.94);
  padding: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.cottage-confirm-card strong {
  font-size: 0.98rem;
}

.cottage-confirm-card p {
  margin: 0;
  color: rgba(255, 244, 226, 0.6);
  font-size: 0.78rem;
  line-height: 1.7;
}

.cottage-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cottage-confirm-actions button {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 226, 187, 0.16);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.82);
  background: rgba(255, 255, 255, 0.07);
  padding: 0 10px;
  font-size: .64rem;
  line-height: 1;
}

.cottage-confirm-actions button.danger {
  border-color: rgba(255, 145, 120, 0.24);
  color: rgba(255, 225, 218, 0.95);
  background: rgba(255, 145, 120, 0.14);
}

.cottage-new-window-dialog {
  display: grid;
  width: auto;
  max-height: min(58vh, 520px);
  gap: 14px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--kx-border);
  border-radius: 14px;
  padding: 12px;
  backdrop-filter: blur(14px) saturate(1.08);
}

.cottage-new-window-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cottage-new-window-dialog header button {
  display: inline-grid;
  min-width: 28px;
  min-height: 28px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--kx-muted);
  background: transparent;
}

.cottage-new-window-dialog header button:hover {
  color: var(--kx-primary);
  background: rgba(var(--kx-primary-rgb), 0.08);
}

.cottage-new-window-heading {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.cottage-new-window-heading > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.cottage-new-window-heading strong {
  color: var(--kx-text-main);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
}

.cottage-new-window-heading small {
  color: var(--kx-muted);
  font-size: 0.66rem;
  line-height: 1.5;
}

.cottage-new-window-glyph {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(var(--kx-primary-rgb), 0.16);
  border-radius: 9px;
  color: var(--kx-primary);
  background: rgba(var(--kx-primary-rgb), 0.08);
}

.cottage-new-window-options {
  display: grid;
  gap: 7px;
}

.cottage-new-window-options label {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  border: 1px solid rgba(var(--kx-primary-rgb), 0.15);
  border-radius: 10px;
  background: rgba(var(--kx-primary-rgb), 0.06);
  padding: 8px;
  transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.cottage-new-window-options label.disabled {
  border-style: dashed;
  opacity: 0.66;
  background: color-mix(in srgb, var(--kx-panel-soft) 64%, transparent);
}

.cottage-new-window-options input {
  width: 14px;
  height: 14px;
  accent-color: var(--kx-primary);
}

.cottage-new-window-options span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cottage-new-window-options strong {
  color: var(--kx-text-main);
  font-size: 0.75rem;
}

.cottage-new-window-options small {
  overflow: hidden;
  color: var(--kx-muted);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cottage-new-window-options em {
  color: color-mix(in srgb, var(--kx-primary) 72%, transparent);
  font-size: 0.54rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

.cottage-new-window-options label.disabled em {
  color: color-mix(in srgb, var(--kx-muted) 74%, transparent);
}

.cottage-new-window-sources {
  display: grid;
  gap: 6px;
}

.cottage-new-window-sources > span {
  color: var(--kx-muted);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
}

.cottage-new-window-sources button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--kx-border);
  border-radius: 999px;
  color: var(--kx-muted);
  background: var(--kx-panel-soft);
  padding: 7px 10px;
}

.cottage-new-window-sources button.active {
  border-color: rgba(var(--kx-primary-rgb), 0.36);
  color: var(--kx-primary);
  background: rgba(var(--kx-primary-rgb), 0.1);
}

.cottage-new-window-sources strong,
.cottage-new-window-sources small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cottage-new-window-sources strong { flex: 0 0 auto; font-size: 0.64rem; }
.cottage-new-window-sources small { min-width: 0; font-size: 0.68rem; }

@media (min-width: 761px) {
  .cottage-chat-shell {
    display: grid;
    grid-template-columns: minmax(0, min(100vw, 1040px));
    align-items: stretch;
    gap: 18px;
    justify-content: center;
    padding: 58px 0 0;
  }

  .cottage-chat-shell.has-sidebar {
    grid-template-columns: minmax(248px, 286px) minmax(0, min(760px, calc(100vw - 340px)));
    max-width: min(100vw, 1120px);
    margin-inline: auto;
  }

  .cottage-chat-sidebar {
    position: relative;
    inset: auto;
    width: 100%;
    height: calc(100svh - 58px);
    transform: none;
  }

  .cottage-chat-sidebar:not(.is-open) {
    display: none;
  }

  .cottage-chat-main {
    width: min(100%, 920px);
    justify-self: center;
  }

  .cottage-chat-backdrop {
    display: block;
  }
}

@media (max-width: 760px) {
  .cottage-route-switcher {
    min-height: 54px;
    gap: 6px;
    padding: 7px 10px;
  }

  .cottage-route-switcher button {
    width: 40px;
    min-height: 38px;
    gap: 0;
    padding: 0;
    border-radius: 12px;
  }

  .cottage-route-switcher button span {
    display: none;
  }

  .chat-page-shell {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
    padding-top: 68px;
  }

  .chat-session-sidebar {
    min-height: auto;
    max-height: 220px;
  }

  .chat-window-panel {
    min-height: calc(100svh - 320px);
  }

  .app-switcher {
    left: 12px;
    right: 12px;
    justify-content: center;
  }

  .room-side-entry {
    right: 12px;
    top: 12px;
    bottom: auto;
    transform: none;
  }

  .room-side-entry button {
    width: 42px;
    height: 42px;
  }

  .room-side-entry span {
    display: none;
  }

  .settings-route-shell {
    padding: 54px 0 0;
  }

  .settings-route-header {
    grid-template-columns: 1fr auto;
    width: 100%;
    gap: 10px;
  }

  .settings-route-header button {
    order: 3;
    grid-column: 1 / -1;
    justify-content: center;
  }

  .settings-route-header h1 {
    display: grid;
    gap: 4px;
  }

  .settings-route-shell .settings-page {
    width: 100%;
  }

  .persona-user-layer,
  .persona-workbench {
    width: 100%;
  }

  .persona-user-layer {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .persona-soft-toggle {
    justify-self: start;
  }

  .persona-workbench {
    grid-template-columns: 1fr;
  }

  .persona-deck-panel {
    position: relative;
    top: auto;
  }

  .persona-editor-head,
  .persona-editor-grid,
  .persona-cognitive-row {
    grid-template-columns: 1fr;
  }

  .persona-danger-button {
    justify-self: end;
  }

  .visual-background-row {
    grid-template-columns: 1fr;
  }

  .cottage-chat-shell {
    padding: 54px 0 0;
  }

  .cottage-chat-backdrop {
    display: block;
  }

  .cottage-chat-sidebar {
    top: 54px;
    bottom: 0;
    left: 0;
  }

  .cottage-chat-main {
    width: 100vw;
    height: calc(100svh - 54px);
  }

  .cottage-chat-hud {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 0 8px;
  }

  .cottage-chat-title input {
    max-width: 42vw;
  }

  .cottage-chat-actions {
    gap: 5px;
  }

  .cottage-chat-actions button,
  .cottage-sidebar-toggle {
    width: 31px;
    height: 31px;
  }

  .cottage-message-scroll {
    padding: 14px 12px;
  }

  .cottage-message-stack {
    max-width: min(78vw, 72ch);
  }

  .cottage-message-meta {
    gap: 8px;
  }

  .cottage-composer {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }

  .cottage-composer-row {
    gap: 7px;
  }

  .cottage-attach-trigger,
  .cottage-send-button {
    width: 38px;
    height: 38px;
  }

  .cottage-attach-menu {
    min-width: 118px;
  }

  .cottage-message-image {
    max-height: 280px;
  }
}

/* Final polish: memory title uses the same soft title wash as Persona Core, and
   the vector mixer controls get more breathing room inside each panel. */
.memory-route-shell .memory-page-heading {
  align-items: center;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--kx-primary) 16%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--kx-panel-bg) 86%, white 14%), color-mix(in srgb, var(--kx-panel-soft) 88%, transparent));
  padding: 18px 20px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--kx-shadow) 52%, transparent);
}

.vector-route-shell .vector-section-panel {
  overflow: hidden;
}

.vector-route-shell .vector-panel-body {
  gap: 18px;
  padding: 20px;
}

.vector-route-shell .vector-config-grid,
.vector-route-shell .vector-choice-grid,
.vector-route-shell .vector-scope-grid,
.vector-route-shell .vector-compact-control-grid {
  gap: 11px;
}

.vector-route-shell .vector-cache-card {
  padding: 12px 14px;
}

.vector-route-shell .vector-compact-control-grid.four .vector-compact-control,
.vector-route-shell .vector-compact-control {
  padding: 8px 11px;
}

.vector-route-shell .vector-test-actions {
  gap: 9px;
}

.vector-route-shell .vector-test-actions button,
.vector-route-shell .vector-test-actions .vector-clear-button,
.vector-route-shell .vector-action-primary {
  padding-inline: 13px;
}

@media (max-width: 760px) {
  .memory-route-shell .memory-page-heading {
    padding: 14px 15px;
  }

  .vector-route-shell .vector-panel-body {
    gap: 12px;
    padding: 14px;
  }

  .vector-route-shell .vector-config-grid,
  .vector-route-shell .vector-choice-grid,
  .vector-route-shell .vector-scope-grid,
  .vector-route-shell .vector-compact-control-grid {
    gap: 8px;
  }
}

.soft-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 226, 187, 0.24);
  border-radius: 999px;
  color: rgba(255, 244, 226, 0.84);
  background: rgba(255, 244, 226, 0.12);
  padding: 0 14px;
}

.compact-soft-button {
  min-height: 30px;
  padding: 0 11px;
  font-size: 0.72rem;
}

.playlist-note {
  margin: 12px 0 0;
  color: rgba(248, 239, 228, 0.46);
  font-size: 0.74rem;
  line-height: 1.45;
}

.record-row span,
.plan-list small,
.star-map small {
  color: rgba(248, 239, 228, 0.62);
}

.star-map button {
  position: relative;
  min-height: 132px;
  align-content: start;
}

.star-map button svg {
  color: rgba(255, 214, 151, 0.76);
}

.star-map button.visited {
  border-color: rgba(139, 177, 169, 0.36);
}

.star-map button.active {
  border-color: rgba(255, 218, 168, 0.72);
  background: rgba(255, 214, 151, 0.16);
}

.web-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.prompt-preview {
  margin-top: 20px;
  padding: 16px;
}

.prompt-preview pre {
  overflow: auto;
  white-space: pre-wrap;
  color: rgba(255, 244, 226, 0.82);
}

.error-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(460px, calc(100vw - 36px));
  border: 1px solid rgba(255, 112, 112, 0.36);
  border-radius: 8px;
  background: rgba(72, 20, 20, 0.95);
  padding: 12px 14px;
}

@media (max-width: 560px) {
  .visual-inline-row,
  .visual-inline-pair,
  .visual-compact-setting,
  .persona-inline-grid,
  .persona-avatar-grid,
  .persona-switch-grid,
  .persona-tuning-grid,
  .memory-compose-grid,
  .memory-dashboard {
    grid-template-columns: 1fr;
  }

  .visual-compact-title,
  .background-inline-row .visual-compact-title {
    min-width: 0;
  }

  .cinema-layout-control {
    justify-content: space-between;
  }

  .memory-entry-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .memory-entry-foot label {
    flex: 0 0 auto;
  }
}

@media (max-width: 520px) {
  .cinema-shell {
    padding: 12px 0;
  }

  .cinema-header {
    left: 12px;
    top: 10px;
    width: calc(100vw - 24px);
  }

  .workspace {
    top: 96px;
    width: calc(100vw - 36px);
  }

  .cinema-header {
    align-items: flex-start;
  }

  .screen-controls {
    border-radius: 8px;
    position: static;
    width: max-content;
    max-width: calc(100% - 18px);
    margin: 10px auto 0;
  }

  .projector-area {
    padding-bottom: 0;
  }

  .video-subtitle {
    bottom: 18px;
    width: 90%;
  }

  .plan-bubble {
    left: 50%;
    top: auto;
    bottom: 164px;
    max-width: 90%;
  }

  .search-line {
    grid-template-columns: auto 1fr;
  }

  .search-line button {
    grid-column: 2;
  }

  .video-stage.floating {
    left: 12px;
    right: 12px;
    top: 92px;
    width: auto;
    height: 220px;
  }

  .talk-launcher {
    top: auto;
    bottom: 112px;
    width: calc(100vw - 48px);
  }

  .sofa-companion {
    top: auto;
    bottom: 104px;
    width: calc(100vw - 36px);
  }

  .status-strip {
    bottom: 18px;
    max-width: calc(100vw - 48px);
  }

  .settings-panel {
    left: 12px;
    right: 12px;
    top: 82px;
    width: auto;
    max-height: calc(100svh - 104px);
  }

  .settings-grid,
  .settings-grid.compact {
    grid-template-columns: 1fr;
  }

  .provider-tabs {
    grid-template-columns: repeat(5, max-content);
    justify-content: flex-start;
    overflow-x: auto;
    border-radius: 8px;
  }

  .provider-tabs button {
    min-width: max-content;
  }
}

/* Theme parity with the original Kisera Cottage palette.
   Keep this block late in the file so route, settings, chat, persona, and memory pages
   share the same color language without changing their layout behavior. */
.cinema-shell[data-theme="black-gold"],
.settings-route-shell[data-theme="black-gold"],
.cottage-chat-shell[data-theme="black-gold"],
.cottage-route-switcher[data-theme="black-gold"] {
  --kx-bg-main: #050505;
  --kx-bg-card: #0a0a0a;
  --kx-primary: #B08D55;
  --kx-primary-rgb: 176, 141, 85;
  --kx-text-main: #e2e2e2;
  --kx-bubble-user: #2a2622;
  --kx-bubble-ai: #0F0F0F;
  --kx-page-bg:
    radial-gradient(circle at 18% 8%, rgba(176, 141, 85, 0.12), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(176, 141, 85, 0.08), transparent 34%),
    linear-gradient(135deg, #050505, #0a0a0a 48%, #050505);
  --kx-panel-bg: rgba(10, 10, 10, 0.92);
  --kx-panel-soft: rgba(15, 15, 15, 0.86);
  --kx-input-bg: rgba(15, 15, 15, 0.76);
  --kx-button-bg: rgba(176, 141, 85, 0.08);
  --kx-active-bg: rgba(176, 141, 85, 0.16);
  --kx-border: rgba(176, 141, 85, 0.22);
  --kx-border-soft: rgba(226, 226, 226, 0.08);
  --kx-muted: rgba(226, 226, 226, 0.58);
  --kx-shadow: rgba(0, 0, 0, 0.34);
}

.cinema-shell[data-theme="white-gold"],
.settings-route-shell[data-theme="white-gold"],
.cottage-chat-shell[data-theme="white-gold"],
.cottage-route-switcher[data-theme="white-gold"] {
  --kx-bg-main: #f8fafb;
  --kx-bg-card: #ffffff;
  --kx-primary: #b59869;
  --kx-primary-rgb: 181, 152, 105;
  --kx-text-main: #2e2824;
  --kx-bubble-user: #ebe6e0;
  --kx-bubble-ai: #ffffff;
  --kx-page-bg:
    radial-gradient(circle at 16% 10%, rgba(181, 152, 105, 0.13), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(181, 152, 105, 0.10), transparent 34%),
    linear-gradient(135deg, #f8fafb, #ffffff 52%, #f8fafb);
  --kx-panel-bg: rgba(255, 255, 255, 0.94);
  --kx-panel-soft: rgba(255, 255, 255, 0.78);
  --kx-input-bg: rgba(255, 255, 255, 0.84);
  --kx-button-bg: rgba(181, 152, 105, 0.08);
  --kx-active-bg: rgba(181, 152, 105, 0.18);
  --kx-border: rgba(181, 152, 105, 0.24);
  --kx-border-soft: rgba(46, 40, 36, 0.08);
  --kx-muted: rgba(46, 40, 36, 0.58);
  --kx-shadow: rgba(181, 152, 105, 0.14);
}

.cinema-shell[data-theme="pink-mocha"],
.settings-route-shell[data-theme="pink-mocha"],
.cottage-chat-shell[data-theme="pink-mocha"],
.cottage-route-switcher[data-theme="pink-mocha"] {
  --kx-bg-main: #42382e;
  --kx-bg-card: #312a21;
  --kx-primary: #b58c8c;
  --kx-primary-rgb: 181, 140, 140;
  --kx-text-main: #e2dadc;
  --kx-bubble-user: #b58c8c;
  --kx-bubble-ai: #312a21;
  --kx-page-bg:
    radial-gradient(circle at 18% 8%, rgba(181, 140, 140, 0.15), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(181, 140, 140, 0.10), transparent 34%),
    linear-gradient(135deg, #42382e, #312a21 52%, #42382e);
  --kx-panel-bg: rgba(49, 42, 33, 0.92);
  --kx-panel-soft: rgba(49, 42, 33, 0.80);
  --kx-input-bg: rgba(49, 42, 33, 0.74);
  --kx-button-bg: rgba(181, 140, 140, 0.10);
  --kx-active-bg: rgba(181, 140, 140, 0.20);
  --kx-border: rgba(181, 140, 140, 0.25);
  --kx-border-soft: rgba(226, 218, 220, 0.08);
  --kx-muted: rgba(226, 218, 220, 0.60);
  --kx-shadow: rgba(34, 26, 22, 0.30);
}

.cinema-shell[data-theme="custom"],
.settings-route-shell[data-theme="custom"],
.cottage-chat-shell[data-theme="custom"],
.cottage-route-switcher[data-theme="custom"] {
  --kx-bg-main: #efe9f2;
  --kx-bg-card: #fbf9fc;
  --kx-primary: #a28576;
  --kx-primary-rgb: 162, 133, 118;
  --kx-primary-soft: #a694bc;
  --kx-text-main: #4f4365;
  --kx-bubble-user: #ded3e6;
  --kx-bubble-ai: #fbf9fc;
  --kx-page-bg:
    radial-gradient(circle at 14% 8%, rgba(166, 148, 188, 0.22), transparent 30%),
    radial-gradient(circle at 82% 86%, rgba(220, 189, 168, 0.14), transparent 34%),
    linear-gradient(135deg, #efe9f2, #fbf9fc 54%, #e5dceb);
  --kx-panel-bg: rgba(251, 249, 252, 0.94);
  --kx-panel-soft: rgba(255, 255, 255, 0.72);
  --kx-input-bg: rgba(255, 255, 255, 0.80);
  --kx-button-bg: rgba(143, 127, 162, 0.10);
  --kx-active-bg: rgba(143, 127, 162, 0.18);
  --kx-border: rgba(143, 127, 162, 0.25);
  --kx-border-soft: rgba(79, 67, 101, 0.10);
  --kx-muted: rgba(79, 67, 101, 0.58);
  --kx-shadow: rgba(79, 67, 101, 0.16);
}

body:has(.cinema-shell[data-theme="black-gold"]),
body:has(.settings-route-shell[data-theme="black-gold"]),
body:has(.cottage-chat-shell[data-theme="black-gold"]) {
  background: #050505;
}

body:has(.cinema-shell[data-theme="white-gold"]),
body:has(.settings-route-shell[data-theme="white-gold"]),
body:has(.cottage-chat-shell[data-theme="white-gold"]) {
  background: #f8fafb;
}

body:has(.cinema-shell[data-theme="pink-mocha"]),
body:has(.settings-route-shell[data-theme="pink-mocha"]),
body:has(.cottage-chat-shell[data-theme="pink-mocha"]) {
  background: #42382e;
}

body:has(.cinema-shell[data-theme="custom"]),
body:has(.settings-route-shell[data-theme="custom"]),
body:has(.cottage-chat-shell[data-theme="custom"]) {
  background: #efe9f2;
}

.cinema-shell[data-theme],
.settings-route-shell[data-theme],
.cottage-chat-shell[data-theme] {
  color: var(--kx-text-main);
}

.settings-route-shell[data-theme],
.cottage-chat-shell[data-theme] .cottage-chat-bg {
  background: var(--kx-page-bg);
}

.cottage-route-switcher[data-theme] {
  border-color: color-mix(in srgb, var(--kx-primary) 14%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kx-bg-main) 90%, transparent),
      color-mix(in srgb, var(--kx-bg-main) 68%, transparent)
    ),
    radial-gradient(circle at 18% 0%, rgba(var(--kx-primary-rgb), 0.08), transparent 38%);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(1.04);
}

.cottage-route-switcher[data-theme] button {
  border-color: transparent;
  color: var(--kx-muted);
  background: transparent;
}

.cottage-route-switcher[data-theme] button:hover,
.cottage-route-switcher[data-theme] button.active {
  border-color: transparent;
  color: var(--kx-text-main);
  background: rgba(var(--kx-primary-rgb), 0.13);
}

.cottage-route-switcher[data-theme] button svg {
  color: var(--kx-primary);
  stroke-width: 2;
}

.cottage-route-switcher button.route-memory svg,
.cottage-route-switcher button.route-chronicle svg {
  width: 21px;
  height: 21px;
}

.cottage-route-switcher button.route-memory svg {
  transform: scale(1.05);
}

.cottage-route-switcher button.route-chronicle svg {
  transform: scale(0.94);
  transform-origin: center;
}

.cottage-route-switcher[data-theme] .memory-glyph-frame,
.cottage-route-switcher[data-theme] .memory-glyph-page,
.cottage-route-switcher[data-theme] .chronicle-glyph-book,
.cottage-route-switcher[data-theme] .chronicle-glyph-orbit {
  stroke: currentColor;
  opacity: 1;
}

.cottage-route-switcher[data-theme] .memory-glyph-page-fill {
  fill: currentColor;
  opacity: .86;
}

.cottage-route-switcher[data-theme] .memory-glyph-frame,
.cottage-route-switcher[data-theme] .chronicle-glyph-book {
  stroke-width: 1.08;
}

.cottage-route-switcher[data-theme] .memory-glyph-page,
.cottage-route-switcher[data-theme] .chronicle-glyph-orbit {
  stroke-width: .72;
}

.cottage-route-switcher[data-theme="white-gold"] {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.88), rgba(248, 242, 231, 0.62)),
    radial-gradient(circle at 16% 0%, rgba(var(--kx-primary-rgb), 0.08), transparent 36%);
  box-shadow: inset 0 -1px 0 rgba(var(--kx-primary-rgb), 0.10);
}

.cottage-route-switcher[data-theme="custom"] {
  background:
    linear-gradient(180deg, rgba(251, 249, 252, 0.88), rgba(239, 233, 242, 0.62)),
    radial-gradient(circle at 18% 0%, rgba(var(--kx-primary-rgb), 0.08), transparent 38%);
  box-shadow: inset 0 -1px 0 rgba(var(--kx-primary-rgb), 0.12);
}

.settings-route-shell[data-theme] .settings-route-header,
.settings-route-shell[data-theme] .settings-page-card,
.settings-route-shell[data-theme] .settings-section,
.settings-route-shell[data-theme] .settings-section-body,
.settings-route-shell[data-theme] .visual-cortex-card,
.settings-route-shell[data-theme] .stream-row-card,
.settings-route-shell[data-theme] .persona-user-layer,
.settings-route-shell[data-theme] .persona-deck-panel,
.settings-route-shell[data-theme] .persona-editor-panel,
.settings-route-shell[data-theme] .persona-deck-card,
.settings-route-shell[data-theme] .persona-editor-head,
.settings-route-shell[data-theme] .persona-memory-gate,
.settings-route-shell[data-theme] .persona-soft-toggle,
.settings-route-shell[data-theme] .persona-field,
.settings-route-shell[data-theme] .persona-switch-card,
.settings-route-shell[data-theme] .persona-slider-card,
.settings-route-shell[data-theme] .memory-search,
.settings-route-shell[data-theme] .memory-empty,
.settings-route-shell[data-theme] .memory-entry-card,
.settings-route-shell[data-theme] .memory-dashboard-card,
.settings-route-shell[data-theme] .memory-count-chip,
.settings-route-shell[data-theme] .memory-tag-filter button,
.settings-route-shell[data-theme] .memory-tag-chip,
.settings-route-shell[data-theme] .memory-mini-chip,
.settings-route-shell[data-theme] .background-upload-card,
.settings-route-shell[data-theme] .option-button-row,
.settings-route-shell[data-theme] .provider-tabs,
.cinema-shell[data-theme] .settings-page-card,
.cinema-shell[data-theme] .settings-section,
.cinema-shell[data-theme] .visual-cortex-card,
.cinema-shell[data-theme] .stream-row-card,
.cinema-shell[data-theme] .background-upload-card,
.cinema-shell[data-theme] .option-button-row,
.cinema-shell[data-theme] .provider-tabs {
  border-color: var(--kx-border);
  color: var(--kx-text-main);
  background: var(--kx-panel-bg);
  box-shadow: 0 18px 50px var(--kx-shadow);
}

.settings-route-shell[data-theme] .settings-section-body,
.settings-route-shell[data-theme] .visual-cortex-card,
.settings-route-shell[data-theme] .stream-row-card,
.settings-route-shell[data-theme] .persona-field,
.settings-route-shell[data-theme] .persona-switch-card,
.settings-route-shell[data-theme] .persona-slider-card,
.settings-route-shell[data-theme] .memory-entry-card,
.settings-route-shell[data-theme] .memory-dashboard-card,
.settings-route-shell[data-theme] .background-upload-card,
.cinema-shell[data-theme] .visual-cortex-card,
.cinema-shell[data-theme] .stream-row-card,
.cinema-shell[data-theme] .background-upload-card {
  background: var(--kx-panel-soft);
  box-shadow: none;
}

.settings-route-shell[data-theme] input,
.settings-route-shell[data-theme] select,
.settings-route-shell[data-theme] textarea,
.settings-route-shell[data-theme] .settings-grid input,
.settings-route-shell[data-theme] .settings-grid select,
.settings-route-shell[data-theme] .memory-compose textarea,
.settings-route-shell[data-theme] .memory-compose-foot input,
.settings-route-shell[data-theme] .memory-inline-add input,
.settings-route-shell[data-theme] .persona-field input,
.settings-route-shell[data-theme] .persona-field textarea,
.cinema-shell[data-theme] input,
.cinema-shell[data-theme] select,
.cinema-shell[data-theme] textarea,
.cinema-shell[data-theme] .settings-grid input,
.cinema-shell[data-theme] .settings-grid select {
  border-color: var(--kx-border);
  color: var(--kx-text-main);
  background: var(--kx-input-bg);
}

.settings-route-shell[data-theme] input::placeholder,
.settings-route-shell[data-theme] textarea::placeholder,
.cinema-shell[data-theme] input::placeholder,
.cinema-shell[data-theme] textarea::placeholder {
  color: var(--kx-muted);
}

.settings-route-shell[data-theme] .settings-route-header p,
.settings-route-shell[data-theme] .settings-route-header h1 span,
.settings-route-shell[data-theme] .settings-section-copy small,
.settings-route-shell[data-theme] .settings-hint,
.settings-route-shell[data-theme] .settings-footer,
.settings-route-shell[data-theme] .cinema-layout-control > span,
.settings-route-shell[data-theme] .persona-user-copy p,
.settings-route-shell[data-theme] .persona-panel-title p,
.settings-route-shell[data-theme] .persona-editor-title p,
.settings-route-shell[data-theme] .persona-deck-card small,
.settings-route-shell[data-theme] .memory-title-copy p,
.settings-route-shell[data-theme] .memory-entry-meta,
.settings-route-shell[data-theme] .memory-alias-toggle,
.settings-route-shell[data-theme] .stream-row-card small,
.cinema-shell[data-theme] .settings-page-title span,
.cinema-shell[data-theme] .settings-section-heading span,
.cinema-shell[data-theme] .settings-hint,
.cinema-shell[data-theme] .settings-footer,
.cinema-shell[data-theme] .stream-row-card small {
  color: var(--kx-muted);
}

.settings-route-shell[data-theme] .settings-route-mark,
.settings-route-shell[data-theme] .settings-section-icon,
.settings-route-shell[data-theme] .settings-section-heading svg,
.settings-route-shell[data-theme] .visual-block-title svg,
.settings-route-shell[data-theme] .memory-title-mark,
.settings-route-shell[data-theme] .persona-panel-mark,
.cinema-shell[data-theme] .settings-route-mark,
.cinema-shell[data-theme] .settings-section-icon,
.cinema-shell[data-theme] .settings-section-heading svg,
.cinema-shell[data-theme] .visual-block-title svg {
  border-color: var(--kx-border);
  color: var(--kx-primary);
  background: var(--kx-button-bg);
}

.settings-route-shell[data-theme] button,
.settings-route-shell[data-theme] label,
.cinema-shell[data-theme] button,
.cinema-shell[data-theme] label {
  color: inherit;
}

.settings-route-shell[data-theme] .provider-tabs button,
.settings-route-shell[data-theme] .option-button-row button,
.settings-route-shell[data-theme] .hud-toggle-row button,
.settings-route-shell[data-theme] .memory-head-actions button,
.settings-route-shell[data-theme] .memory-primary-tool,
.settings-route-shell[data-theme] .memory-filter-toggle,
.settings-route-shell[data-theme] .memory-filter-clear,
.settings-route-shell[data-theme] .persona-avatar-actions button,
.settings-route-shell[data-theme] .persona-avatar-actions label,
.settings-route-shell[data-theme] .cinema-layout-cycle,
.cinema-shell[data-theme] .provider-tabs button,
.cinema-shell[data-theme] .option-button-row button,
.cinema-shell[data-theme] .hud-toggle-row button {
  border-color: var(--kx-border);
  color: var(--kx-text-main);
  background: var(--kx-button-bg);
}

.settings-route-shell[data-theme] .provider-tabs button.active,
.settings-route-shell[data-theme] .provider-tabs button:hover,
.settings-route-shell[data-theme] .option-button-row button.active,
.settings-route-shell[data-theme] .option-button-row button:hover,
.settings-route-shell[data-theme] .hud-toggle-row button.active,
.settings-route-shell[data-theme] .hud-toggle-row button:hover,
.settings-route-shell[data-theme] .memory-head-actions button:hover,
.settings-route-shell[data-theme] .memory-primary-tool:hover,
.settings-route-shell[data-theme] .memory-filter-toggle:hover,
.settings-route-shell[data-theme] .memory-filter-clear:hover,
.settings-route-shell[data-theme] .cinema-layout-cycle:hover,
.cinema-shell[data-theme] .provider-tabs button.active,
.cinema-shell[data-theme] .provider-tabs button:hover,
.cinema-shell[data-theme] .option-button-row button.active,
.cinema-shell[data-theme] .option-button-row button:hover,
.cinema-shell[data-theme] .hud-toggle-row button.active,
.cinema-shell[data-theme] .hud-toggle-row button:hover {
  border-color: rgba(var(--kx-primary-rgb), 0.42);
  color: var(--kx-text-main);
  background: var(--kx-active-bg);
}

.cottage-chat-shell[data-theme] {
  background: var(--kx-bg-main);
}

.cottage-chat-shell[data-theme] .cottage-chat-bg::after {
  opacity: 0.12;
}

.cottage-chat-shell[data-theme] .cottage-chat-main,
.cottage-chat-shell[data-theme] .cottage-chat-sidebar,
.cottage-chat-shell[data-theme] .cottage-session-search,
.cottage-chat-shell[data-theme] .cottage-composer,
.cottage-chat-shell[data-theme] .cottage-attachment-menu,
.cottage-chat-shell[data-theme] .cottage-edit-box textarea,
.cottage-chat-shell[data-theme] .cottage-search-panel,
.cottage-chat-shell[data-theme] .cottage-confirm-dialog {
  border-color: var(--kx-border);
  color: var(--kx-text-main);
  background: var(--kx-panel-bg);
  box-shadow: 0 18px 50px var(--kx-shadow);
}

.cottage-chat-shell[data-theme] .cottage-session-search,
.cottage-chat-shell[data-theme] .cottage-composer,
.cottage-chat-shell[data-theme] .cottage-attachment-menu,
.cottage-chat-shell[data-theme] .cottage-edit-box textarea {
  background: var(--kx-panel-soft);
}

.cottage-chat-shell[data-theme] .cottage-chat-main,
.cottage-chat-shell[data-theme] .cottage-chat-sidebar {
  box-shadow: none;
}

.cottage-chat-shell[data-theme] .cottage-chat-hud {
  border-bottom-color: color-mix(in srgb, var(--kx-text-main) 9%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--kx-panel-bg) 34%, transparent), transparent);
  backdrop-filter: blur(10px);
}

.cottage-chat-shell[data-theme] .cottage-chat-title {
  border: 0;
  color: color-mix(in srgb, var(--kx-text-main) 72%, var(--kx-primary) 28%);
  background: transparent;
  box-shadow: none;
}

.cottage-chat-shell[data-theme] .cottage-chat-title svg {
  opacity: 0.58;
}

.cottage-chat-shell[data-theme] .cottage-chat-title input {
  color: var(--kx-text-main);
  background: transparent;
}

.cottage-chat-shell[data-theme] .cottage-chat-title input:focus {
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-panel-soft) 42%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--kx-primary) 24%, transparent);
}

.cottage-chat-shell[data-theme] input,
.cottage-chat-shell[data-theme] textarea {
  color: var(--kx-text-main);
}

.cottage-chat-shell[data-theme] input::placeholder,
.cottage-chat-shell[data-theme] textarea::placeholder {
  color: var(--kx-muted);
}

.cottage-chat-shell[data-theme] .cottage-message-card {
  border-color: rgba(var(--kx-primary-rgb), 0.15);
  color: var(--kx-text-main);
  background: var(--kx-bubble-ai);
  box-shadow: 0 8px 18px var(--kx-shadow);
}

.cottage-chat-shell[data-theme] .cottage-message-row.user .cottage-message-card {
  border-color: rgba(0, 0, 0, 0.05);
  color: var(--kx-text-main);
  background: var(--kx-bubble-user);
}

.cottage-chat-shell[data-theme] .cottage-message-card.is-editing {
  border-color: rgba(var(--kx-primary-rgb), 0.38);
  background: var(--kx-panel-soft);
}

.cottage-chat-shell[data-theme] .cottage-message-hud,
.cottage-chat-shell[data-theme] .cottage-message-actions-bar,
.cottage-chat-shell[data-theme] .cottage-session-main span,
.cottage-chat-shell[data-theme] .cottage-session-main small,
.cottage-chat-shell[data-theme] .cottage-sidebar-title p,
.cottage-chat-shell[data-theme] .cottage-search-hit small,
.cottage-chat-shell[data-theme] .cottage-empty-state p {
  color: var(--kx-muted);
}

.cottage-chat-shell[data-theme] .cottage-session-main small {
  opacity: .58;
}

.cottage-chat-shell[data-theme] .cottage-session-item,
.cottage-chat-shell[data-theme] .cottage-search-hit,
.cottage-chat-shell[data-theme] .cottage-attach-menu button,
.cottage-chat-shell[data-theme] .cottage-message-actions-bar button,
.cottage-chat-shell[data-theme] .cottage-chat-actions button,
.cottage-chat-shell[data-theme] .cottage-sidebar-toggle,
.cottage-chat-shell[data-theme] .cottage-attach-trigger,
.cottage-chat-shell[data-theme] .cottage-send-button,
.cottage-chat-shell[data-theme] .cottage-confirm-actions button {
  border-color: var(--kx-border);
  color: var(--kx-text-main);
  background: var(--kx-button-bg);
}

.cottage-chat-shell[data-theme] .cottage-session-item.active,
.cottage-chat-shell[data-theme] .cottage-session-item:hover,
.cottage-chat-shell[data-theme] .cottage-search-hit:hover,
.cottage-chat-shell[data-theme] .cottage-attach-menu button:hover,
.cottage-chat-shell[data-theme] .cottage-message-actions-bar button:hover,
.cottage-chat-shell[data-theme] .cottage-chat-actions button:hover,
.cottage-chat-shell[data-theme] .cottage-sidebar-toggle:hover,
.cottage-chat-shell[data-theme] .cottage-attach-trigger:hover,
.cottage-chat-shell[data-theme] .cottage-send-button:hover,
.cottage-chat-shell[data-theme] .cottage-confirm-actions button:hover {
  border-color: rgba(var(--kx-primary-rgb), 0.42);
  color: var(--kx-text-main);
  background: var(--kx-active-bg);
}

.cottage-chat-shell[data-theme] .cottage-send-button,
.settings-route-shell[data-theme] .memory-primary-tool {
  color: var(--kx-bg-card);
  background: var(--kx-primary);
}

.cottage-chat-shell[data-theme="black-gold"] .cottage-send-button,
.cottage-chat-shell[data-theme="pink-mocha"] .cottage-send-button,
.settings-route-shell[data-theme="black-gold"] .memory-primary-tool,
.settings-route-shell[data-theme="pink-mocha"] .memory-primary-tool {
  color: #0a0a0a;
}

/* Cinema playlist: lighter frosted glass, less blur, dark readable text. */
.cinema-shell[data-theme] .playlist-panel {
  color: #2e2824;
}

.cinema-shell[data-theme] .playlist-panel .panel {
  border-color: rgba(255, 255, 255, 0.42);
  color: #2e2824;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 248, 238, 0.40)),
    rgba(255, 255, 255, 0.34);
  box-shadow: 0 22px 72px rgba(70, 43, 26, 0.20);
  backdrop-filter: blur(6px) saturate(1.04);
}

.cinema-shell[data-theme] .playlist-panel .panel-title,
.cinema-shell[data-theme] .playlist-panel .record-title-line strong,
.cinema-shell[data-theme] .playlist-panel .playlist-empty strong {
  color: #2e2824;
}

.cinema-shell[data-theme] .playlist-panel .panel-title svg,
.cinema-shell[data-theme] .playlist-panel .playlist-empty svg,
.cinema-shell[data-theme] .playlist-panel .record-thumb svg {
  color: rgba(74, 55, 42, 0.64);
}

.cinema-shell[data-theme] .playlist-panel .panel-title-meta,
.cinema-shell[data-theme] .playlist-panel .record-row small,
.cinema-shell[data-theme] .playlist-panel .record-meta,
.cinema-shell[data-theme] .playlist-panel .playlist-empty p,
.cinema-shell[data-theme] .playlist-panel .playlist-footnote {
  color: rgba(46, 40, 36, 0.58);
}

.cinema-shell[data-theme] .playlist-panel .panel-close,
.cinema-shell[data-theme] .playlist-panel .record-row button,
.cinema-shell[data-theme] .playlist-panel .soft-button {
  border-color: rgba(74, 55, 42, 0.14);
  color: #2e2824;
  background: rgba(255, 255, 255, 0.28);
}

.cinema-shell[data-theme] .playlist-panel .panel-close:hover,
.cinema-shell[data-theme] .playlist-panel .record-row button:hover,
.cinema-shell[data-theme] .playlist-panel .soft-button:hover {
  border-color: rgba(181, 152, 105, 0.36);
  color: #2e2824;
  background: rgba(255, 255, 255, 0.46);
}

.cinema-shell[data-theme] .playlist-panel .record-row,
.cinema-shell[data-theme] .playlist-panel .playlist-empty {
  border-color: rgba(74, 55, 42, 0.12);
  background: rgba(255, 255, 255, 0.26);
}

.cinema-shell[data-theme] .playlist-panel .record-thumb {
  border-color: rgba(74, 55, 42, 0.14);
  color: rgba(74, 55, 42, 0.54);
  background: rgba(255, 255, 255, 0.30);
}

.cinema-shell[data-theme] .playlist-panel .record-thumb-button span {
  color: rgba(255, 250, 242, 0.92);
  background: rgba(46, 32, 24, 0.52);
}

.cinema-shell[data-theme] .playlist-panel .record-title-line em {
  border-color: rgba(74, 55, 42, 0.12);
  color: rgba(46, 40, 36, 0.54);
  background: rgba(46, 40, 36, 0.06);
}

.cinema-shell[data-theme] .playlist-panel .record-title-line em.current {
  color: #2e2824;
  background: rgba(181, 152, 105, 0.20);
}

.cinema-shell[data-theme] .playlist-panel .record-progress {
  background: rgba(46, 40, 36, 0.11);
}

.cinema-shell[data-theme] .playlist-panel .record-progress i {
  background: rgba(181, 152, 105, 0.76);
}

.cinema-shell[data-theme] .playlist-panel .record-resume {
  border-color: rgba(181, 152, 105, 0.32) !important;
  background: rgba(181, 152, 105, 0.18) !important;
}

.cinema-shell[data-theme] .playlist-panel .record-actions .danger {
  color: rgba(125, 34, 26, 0.76);
  background: rgba(180, 55, 40, 0.10);
}

.cinema-shell[data-theme] .playlist-panel .playlist-footnote {
  border-color: rgba(74, 55, 42, 0.10);
  background: rgba(255, 255, 255, 0.22);
}

/* Cinema companion dialogue: match the original room's quiet floating chat panel. */
.cinema-shell[data-theme] .sofa-companion {
  bottom: 20%;
  width: min(82%, 760px);
  max-width: calc(100vw - 48px);
}

.cinema-shell[data-theme] .sofa-companion .panel {
  border-color: rgba(255, 255, 255, 0.04);
  border-radius: 28px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(0, 0, 0, 0.56);
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(5px) saturate(1.03);
  padding: 12px;
}

.cinema-shell[data-theme] .sofa-companion .panel-title {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.cinema-shell[data-theme] .sofa-companion .panel-title svg {
  color: rgba(255, 255, 255, 0.46);
}

.cinema-shell[data-theme] .sofa-companion .panel-close {
  margin-left: auto;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.08);
}

.cinema-shell[data-theme] .sofa-companion .panel-close:hover {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.16);
}

.cinema-shell[data-theme] .sofa-companion .chat-list {
  max-height: 18vh;
  gap: 8px;
  overflow-y: auto;
  margin-top: 0;
  padding-right: 4px;
}

.cinema-shell[data-theme] .sofa-companion .chat-bubble {
  position: relative;
  max-width: 88%;
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 0.86rem;
  line-height: 1.62;
  white-space: pre-wrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.cinema-shell[data-theme] .sofa-companion .chat-bubble.user {
  justify-self: end;
  border-bottom-right-radius: 6px;
  color: rgba(255, 255, 255, 0.90);
  background: rgba(255, 255, 255, 0.15);
}

.cinema-shell[data-theme] .sofa-companion .chat-bubble.user {
  padding-right: 34px;
}

.cinema-message-actions {
  position: absolute;
  top: 5px;
  right: 6px;
  display: inline-flex;
  gap: 2px;
  opacity: 0.18;
  transition: opacity 160ms ease, transform 160ms ease;
}

.chat-bubble.user:hover .cinema-message-actions,
.chat-bubble.user:focus-within .cinema-message-actions {
  opacity: 0.62;
}

.cinema-message-actions button {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.08);
  padding: 0;
  cursor: pointer;
}

.cinema-message-actions button:hover {
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.16);
}

.cinema-shell[data-theme] .sofa-companion .chat-bubble.companion {
  justify-self: start;
  max-width: 94%;
  border: 0;
  border-bottom-left-radius: 6px;
  color: rgba(255, 255, 255, 0.70);
  background: transparent;
  box-shadow: none;
  padding: 4px 2px;
}

.cinema-shell[data-theme] .sofa-companion .cinema-companion-markdown strong {
  color: inherit;
}

.cinema-shell[data-theme] .sofa-companion .cinema-companion-markdown blockquote {
  border-left-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.64);
}

/* Cottage ritual pages: portrait-first structure with restrained wide-screen expansion. */
.cottage-divider {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) 18px minmax(24px, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--kx-primary);
}

.cottage-divider > span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--kx-primary-rgb), 0.5));
}

.cottage-divider > span:last-child {
  background: linear-gradient(90deg, rgba(var(--kx-primary-rgb), 0.5), transparent);
}

.cottage-divider svg {
  width: 18px;
  height: 18px;
}

.cottage-route-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 32px;
  color: var(--kx-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  pointer-events: none;
  user-select: none;
}

.cottage-route-brand svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--kx-primary) 34%, transparent));
}

.settings-route-shell.persona-route-shell,
.settings-route-shell.memory-route-shell {
  width: 100%;
  padding: 82px clamp(14px, 3vw, 38px) 46px;
  overflow-x: hidden;
  overflow-y: auto;
}

.settings-route-shell .cottage-ritual-page {
  width: min(100%, 780px);
  margin: 0 auto;
  overflow: visible;
}

.cottage-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 4px 18px;
}

.cottage-page-heading > div:first-child {
  min-width: 0;
}

.cottage-page-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--kx-primary);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cottage-page-heading h1 {
  margin: 0;
  color: var(--kx-text-main);
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
}

.cottage-page-heading p {
  max-width: 40rem;
  margin: 9px 0 0;
  color: var(--kx-muted);
  font-size: 0.78rem;
  line-height: 1.7;
}

.cottage-primary-command {
  display: inline-flex;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(var(--kx-primary-rgb), 0.34);
  border-radius: 6px;
  color: var(--kx-bg-card) !important;
  background: var(--kx-primary) !important;
  padding: 0 15px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.settings-route-shell[data-theme="black-gold"] .cottage-primary-command,
.settings-route-shell[data-theme="pink-mocha"] .cottage-primary-command {
  color: #0a0a0a !important;
}

.persona-bond-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 116px) minmax(0, 1fr);
  align-items: center;
  width: min(100%, 650px);
  margin: 0 auto;
  padding: 32px 10px 22px;
}

.persona-bond-person {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.persona-orbit-avatar {
  position: relative;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
}

.persona-orbit-avatar::before,
.persona-orbit-avatar::after {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(var(--kx-primary-rgb), 0.32);
  border-radius: 50%;
  content: "";
}

.persona-orbit-avatar::after {
  inset: 10px;
  border-style: dashed;
  opacity: 0.55;
}

.persona-orbit-avatar > .persona-avatar-preview {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-color: rgba(var(--kx-primary-rgb), 0.48);
  box-shadow: 0 10px 32px var(--kx-shadow);
}

.persona-orbit-avatar > .persona-orbit-star {
  position: absolute;
  z-index: 2;
  color: var(--kx-primary);
}

.persona-orbit-star-main {
  top: -1px;
  left: 50%;
  width: 17px;
  height: 17px;
  transform: translateX(-50%);
}

.persona-orbit-star-left,
.persona-orbit-star-right {
  bottom: 7px;
  width: 8px;
  height: 8px;
  opacity: 0.68;
}

.persona-orbit-star-left {
  left: 14px;
}

.persona-orbit-star-right {
  right: 14px;
}

.persona-bond-name {
  display: grid;
  max-width: 150px;
  justify-items: center;
  gap: 3px;
  color: var(--kx-text-main);
}

.persona-bond-name > span {
  color: var(--kx-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.57rem;
  letter-spacing: 0.18em;
}

.persona-bond-name input,
.persona-bond-name strong {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  color: var(--kx-text-main) !important;
  background: transparent !important;
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
  outline: none;
}

.persona-bond-line {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--kx-primary);
}

.persona-bond-line svg {
  width: 28px;
  height: 28px;
}

.cottage-bond-ring-primary {
  stroke: var(--kx-primary);
}

.cottage-bond-ring-secondary {
  stroke: var(--kx-secondary, var(--kx-muted));
}

.persona-bond-line > span {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--kx-primary-rgb), 0.55), transparent);
}

.persona-bond-line small {
  color: var(--kx-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
}

.persona-avatar-actions.compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.persona-avatar-actions.compact button,
.persona-avatar-actions.compact label {
  min-height: 26px;
  border-radius: 5px;
  padding: 0 7px;
  font-size: 0.62rem;
}

.persona-memory-status {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin: 0 auto 20px;
  border: 1px solid rgba(var(--kx-primary-rgb), 0.22);
  border-radius: 999px;
  color: var(--kx-muted);
  background: var(--kx-button-bg);
  padding: 5px 11px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.61rem;
  letter-spacing: 0.08em;
}

.persona-memory-status > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kx-primary);
  box-shadow: 0 0 8px rgba(var(--kx-primary-rgb), 0.42);
}

.persona-status-actions {
  display: flex;
  justify-content: center;
  margin: -10px auto 20px;
}

.persona-responsive-workbench {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.settings-route-shell[data-theme] .persona-deck-panel,
.settings-route-shell[data-theme] .persona-editor-panel,
.settings-route-shell[data-theme] .memory-page-card {
  border: 1px solid var(--kx-border);
  border-radius: 8px;
  color: var(--kx-text-main);
  background: var(--kx-panel-bg);
  box-shadow: 0 18px 54px var(--kx-shadow);
  backdrop-filter: blur(14px) saturate(1.05);
}

.persona-deck-panel,
.persona-editor-panel {
  padding: 16px;
}

.cottage-panel-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: var(--kx-primary);
}

.cottage-panel-heading > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.cottage-panel-heading > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.cottage-panel-heading span {
  color: var(--kx-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
}

.cottage-panel-heading strong {
  color: var(--kx-text-main);
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  font-size: 0.88rem;
  font-weight: 600;
}

.persona-deck-list {
  display: flex;
  overflow-x: auto;
  gap: 7px;
  padding: 1px 1px 5px;
  scrollbar-width: thin;
}

.settings-route-shell[data-theme] .persona-deck-card,
.settings-route-shell[data-theme] .persona-add-card {
  display: inline-flex;
  width: auto;
  min-width: 92px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--kx-border-soft);
  border-radius: 0 12px 0 12px;
  color: var(--kx-muted);
  background: var(--kx-panel-soft);
  padding: 7px 14px;
  text-align: center;
  box-shadow: none;
}

.settings-route-shell[data-theme] .persona-deck-card:hover,
.settings-route-shell[data-theme] .persona-deck-card.active {
  border-color: rgba(var(--kx-primary-rgb), 0.42);
  color: var(--kx-text-main);
  background: var(--kx-active-bg);
  transform: translateY(-1px);
}

.persona-deck-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  color: var(--kx-text-main);
  font-size: 0.76rem;
}

.settings-route-shell[data-theme] .persona-add-card {
  min-width: 42px;
  min-height: 38px;
  padding-inline: 11px;
  color: var(--kx-muted);
  background: transparent;
}

.persona-editor-heading {
  padding-bottom: 11px;
  border-bottom: 1px solid var(--kx-border-soft);
}

.persona-editor-heading > svg {
  color: var(--kx-primary);
}

.persona-core-footnote {
  display: block;
  margin-top: 9px;
  color: var(--kx-muted);
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  font-size: 0.66rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;
  opacity: 0.52;
}

.persona-color-control {
  display: flex;
}

.persona-color-control input {
  width: 28px !important;
  height: 22px;
  border: 1px solid var(--kx-border) !important;
  border-radius: 4px !important;
  padding: 2px;
  cursor: pointer;
}

.cottage-panel-heading > .persona-editor-heading-actions {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.settings-route-shell[data-theme] .persona-reset-inline {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--kx-border-soft);
  border-radius: 5px;
  color: var(--kx-muted);
  background: var(--kx-button-bg);
  padding: 0 9px;
  font-size: 0.63rem;
}

.settings-route-shell[data-theme] .persona-reset-inline:hover {
  border-color: rgba(var(--kx-primary-rgb), 0.4);
  color: var(--kx-text-main);
}

.persona-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-route-shell[data-theme] .persona-field {
  border: 0;
  background: transparent;
  padding: 0;
}

.persona-field > span {
  color: var(--kx-muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.settings-route-shell[data-theme] .persona-field input,
.settings-route-shell[data-theme] .persona-field textarea {
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.persona-core-field {
  margin-top: 11px;
}

.persona-core-field textarea {
  min-height: 210px;
  line-height: 1.75;
}

.persona-code-label svg {
  width: 14px;
  height: 14px;
  color: var(--kx-primary);
}

.persona-cognitive-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 11px;
}

.settings-route-shell[data-theme] .persona-slider-card {
  border-radius: 6px;
  background: var(--kx-panel-soft);
}

.persona-slider-card input[type="range"] {
  accent-color: var(--kx-primary);
}

.persona-editor-footer {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--kx-border-soft);
}

.settings-route-shell[data-theme] .persona-editor-footer > button {
  min-height: 42px;
  border: 1px solid var(--kx-border);
  border-radius: 6px;
  color: var(--kx-muted);
  background: var(--kx-button-bg);
  padding: 0 11px;
}

.persona-editor-footer .persona-memory-gate {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 9px;
  text-align: left;
}

.persona-memory-gate > span {
  display: grid;
  gap: 1px;
}

.persona-memory-gate small {
  color: var(--kx-muted);
  font-size: 0.58rem;
}

.persona-memory-gate.active {
  border-color: rgba(var(--kx-primary-rgb), 0.44) !important;
  color: var(--kx-text-main) !important;
  background: var(--kx-active-bg) !important;
}

.persona-editor-footer .persona-danger-button {
  flex: 0 0 42px;
  width: 42px;
  padding: 0;
  opacity: 0.46;
}

.persona-editor-footer .persona-danger-button:hover:not(:disabled) {
  opacity: 1;
  color: #c97777;
}

.memory-page-heading {
  align-items: center;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--kx-primary) 16%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--kx-panel-bg) 86%, white 14%), color-mix(in srgb, var(--kx-panel-soft) 88%, transparent));
  padding: 18px 20px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--kx-shadow) 52%, transparent);
}

.memory-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.settings-route-shell[data-theme] .memory-head-actions button,
.settings-route-shell[data-theme] .memory-primary-tool {
  min-height: 34px;
  border: 1px solid var(--kx-border);
  border-radius: 6px;
  color: var(--kx-text-main);
  background: var(--kx-button-bg);
  padding: 0 10px;
  font-size: 0.7rem;
}

.settings-route-shell[data-theme] .memory-primary-tool {
  color: var(--kx-bg-card);
  background: var(--kx-primary);
}

.memory-overview-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin: 16px 0;
  color: var(--kx-muted);
  font-size: 0.67rem;
}

.memory-overview-line > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.memory-overview-line svg {
  width: 13px;
  height: 13px;
  color: var(--kx-primary);
}

.memory-overview-line strong {
  color: var(--kx-text-main);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
}

.settings-route-shell[data-theme] .memory-page-card {
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 15px;
}

.settings-route-shell[data-theme] .memory-page-card > .settings-section {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.settings-route-shell[data-theme] .memory-page-card > .settings-section + .settings-section {
  padding-top: 14px;
  border-top: 1px solid var(--kx-border-soft);
}

.memory-page-card .settings-section-toggle {
  padding: 0 0 10px;
}

.memory-page-card .settings-section-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.settings-route-shell[data-theme] .memory-page-card .settings-section-body {
  border: 0;
  border-radius: 6px;
  background: var(--kx-panel-soft);
  padding: 12px;
  box-shadow: none;
}

.settings-route-shell[data-theme] .memory-compose-card .settings-section-body {
  border-left: 0;
}

.memory-compose textarea {
  min-height: 88px;
  line-height: 1.7;
}

.memory-compose-foot {
  gap: 8px;
}

.memory-toolbar {
  display: block;
}

.settings-route-shell[data-theme] .memory-search,
.settings-route-shell[data-theme] .memory-count-chip {
  border: 1px solid var(--kx-border);
  border-radius: 6px;
  color: var(--kx-muted);
  background: var(--kx-input-bg);
  box-shadow: none;
}

.memory-list {
  display: grid;
  gap: 7px;
}

.settings-route-shell[data-theme] .memory-entry-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--kx-border-soft);
  border-left: 1px solid var(--kx-border-soft);
  border-radius: 8px;
  color: var(--kx-text-main);
  background: var(--kx-panel-bg);
  padding: 0;
  box-shadow: 0 7px 20px var(--kx-shadow);
  transition: border-color 170ms ease, background 170ms ease;
}

.settings-route-shell[data-theme] .memory-entry-card:hover {
  border-color: rgba(var(--kx-primary-rgb), 0.38);
}

.settings-route-shell[data-theme] .memory-entry-card.memory-tone-1 {
  background: color-mix(in srgb, var(--kx-panel-bg) 88%, var(--kx-primary) 12%);
}

.settings-route-shell[data-theme] .memory-entry-card.memory-tone-2 {
  background: color-mix(in srgb, var(--kx-panel-soft) 92%, var(--kx-primary) 8%);
}

.memory-entry-summary {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: 42px 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  color: inherit;
  background: transparent;
  padding: 10px 13px 10px 11px;
  text-align: left;
}

.memory-entry-day {
  color: color-mix(in srgb, var(--kx-primary) 62%, transparent);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.72rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.memory-entry-symbol {
  display: grid;
  width: 24px;
  height: 30px;
  place-items: center;
  border-left: 1px solid var(--kx-border);
}

.memory-entry-symbol svg {
  width: 13px;
  height: 13px;
  color: var(--kx-primary);
  opacity: 0.66;
}

.memory-entry-summary-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.memory-entry-summary-copy strong,
.memory-entry-summary-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-entry-summary-copy strong {
  color: var(--kx-text-main);
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.memory-entry-summary-copy small {
  color: var(--kx-muted);
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  opacity: 0.68;
}

.memory-entry-chevron {
  color: var(--kx-muted);
  opacity: 0.42;
  transition: transform 220ms ease, opacity 180ms ease;
}

.memory-entry-card.expanded .memory-entry-chevron {
  opacity: 0.82;
  transform: rotate(180deg);
}

.memory-entry-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
}

.memory-entry-card.expanded .memory-entry-expand {
  grid-template-rows: 1fr;
}

.memory-entry-expand-inner {
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  padding: 0 15px 0 77px;
  opacity: 0;
  transition: padding 260ms ease, border-color 260ms ease, opacity 180ms ease;
}

.memory-entry-card.expanded .memory-entry-expand-inner {
  border-top-color: var(--kx-border-soft);
  padding-top: 13px;
  padding-bottom: 13px;
  opacity: 1;
}

.memory-entry-content {
  margin: 0 0 12px;
  padding: 0;
  color: var(--kx-text-main);
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.9;
  white-space: pre-wrap;
}

.settings-route-shell[data-theme] .memory-tag-chip,
.settings-route-shell[data-theme] .memory-mini-chip,
.settings-route-shell[data-theme] .memory-chip-add {
  border-color: var(--kx-border-soft);
  color: var(--kx-muted);
  background: var(--kx-button-bg);
}

.memory-entry-meta button {
  opacity: 0.34;
  transition: opacity 160ms ease, color 160ms ease;
}

.memory-entry-card:hover .memory-entry-meta button,
.memory-entry-card.expanded .memory-entry-meta button {
  opacity: 0.74;
}

.memory-glyph-frame {
  stroke: var(--kx-primary);
}

.memory-glyph-page {
  stroke: var(--kx-muted);
}

.memory-glyph-page-fill {
  fill: var(--kx-muted);
}

@media (max-width: 520px) {
  .memory-entry-summary {
    grid-template-columns: 34px 20px minmax(0, 1fr) 15px;
    gap: 7px;
    padding-inline: 9px;
  }

  .memory-entry-day {
    font-size: 1.48rem;
  }

  .memory-entry-expand-inner {
    padding-left: 63px;
  }
}

@media (min-width: 1040px) {
  .settings-route-shell .cottage-ritual-page {
    width: min(100%, 1120px);
  }

  .persona-responsive-workbench {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.7fr);
    align-items: start;
  }

  .persona-deck-panel {
    position: sticky;
    top: 78px;
  }

  .memory-page-card {
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.55fr);
    align-items: start;
  }

  .memory-page-card > .memory-compose-card {
    position: sticky;
    top: 78px;
  }

  .memory-page-card > .settings-section + .settings-section {
    padding-top: 0;
    padding-left: 15px;
    border-top: 0;
    border-left: 1px solid var(--kx-border-soft);
  }
}

@media (max-width: 760px) {
  .cottage-route-brand span {
    display: none;
  }

  .cottage-route-brand {
    margin-right: 10px;
  }

  .cottage-route-brand svg {
    width: 22px;
    height: 22px;
  }

  .settings-route-shell.persona-route-shell,
  .settings-route-shell.memory-route-shell {
    padding: 68px 12px 28px;
  }

  .cottage-page-heading {
    align-items: flex-start;
    padding: 10px 3px 15px;
  }

  .cottage-page-heading h1 {
    font-size: 1.75rem;
  }

  .cottage-page-heading p {
    font-size: 0.72rem;
  }

  .cottage-primary-command {
    width: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 0;
  }

  .persona-status-actions .cottage-primary-command {
    width: auto;
    min-height: 32px;
    padding: 0 13px;
    font-size: 0.66rem;
  }

  .persona-bond-stage {
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
    padding: 25px 0 18px;
  }

  .persona-orbit-avatar {
    width: 86px;
    height: 86px;
  }

  .persona-orbit-avatar > .persona-avatar-preview {
    width: 58px;
    height: 58px;
  }

  .persona-avatar-actions.compact span {
    display: none;
  }

  .persona-avatar-actions.compact button,
  .persona-avatar-actions.compact label {
    width: 28px;
    padding: 0;
  }

  .persona-editor-grid,
  .persona-cognitive-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .persona-editor-grid {
    gap: 8px;
  }

  .persona-cognitive-row {
    gap: 7px;
  }

  .persona-slider-card {
    padding-inline: 10px;
  }

  .persona-reset-inline span {
    display: none;
  }

  .persona-editor-footer {
    flex-wrap: wrap;
  }

  .persona-editor-footer .persona-memory-gate {
    flex: 1 1 calc(50% - 8px);
    min-width: 150px;
  }

  .memory-page-heading {
    display: grid;
  }

  .memory-head-actions {
    justify-content: flex-start;
  }

  .memory-toolbar {
    grid-template-columns: 1fr auto;
  }

  .memory-toolbar .memory-count-chip:last-child {
    display: none;
  }
}

@media (max-width: 430px) {
  .cottage-route-switcher {
    justify-content: space-between;
    gap: 2px;
    padding-inline: 7px;
  }

  .cottage-route-switcher button {
    width: 36px;
  }

  .persona-bond-stage {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  }

  .persona-bond-line small {
    display: none;
  }

  .memory-head-actions button {
    min-width: 34px;
  }
}

.companion-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.30);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  padding: 4px 5px 4px 12px;
}

.cinema-shell[data-theme] .companion-input-row textarea {
  min-height: 32px;
  max-height: 72px;
  flex: 1;
  resize: none;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  padding: 6px 2px;
  font-size: 0.78rem;
  line-height: 1.55;
  outline: none;
}

.cinema-shell[data-theme] .companion-input-row textarea::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.cinema-shell[data-theme] .companion-input-row .primary-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.14);
  padding: 0;
}

.cinema-shell[data-theme] .companion-input-row .primary-button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.24);
}

.cinema-shell[data-theme] .companion-input-row .primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* Keep cinema popovers close to the original room: light blur, theme-aware glass. */
.cinema-shell[data-theme] .subtitle-card,
.cinema-shell[data-theme] .companion-plan-panel .panel,
.cinema-shell[data-theme] .source-panel,
.cinema-shell[data-theme] .playlist-panel .panel {
  backdrop-filter: blur(4px) saturate(1.02);
}

.cinema-shell[data-theme="black-gold"] .subtitle-card,
.cinema-shell[data-theme="black-gold"] .companion-plan-panel .panel,
.cinema-shell[data-theme="black-gold"] .source-panel {
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel {
  color: rgba(255, 255, 255, 0.78);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .panel,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .panel {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(16, 13, 10, 0.72);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .panel-title,
.cinema-shell[data-theme="black-gold"] .playlist-panel .record-title-line strong,
.cinema-shell[data-theme="black-gold"] .playlist-panel .playlist-empty strong,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .panel-title,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-title-line strong,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .playlist-empty strong {
  color: rgba(255, 255, 255, 0.86);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .panel-title svg,
.cinema-shell[data-theme="black-gold"] .playlist-panel .playlist-empty svg,
.cinema-shell[data-theme="black-gold"] .playlist-panel .record-thumb svg,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .panel-title svg,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .playlist-empty svg,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-thumb svg {
  color: rgba(255, 255, 255, 0.50);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .panel-title-meta,
.cinema-shell[data-theme="black-gold"] .playlist-panel .record-row small,
.cinema-shell[data-theme="black-gold"] .playlist-panel .record-meta,
.cinema-shell[data-theme="black-gold"] .playlist-panel .playlist-empty p,
.cinema-shell[data-theme="black-gold"] .playlist-panel .playlist-footnote,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .panel-title-meta,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-row small,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-meta,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .playlist-empty p,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .playlist-footnote {
  color: rgba(255, 255, 255, 0.46);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .panel-close,
.cinema-shell[data-theme="black-gold"] .playlist-panel .record-row button,
.cinema-shell[data-theme="black-gold"] .playlist-panel .soft-button,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .panel-close,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-row button,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .soft-button {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.07);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .panel-close:hover,
.cinema-shell[data-theme="black-gold"] .playlist-panel .record-row button:hover,
.cinema-shell[data-theme="black-gold"] .playlist-panel .soft-button:hover,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .panel-close:hover,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-row button:hover,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .soft-button:hover {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .record-row,
.cinema-shell[data-theme="black-gold"] .playlist-panel .playlist-empty,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-row,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .playlist-empty {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .record-thumb,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-thumb {
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.32);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .record-title-line em,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-title-line em {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.07);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .record-title-line em.current,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-title-line em.current {
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 210, 151, 0.16);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .record-progress,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-progress {
  background: rgba(255, 255, 255, 0.10);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .record-progress i,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-progress i {
  background: rgba(255, 219, 170, 0.62);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .record-resume,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-resume {
  border-color: rgba(255, 226, 187, 0.24) !important;
  background: rgba(255, 244, 226, 0.12) !important;
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .record-actions .danger,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .record-actions .danger {
  color: rgba(255, 209, 199, 0.72);
  background: rgba(180, 55, 40, 0.12);
}

.cinema-shell[data-theme="black-gold"] .playlist-panel .playlist-footnote,
.cinema-shell[data-theme="pink-mocha"] .playlist-panel .playlist-footnote {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

/* Unified cinema floating panels: subtitles, playlist, and companion dialogue share one surface. */
.cinema-shell[data-theme] {
  --cinema-float-bg: rgba(0, 0, 0, 0.34);
  --cinema-float-border: rgba(255, 255, 255, 0.10);
  --cinema-float-text: rgba(255, 255, 255, 0.78);
  --cinema-float-strong: rgba(255, 255, 255, 0.88);
  --cinema-float-muted: rgba(255, 255, 255, 0.50);
  --cinema-float-faint: rgba(255, 255, 255, 0.34);
  --cinema-float-inner: rgba(255, 255, 255, 0.055);
  --cinema-float-inner-strong: rgba(255, 255, 255, 0.12);
  --cinema-float-button: rgba(255, 255, 255, 0.075);
  --cinema-float-button-hover: rgba(255, 255, 255, 0.15);
  --cinema-float-shadow: rgba(0, 0, 0, 0.28);
}

.cinema-shell[data-theme] .subtitle-card,
.cinema-shell[data-theme] .playlist-panel .panel,
.cinema-shell[data-theme] .sofa-companion .panel {
  border-color: var(--cinema-float-border);
  color: var(--cinema-float-text);
  background: var(--cinema-float-bg);
  box-shadow: 0 16px 44px var(--cinema-float-shadow);
  backdrop-filter: blur(4px) saturate(1.02);
}

.cinema-shell[data-theme] .playlist-panel,
.cinema-shell[data-theme] .sofa-companion {
  color: var(--cinema-float-text);
}

.cinema-shell[data-theme] .playlist-panel .panel-title,
.cinema-shell[data-theme] .playlist-panel .record-title-line strong,
.cinema-shell[data-theme] .playlist-panel .playlist-empty strong,
.cinema-shell[data-theme] .sofa-companion .panel-title {
  color: var(--cinema-float-strong);
}

.cinema-shell[data-theme] .playlist-panel .panel-title svg,
.cinema-shell[data-theme] .playlist-panel .playlist-empty svg,
.cinema-shell[data-theme] .playlist-panel .record-thumb svg,
.cinema-shell[data-theme] .sofa-companion .panel-title svg {
  color: var(--cinema-float-muted);
}

.cinema-shell[data-theme] .playlist-panel .panel-title-meta,
.cinema-shell[data-theme] .playlist-panel .record-row small,
.cinema-shell[data-theme] .playlist-panel .record-meta,
.cinema-shell[data-theme] .playlist-panel .playlist-empty p,
.cinema-shell[data-theme] .playlist-panel .playlist-footnote,
.cinema-shell[data-theme] .sofa-companion .chat-bubble.companion {
  color: var(--cinema-float-muted);
}

.cinema-shell[data-theme] .subtitle-pill,
.cinema-shell[data-theme] .subtitle-close,
.cinema-shell[data-theme] .playlist-panel .panel-close,
.cinema-shell[data-theme] .playlist-panel .record-row button,
.cinema-shell[data-theme] .playlist-panel .soft-button,
.cinema-shell[data-theme] .sofa-companion .panel-close {
  border-color: var(--cinema-float-border);
  color: var(--cinema-float-text);
  background: var(--cinema-float-button);
}

.cinema-shell[data-theme] .subtitle-pill:hover,
.cinema-shell[data-theme] .subtitle-pill.active,
.cinema-shell[data-theme] .subtitle-close:hover,
.cinema-shell[data-theme] .playlist-panel .panel-close:hover,
.cinema-shell[data-theme] .playlist-panel .record-row button:hover,
.cinema-shell[data-theme] .playlist-panel .soft-button:hover,
.cinema-shell[data-theme] .sofa-companion .panel-close:hover {
  border-color: rgba(var(--kx-primary-rgb), 0.34);
  color: var(--cinema-float-strong);
  background: var(--cinema-float-button-hover);
}

.cinema-shell[data-theme] .playlist-panel .record-row,
.cinema-shell[data-theme] .playlist-panel .playlist-empty,
.cinema-shell[data-theme] .playlist-panel .record-thumb,
.cinema-shell[data-theme] .playlist-panel .playlist-footnote,
.cinema-shell[data-theme] .companion-input-row,
.cinema-shell[data-theme] .sofa-companion .chat-bubble.companion {
  border-color: var(--cinema-float-border);
  background: var(--cinema-float-inner);
}

.cinema-shell[data-theme] .sofa-companion .chat-bubble.user {
  color: var(--cinema-float-strong);
  background: var(--cinema-float-inner-strong);
}

.cinema-shell[data-theme] .playlist-panel .record-title-line em {
  border-color: var(--cinema-float-border);
  color: var(--cinema-float-faint);
  background: var(--cinema-float-inner);
}

.cinema-shell[data-theme] .playlist-panel .record-title-line em.current,
.cinema-shell[data-theme] .playlist-panel .record-resume {
  color: var(--cinema-float-strong);
  background: rgba(var(--kx-primary-rgb), 0.16) !important;
}

.cinema-shell[data-theme] .playlist-panel .record-progress {
  background: var(--cinema-float-inner-strong);
}

.cinema-shell[data-theme] .playlist-panel .record-progress i {
  background: rgba(var(--kx-primary-rgb), 0.72);
}

.cinema-shell[data-theme] .companion-input-row textarea {
  color: var(--cinema-float-text);
}

.cinema-shell[data-theme] .sofa-companion .panel {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(5px) saturate(1.03);
}

.cinema-shell[data-theme] .sofa-companion .chat-bubble.companion {
  color: rgba(255, 255, 255, 0.70);
  background: transparent;
  box-shadow: none;
}

.cinema-shell[data-theme] .companion-input-row textarea::placeholder {
  color: var(--cinema-float-faint);
}

/* Cinema room keeps the theater controls atmospheric without darkening the KI-CO mark. */
.cinema-shell[data-theme] {
  color: rgba(255, 244, 226, 0.84);
}

.cinema-shell[data-theme] .cinema-header {
  border-color: rgba(255, 244, 226, 0.20);
  color: rgba(255, 250, 244, 0.92);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(1.08);
}

.cinema-shell[data-theme] .cinema-header p,
.cinema-shell[data-theme] .cinema-header span,
.cinema-shell[data-theme] .cinema-header small {
  color: rgba(255, 244, 226, 0.62);
}

.cinema-shell[data-theme="white-gold"] .cinema-header {
  border-color: rgba(149, 115, 63, 0.14);
  color: #463729;
  background: rgba(255, 252, 244, 0.42);
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(1.06);
}

.cinema-shell[data-theme="white-gold"] .cinema-header p,
.cinema-shell[data-theme="white-gold"] .cinema-header span,
.cinema-shell[data-theme="white-gold"] .cinema-header small {
  color: rgba(70, 55, 41, 0.58);
}

.cinema-shell[data-theme] .room-side-entry button,
.cinema-shell[data-theme] .screen-controls,
.cinema-shell[data-theme] .status-strip,
.cinema-shell[data-theme] .talk-launcher,
.cinema-shell[data-theme] .web-assist-button,
.cinema-shell[data-theme] .web-time-sync,
.cinema-shell[data-theme] .screenshot-ready {
  border-color: rgba(255, 244, 226, 0.20);
  color: rgba(255, 248, 238, 0.86);
  background: rgba(30, 19, 14, 0.50);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px) saturate(1.08);
}

.cinema-shell[data-theme] .icon-button,
.cinema-shell[data-theme] .glass-action,
.cinema-shell[data-theme] .tool-button,
.cinema-shell[data-theme] .soft-button,
.cinema-shell[data-theme] .compact-soft-button,
.cinema-shell[data-theme] .web-time-sync button,
.cinema-shell[data-theme] .player-corner-controls .compact-soft-button {
  border-color: rgba(255, 244, 226, 0.22);
  color: rgba(255, 248, 238, 0.86);
  background: rgba(255, 244, 226, 0.10);
}

.cinema-shell[data-theme] .icon-button:hover,
.cinema-shell[data-theme] .icon-button.active,
.cinema-shell[data-theme] .glass-action:hover,
.cinema-shell[data-theme] .tool-button:hover,
.cinema-shell[data-theme] .soft-button:hover,
.cinema-shell[data-theme] .web-assist-button:hover,
.cinema-shell[data-theme] .web-time-sync button:hover,
.cinema-shell[data-theme] .talk-launcher:hover,
.cinema-shell[data-theme] .room-side-entry button:hover {
  border-color: rgba(255, 226, 187, 0.42);
  color: #fff8ee;
  background: rgba(255, 244, 226, 0.18);
}

.cinema-shell[data-theme] .room-side-entry {
  display: none;
}

.cinema-shell[data-theme] .source-panel,
.cinema-shell[data-theme] .subtitle-card,
.cinema-shell[data-theme] .companion-plan-panel .panel,
.cinema-shell[data-theme] .companion-map-popover,
.cinema-shell[data-theme] .playlist-panel .panel,
.cinema-shell[data-theme] .sofa-companion .panel {
  border-color: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(10, 8, 7, 0.62);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(5px) saturate(1.03);
}

.cinema-shell[data-theme] .source-panel strong,
.cinema-shell[data-theme] .subtitle-card strong,
.cinema-shell[data-theme] .companion-plan-panel strong,
.cinema-shell[data-theme] .companion-map-panel strong,
.cinema-shell[data-theme] .playlist-panel strong,
.cinema-shell[data-theme] .panel-title,
.cinema-shell[data-theme] .option-label,
.cinema-shell[data-theme] .playlist-panel .record-title-line strong {
  color: rgba(255, 255, 255, 0.88);
}

.cinema-shell[data-theme] .source-panel p,
.cinema-shell[data-theme] .source-panel small,
.cinema-shell[data-theme] .subtitle-card p,
.cinema-shell[data-theme] .subtitle-card small,
.cinema-shell[data-theme] .companion-plan-panel p,
.cinema-shell[data-theme] .companion-plan-panel small,
.cinema-shell[data-theme] .companion-map-help,
.cinema-shell[data-theme] .companion-map-cue,
.cinema-shell[data-theme] .playlist-panel small,
.cinema-shell[data-theme] .playlist-panel .record-meta,
.cinema-shell[data-theme] .panel-title-meta {
  color: rgba(255, 255, 255, 0.52);
}

.cinema-shell[data-theme] .plan-bubble {
  border-color: rgba(255, 255, 255, 0.48);
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

.cinema-shell[data-theme] .plan-bubble.is-hint {
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.12);
}

.cinema-shell[data-theme] .plan-bubble-listen,
.cinema-shell[data-theme] .plan-bubble-close {
  border-color: rgba(255, 255, 255, 0.14);
  color: inherit;
  background: rgba(255, 255, 255, 0.10);
}

.cinema-shell[data-theme] .plan-bubble-listen:hover,
.cinema-shell[data-theme] .plan-bubble-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

.vector-page {
  max-width: min(980px, calc(100vw - 32px));
}

.vector-page-card {
  display: grid;
  gap: 16px;
}

.vector-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 4px;
}

.vector-hero h1 {
  margin: 0;
  color: var(--kx-text);
  font-size: clamp(1.45rem, 3.5vw, 2.1rem);
  line-height: 1.1;
}

.vector-hero p {
  margin: 6px 0 0;
  color: var(--kx-muted);
  font-size: 0.92rem;
}

.vector-note,
.vector-cache-card,
.vector-section {
  border: 1px solid var(--kx-border);
  border-radius: 18px;
  background: var(--kx-surface);
  box-shadow: var(--kx-shadow-soft);
}

.vector-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  color: var(--kx-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.vector-note svg,
.vector-section-title svg,
.vector-cache-card svg {
  color: var(--kx-primary);
  flex: 0 0 auto;
}

.vector-section {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.vector-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kx-text);
  font-size: 1rem;
}

.vector-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 12px;
}

.vector-field {
  display: grid;
  gap: 8px;
  color: var(--kx-muted);
  font-size: 0.86rem;
}

.vector-field input,
.vector-field select,
.vector-test-row textarea {
  width: 100%;
  border: 1px solid var(--kx-border);
  border-radius: 14px;
  outline: none;
  color: var(--kx-text);
  background: color-mix(in srgb, var(--kx-surface-strong) 76%, transparent);
}

.vector-field input,
.vector-field select {
  min-height: 42px;
  padding: 0 13px;
}

.vector-field.wide {
  grid-column: span 2;
}

.vector-cache-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.vector-cache-card.active {
  border-color: color-mix(in srgb, var(--kx-primary) 58%, var(--kx-border));
  background: color-mix(in srgb, var(--kx-primary) 14%, var(--kx-surface-strong));
}

.vector-cache-card div {
  display: grid;
  gap: 4px;
}

.vector-cache-card strong {
  color: var(--kx-text);
  font-size: 0.92rem;
}

.vector-cache-card span {
  color: var(--kx-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.vector-test-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

.vector-test-row textarea {
  resize: vertical;
  min-height: 86px;
  padding: 12px 14px;
  line-height: 1.6;
}

.vector-test-row button,
.vector-clear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--kx-primary) 40%, var(--kx-border));
  border-radius: 14px;
  color: var(--kx-text);
  background: color-mix(in srgb, var(--kx-primary) 16%, var(--kx-surface-strong));
  padding: 0 18px;
  font-weight: 700;
}

.vector-clear-button {
  justify-self: start;
  min-height: 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.vector-clear-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.vector-explain {
  display: grid;
  gap: 12px;
}

.vector-cache-badge {
  justify-self: start;
  border: 1px solid var(--kx-border);
  border-radius: 999px;
  color: var(--kx-muted);
  background: color-mix(in srgb, var(--kx-surface-strong) 86%, transparent);
  padding: 6px 11px;
  font-size: 0.78rem;
  font-weight: 700;
}

.vector-cache-badge.hit {
  border-color: color-mix(in srgb, #6fcf97 46%, var(--kx-border));
  color: color-mix(in srgb, #6fcf97 78%, var(--kx-text));
}

.vector-cache-badge.miss {
  border-color: color-mix(in srgb, var(--kx-primary) 42%, var(--kx-border));
}

.vector-explain-lines {
  display: grid;
  gap: 6px;
  color: var(--kx-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.vector-explain-lines p {
  margin: 0;
}

.vector-result-list {
  display: grid;
  gap: 9px;
}

.vector-result-item {
  display: grid;
  gap: 8px;
  border: 1px solid var(--kx-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--kx-surface-strong) 72%, transparent);
  padding: 11px 12px;
}

.vector-result-item.selected {
  border-color: color-mix(in srgb, var(--kx-primary) 44%, var(--kx-border));
  background: color-mix(in srgb, var(--kx-primary) 10%, var(--kx-surface-strong));
}

.vector-result-item div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vector-result-item strong {
  color: var(--kx-text);
}

.vector-result-item span,
.vector-result-item small,
.vector-result-item p {
  margin: 0;
  color: var(--kx-muted);
  font-size: 0.8rem;
}

.vector-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.vector-stat-grid div,
.vector-empty {
  border: 1px solid var(--kx-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--kx-surface-strong) 70%, transparent);
}

.vector-stat-grid div {
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: center;
}

.vector-stat-grid strong {
  color: var(--kx-text);
  font-size: 1.15rem;
}

.vector-stat-grid span,
.vector-empty {
  color: var(--kx-muted);
  font-size: 0.84rem;
}

.vector-empty {
  padding: 14px;
  line-height: 1.6;
}

.vector-rag-skip-note {
  border-color: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 38%, var(--kx-border)) !important;
  background: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 12%, var(--kx-surface-strong) 88%) !important;
  color: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 86%, var(--kx-text-main)) !important;
}

.vector-rag-skip-note::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 86%, var(--kx-text-main));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 14%, transparent);
  vertical-align: 0.02em;
}

@media (max-width: 720px) {
  .vector-config-grid,
  .vector-test-row,
  .vector-stat-grid {
    grid-template-columns: 1fr;
  }

  .vector-test-row button {
    min-height: 42px;
  }
}

.vector-section-panel {
  padding: 0;
  overflow: hidden;
}

.vector-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--kx-border) 72%, transparent);
}

.vector-panel-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  border: 0;
  background: transparent;
  color: var(--kx-text);
  text-align: left;
  padding: 0;
}

.vector-panel-title strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
}

.vector-panel-title small {
  display: block;
  margin-top: 2px;
  color: var(--kx-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(520px, 58vw);
}

.vector-panel-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--kx-primary) 28%, var(--kx-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-primary) 9%, var(--kx-surface-strong));
  color: var(--kx-primary);
  flex: 0 0 auto;
}

.vector-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.vector-icon-button,
.vector-compact-button {
  border: 1px solid var(--kx-border);
  color: var(--kx-text);
  background: color-mix(in srgb, var(--kx-surface-strong) 78%, transparent);
}

.vector-icon-button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vector-compact-button {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
}

.vector-chevron {
  transition: transform 0.18s ease;
}

.vector-chevron.open {
  transform: rotate(180deg);
}

.vector-panel-body {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.vector-test-actions {
  display: grid;
  gap: 8px;
  min-width: 118px;
}

.vector-test-row button.secondary {
  background: color-mix(in srgb, var(--kx-surface-strong) 86%, transparent);
  border-color: var(--kx-border);
}

.vector-test-row button.ghost {
  background: transparent;
  border-color: var(--kx-border);
  color: var(--kx-muted);
}

.vector-debug-block,
.vector-diagnostic-list,
.vector-cache-summary,
.vector-trace-card,
.vector-subpanel {
  border: 1px solid var(--kx-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--kx-surface-strong) 72%, transparent);
}

.vector-debug-block {
  padding: 11px 12px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  color: var(--kx-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.vector-debug-block p,
.vector-cache-summary span,
.vector-trace-card p {
  margin: 0;
}

.vector-diagnostic-list {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  color: var(--kx-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.vector-subpanel {
  display: grid;
  gap: 12px;
  padding: 13px;
}

.vector-subpanel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kx-text);
  font-size: 0.92rem;
}

.vector-debug-rows,
.vector-context-rows,
.vector-trace-list,
.vector-cache-turns {
  display: grid;
  gap: 10px;
}

.vector-debug-row,
.vector-context-row,
.vector-trace-list article,
.vector-cache-turns article {
  border: 1px solid color-mix(in srgb, var(--kx-border) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--kx-surface) 64%, transparent);
  padding: 11px;
}

.vector-debug-row.selected {
  border-color: color-mix(in srgb, var(--kx-primary) 46%, var(--kx-border));
  background: color-mix(in srgb, var(--kx-primary) 8%, var(--kx-surface));
}

.vector-debug-row-head,
.vector-context-meta,
.vector-trace-head,
.vector-cache-turns article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vector-debug-row-head {
  justify-content: flex-start;
}

.vector-debug-row-head span {
  color: var(--kx-primary);
  font-weight: 800;
}

.vector-debug-row-head strong,
.vector-context-row strong,
.vector-trace-list strong,
.vector-cache-turns strong {
  color: var(--kx-text);
}

.vector-score-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.vector-score-grid span,
.vector-context-meta span,
.vector-tags span,
.vector-source-mix span,
.vector-pill {
  border: 1px solid color-mix(in srgb, var(--kx-border) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-surface-strong) 76%, transparent);
  color: var(--kx-muted);
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 5px 8px;
}

.vector-tags,
.vector-source-mix {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vector-tags {
  margin-top: 9px;
}

.vector-debug-row small {
  display: block;
  margin-top: 8px;
  color: var(--kx-muted);
  font-size: 0.76rem;
}

.vector-context-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.vector-context-row p,
.vector-trace-list p,
.vector-cache-turns small {
  margin: 7px 0 0;
  color: var(--kx-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.vector-quality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.vector-quality-grid div {
  border: 1px solid var(--kx-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--kx-surface-strong) 70%, transparent);
  display: grid;
  gap: 4px;
  padding: 11px;
  text-align: center;
}

.vector-quality-grid strong {
  color: var(--kx-text);
  font-size: 1.02rem;
}

.vector-quality-grid span {
  color: var(--kx-muted);
  font-size: 0.74rem;
}

.vector-trace-card,
.vector-cache-summary {
  display: grid;
  gap: 7px;
  padding: 12px;
  color: var(--kx-muted);
  font-size: 0.83rem;
  line-height: 1.55;
}

.vector-trace-notice {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--kx-primary) 22%, var(--kx-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-primary) 6%, transparent);
  color: var(--kx-muted);
  font-size: 0.76rem;
  line-height: 1.3;
  padding: 5px 10px;
}

.vector-trace-notice span {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-primary) 72%, var(--kx-text));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kx-primary) 10%, transparent);
}

.vector-trace-notice strong {
  color: var(--kx-muted);
  font-weight: 600;
}

.vector-trace-diagnostics {
  border-top: 1px solid color-mix(in srgb, var(--kx-border) 72%, transparent);
  margin-top: 2px;
  padding-top: 7px;
}

.vector-trace-diagnostics summary {
  cursor: pointer;
  color: var(--kx-primary);
  font-size: 0.76rem;
  font-weight: 700;
}

.vector-trace-diagnostics p {
  margin-top: 5px;
  word-break: break-word;
}

.vector-pill.hit {
  border-color: color-mix(in srgb, #6fcf97 54%, var(--kx-border));
  color: color-mix(in srgb, #6fcf97 78%, var(--kx-text));
}

.vector-pill.miss {
  border-color: color-mix(in srgb, var(--kx-primary) 42%, var(--kx-border));
}

.vector-trace-list article {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
}

.vector-trace-list article > span {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-primary) 15%, var(--kx-surface-strong));
  color: var(--kx-primary);
  font-size: 0.75rem;
  font-weight: 800;
}

.vector-stat-grid-wide {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.vector-cache-turns article {
  display: grid;
  gap: 8px;
}

.vector-cache-turns article > div:last-of-type {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.vector-cache-turns article > div:last-of-type span {
  color: var(--kx-muted);
  font-size: 0.77rem;
}

@media (max-width: 860px) {
  .vector-score-grid,
  .vector-quality-grid,
  .vector-stat-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vector-panel-header,
  .vector-debug-row-head,
  .vector-cache-turns article > div,
  .vector-trace-head {
    align-items: flex-start;
  }

  .vector-panel-title small {
    max-width: 48vw;
  }

  .vector-test-actions,
  .vector-score-grid,
  .vector-quality-grid,
  .vector-stat-grid-wide {
    grid-template-columns: 1fr;
  }
}

/* Vector mixer density pass: match the compact original cottage layout. */
.vector-page {
  width: min(1020px, calc(100vw - 56px));
  max-width: 100%;
}

.vector-page-card {
  gap: 12px;
}

.vector-note {
  padding: 9px 12px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.vector-section,
.vector-section-panel {
  border-radius: 18px;
  box-shadow: none;
}

.vector-panel-header {
  min-height: 50px;
  padding: 10px 14px;
}

.vector-panel-title {
  gap: 9px;
}

.vector-panel-icon {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
}

.vector-panel-icon svg {
  width: 18px;
  height: 18px;
}

.vector-panel-title strong {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
}

.vector-panel-title small {
  margin-top: 0;
  font-size: 0.74rem;
  max-width: min(520px, 58vw);
}

.vector-panel-actions {
  gap: 6px;
}

.vector-icon-button {
  width: 30px;
  height: 30px;
}

.vector-compact-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.vector-panel-body {
  gap: 10px;
  padding: 11px 14px 14px;
}

.vector-config-grid {
  gap: 10px;
}

.vector-field {
  gap: 5px;
  font-size: 0.78rem;
}

.vector-field input {
  min-height: 36px;
  padding: 0 11px;
}

.vector-cache-card {
  padding: 9px 11px;
  border-radius: 13px;
}

.vector-cache-card strong {
  font-size: 0.82rem;
}

.vector-cache-card span {
  font-size: 0.74rem;
  line-height: 1.35;
}

.vector-test-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.vector-test-row textarea {
  min-height: 42px;
  max-height: 82px;
  padding: 9px 11px;
  line-height: 1.4;
  font-size: 0.84rem;
}

.vector-test-actions {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.vector-test-row button,
.vector-clear-button {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.vector-debug-block,
.vector-diagnostic-list,
.vector-cache-summary,
.vector-trace-card,
.vector-subpanel {
  border-radius: 14px;
}

.vector-debug-block {
  max-height: 72px;
  overflow: auto;
  padding: 8px 10px;
  font-size: 0.68rem;
  line-height: 1.42;
}

.vector-diagnostic-list {
  padding: 8px 10px;
  font-size: 0.74rem;
  line-height: 1.42;
}

.vector-subpanel {
  gap: 9px;
  padding: 10px;
}

.vector-subpanel-title {
  font-size: 0.82rem;
}

.vector-debug-row,
.vector-context-row,
.vector-trace-list article,
.vector-cache-turns article {
  padding: 9px 10px;
  border-radius: 12px;
}

.vector-debug-row-head strong,
.vector-context-row strong,
.vector-trace-list strong,
.vector-cache-turns strong {
  font-size: 0.82rem;
}

.vector-score-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.vector-score-grid span,
.vector-context-meta span,
.vector-tags span,
.vector-source-mix span,
.vector-pill {
  padding: 4px 7px;
  font-size: 0.68rem;
}

.vector-tags {
  margin-top: 7px;
}

.vector-debug-row small {
  margin-top: 6px;
  font-size: 0.7rem;
}

.vector-context-row p,
.vector-trace-list p,
.vector-cache-turns small {
  margin-top: 5px;
  font-size: 0.76rem;
  line-height: 1.45;
}

.vector-quality-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.vector-quality-grid div,
.vector-stat-grid div {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 9px 12px;
  text-align: left;
}

.vector-quality-grid span,
.vector-stat-grid span {
  order: 1;
  color: var(--kx-text);
  font-size: 0.78rem;
}

.vector-quality-grid strong,
.vector-stat-grid strong {
  order: 2;
  color: var(--kx-primary);
  font-size: 0.82rem;
  line-height: 1;
}

.vector-trace-card,
.vector-cache-summary {
  gap: 5px;
  padding: 10px 12px;
  font-size: 0.76rem;
  line-height: 1.4;
}

.vector-trace-list {
  gap: 7px;
}

.vector-trace-list article {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
}

.vector-trace-list article > span {
  width: 20px;
  height: 20px;
  font-size: 0.68rem;
}

.vector-stat-grid-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vector-cache-turns {
  gap: 7px;
}

.vector-cache-turns article {
  gap: 6px;
}

.vector-cache-turns article > div:last-of-type span {
  font-size: 0.7rem;
}

.vector-empty {
  padding: 10px 12px;
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .vector-page {
    width: min(100vw - 24px, 720px);
    max-width: 100%;
  }

  .vector-test-row {
    grid-template-columns: 1fr;
  }

  .vector-test-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vector-test-row button {
    min-height: 36px;
    padding: 0 9px;
  }

  .vector-quality-grid,
  .vector-stat-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vector-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .vector-test-actions {
    grid-template-columns: 1fr;
  }

  .vector-quality-grid,
  .vector-stat-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.memory-context-settings {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.memory-context-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 12px;
  border: 1px solid var(--kx-border);
  border-radius: 9px;
  background: var(--kx-panel-soft);
  padding: 11px 12px;
}

.memory-context-range > span { display: grid; gap: 3px; }
.memory-context-range strong { color: var(--kx-text-main); font-size: .78rem; }
.memory-context-range small { color: var(--kx-muted); font-size: .62rem; line-height: 1.45; }
.memory-context-range b { color: var(--kx-primary); font-size: .72rem; font-weight: 700; }
.memory-context-range input { grid-column: 1 / -1; width: 100%; accent-color: var(--kx-primary); }

.memory-retrieval-mode-card {
  display: grid;
  gap: 9px;
  border: 1px solid var(--kx-border);
  border-radius: 9px;
  background: var(--kx-panel-soft);
  padding: 12px;
}
.memory-retrieval-mode-card > div:first-child { display: grid; gap: 3px; }
.memory-retrieval-mode-card strong { color: var(--kx-text-main); font-size: .78rem; }
.memory-retrieval-mode-card small,
.memory-retrieval-mode-card p { margin: 0; color: var(--kx-muted); font-size: .62rem; line-height: 1.5; }
.memory-retrieval-mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.memory-retrieval-mode-row button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--kx-border);
  border-radius: 999px;
  color: var(--kx-muted);
  background: var(--kx-input-bg);
  padding: 0 9px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0;
}
.memory-retrieval-mode-row button.active { border-color: var(--kx-primary); color: var(--vector-primary-text); background: var(--kx-primary); }
.settings-standard-star {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: currentColor;
  --interactive-accent: currentColor;
}

/* Settings hierarchy: important choices get a clear theme fill; decorative
   toggles such as font size and HUD stay intentionally quiet. */
.settings-route-shell[data-theme] .provider-tabs button.active,
.settings-route-shell[data-theme] .model-preset-row button.active,
.settings-route-shell[data-theme] .claude-cache-options button.active,
.settings-route-shell[data-theme] .chronos-mode-row button.active,
.settings-route-shell[data-theme] .memory-retrieval-mode-row button.active,
.settings-route-shell[data-theme] .reasoning-toggle-row.active {
  border-color: color-mix(in srgb, var(--kx-primary) 64%, var(--kx-border)) !important;
  color: var(--vector-primary-text) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--kx-primary) 92%, white 5%), color-mix(in srgb, var(--kx-primary) 72%, var(--kx-secondary, var(--kx-primary)) 28%)) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--kx-primary) 16%, transparent);
}

.settings-route-shell[data-theme] .reasoning-toggle-row.active .reasoning-toggle-dot {
  border-color: color-mix(in srgb, white 42%, transparent);
  color: var(--kx-primary);
  background: color-mix(in srgb, white 88%, var(--kx-primary) 12%);
}

.settings-route-shell[data-theme] .font-style-row button.active,
.settings-route-shell[data-theme] .font-size-row button.active,
.settings-route-shell[data-theme] .hud-toggle-row button.active,
.settings-route-shell[data-theme] .reply-emoji-row button.active {
  border-color: color-mix(in srgb, var(--kx-primary) 34%, var(--kx-border)) !important;
  color: color-mix(in srgb, var(--kx-text-main) 86%, var(--kx-primary) 14%) !important;
  background: color-mix(in srgb, var(--kx-primary) 10%, var(--kx-button-bg, transparent)) !important;
  box-shadow: none !important;
}

.settings-route-shell[data-theme="custom"] .provider-tabs button.active,
.settings-route-shell[data-theme="custom"] .chronos-mode-row button.active,
.settings-route-shell[data-theme="custom"] .reasoning-toggle-row.active {
  border-color: transparent !important;
  color: #ffffff !important;
  background: #a694bc !important;
  box-shadow: none !important;
}

.settings-route-shell[data-theme="custom"] .claude-cache-options button.active {
  border-color: transparent !important;
  color: #4f4365 !important;
  background: linear-gradient(135deg, #c7bdcf, #bdb2c8) !important;
  box-shadow: none !important;
}

.settings-route-shell[data-theme="custom"] .model-preset-row button.active {
  border-color: transparent !important;
  color: #4f4365 !important;
  background: linear-gradient(135deg, #d2c7d6, #c7bdcf) !important;
  box-shadow: none !important;
}

.settings-route-shell[data-theme="custom"] .memory-retrieval-mode-row button.active {
  border-color: transparent !important;
  color: #ffffff !important;
  background: var(--kx-readable-gold, #a28576) !important;
  box-shadow: none !important;
}

.settings-route-shell[data-theme="custom"] .reasoning-toggle-row.active .reasoning-toggle-dot {
  border-color: rgba(251, 249, 252, 0.52);
  color: #4f4365;
  background: rgba(251, 249, 252, 0.92);
}

/* Data & backup: compact parity with the private cottage settings panel. */
.backup-management-card {
  display: grid;
  gap: 13px;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  color: var(--kx-text-main);
  background: var(--kx-panel-soft);
  padding: 14px;
}

.backup-intro {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--kx-muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.backup-intro small {
  color: var(--kx-primary);
  font-size: 0.72rem;
}

.backup-safety-note {
  color: var(--kx-text-main);
  font-size: 0.78rem;
  font-weight: 700;
}

.backup-action-list {
  display: grid;
  gap: 9px;
}

.backup-action {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  color: var(--kx-text-main);
  background: var(--kx-input-bg);
  padding: 11px 13px;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease;
}

.backup-action.primary {
  --backup-accent: var(--kx-primary);
  --backup-accent-rgb: var(--kx-primary-rgb);
  --backup-foreground: var(--vector-primary-text, var(--kx-bg-card));
  overflow: visible;
  color: var(--backup-foreground);
  background: var(--backup-accent);
  animation: backupBreathe 3.2s ease-in-out infinite;
  isolation: isolate;
}

.backup-particles {
  position: absolute;
  inset: -12px -14px;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.backup-particles i {
  position: absolute;
  bottom: 24%;
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--kx-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cline x1='2.5' y1='7' x2='11.5' y2='7' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cline x1='7' y1='0.5' x2='7' y2='13.5' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cpath d='M7 0.8 C7 4.2 9.0 6.5 10.8 7 C9.0 7.5 7 9.8 7 13.2 C7 9.8 5.0 7.5 3.2 7 C5.0 6.5 7 4.2 7 0.8 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cline x1='2.5' y1='7' x2='11.5' y2='7' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cline x1='7' y1='0.5' x2='7' y2='13.5' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cpath d='M7 0.8 C7 4.2 9.0 6.5 10.8 7 C9.0 7.5 7 9.8 7 13.2 C7 9.8 5.0 7.5 3.2 7 C5.0 6.5 7 4.2 7 0.8 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  animation: backupParticle 3.2s ease-out infinite;
}

.backup-particles i:nth-child(1) { left: 10%; bottom: 18%; animation-delay: 0s; }
.backup-particles i:nth-child(2) { top: 8%; left: 32%; bottom: auto; width: 10px; height: 10px; animation-delay: .8s; }
.backup-particles i:nth-child(3) { right: 24%; bottom: 8%; animation-delay: 1.6s; }
.backup-particles i:nth-child(4) { top: 18%; right: 7%; bottom: auto; width: 9px; height: 9px; animation-delay: 2.4s; }

@keyframes backupBreathe {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(var(--backup-accent-rgb), 0),
      0 4px 12px rgba(var(--backup-accent-rgb), 0.08);
    filter: brightness(1);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(var(--backup-accent-rgb), 0.16),
      0 8px 24px rgba(var(--backup-accent-rgb), 0.24);
    filter: brightness(1.025);
  }
}

@keyframes backupParticle {
  0%, 18% { opacity: 0; translate: 0 7px; scale: .45; }
  30% { opacity: .72; }
  58% { opacity: 0; translate: 0 -16px; scale: 1.35; }
  100% { opacity: 0; }
}

.backup-action:hover:not(:disabled),
.backup-action.primary {
  border-color: rgba(var(--kx-primary-rgb), 0.34);
  background: var(--kx-active-bg);
}

.backup-action.primary,
.backup-action.primary:hover:not(:disabled) {
  border-color: transparent;
  color: var(--backup-foreground);
  background: var(--backup-accent);
}

.backup-action.primary .backup-action-icon {
  position: relative;
  z-index: 2;
  color: var(--backup-foreground);
  background: rgba(255, 255, 255, 0.16);
}

.backup-action.primary .backup-action-copy {
  position: relative;
  z-index: 2;
}

.backup-action.primary .backup-action-copy strong {
  color: var(--backup-foreground);
}

.backup-action.primary .backup-action-copy small {
  color: color-mix(in srgb, var(--backup-foreground) 78%, transparent);
}

.backup-action.primary .backup-particles i {
  background: var(--backup-foreground);
}

.settings-route-shell[data-theme="custom"] .backup-action.primary {
  --backup-accent: #a694bc;
  --backup-accent-rgb: 166, 148, 188;
  --backup-foreground: #ffffff;
}

.backup-action-import {
  border-color: color-mix(in srgb, var(--kx-primary) 44%, var(--kx-border));
  background:
    radial-gradient(circle at 9% 16%, rgba(var(--kx-primary-rgb), 0.16), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--kx-primary) 16%, var(--kx-input-bg)), color-mix(in srgb, var(--kx-panel-soft) 74%, transparent));
}

.backup-action-import .backup-action-icon {
  color: var(--vector-primary-text);
  background: var(--kx-primary);
}

.backup-action-import:hover:not(:disabled),
.backup-action-import.busy {
  border-color: color-mix(in srgb, var(--kx-primary) 62%, var(--kx-border));
  background:
    radial-gradient(circle at 9% 16%, rgba(var(--kx-primary-rgb), 0.22), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--kx-primary) 24%, var(--kx-input-bg)), color-mix(in srgb, var(--kx-active-bg) 82%, transparent));
}

.backup-action:disabled {
  cursor: wait;
  opacity: 0.76;
}

.backup-action input {
  display: none;
}

.backup-action-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  color: var(--kx-primary);
  background: rgba(var(--kx-primary-rgb), 0.1);
}

.backup-action-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.backup-action-copy strong {
  color: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}

.backup-action-copy small {
  overflow: hidden;
  color: var(--kx-muted);
  font-size: 0.66rem;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-feedback {
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--kx-text-main);
  background: var(--kx-input-bg);
  font-size: 0.76rem;
  line-height: 1.6;
  white-space: pre-line;
}

.backup-feedback.success {
  border-color: rgba(65, 160, 106, 0.3);
}

.backup-feedback.error {
  border-color: rgba(194, 76, 72, 0.42);
  color: #e3827d;
}

.backup-action-icon .spin {
  animation: backupSpin 850ms linear infinite;
}

@keyframes backupSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Final vector density pass: compact cells and type match the original mixer. */
.vector-page-card {
  gap: 10px;
}

.vector-section,
.vector-section-panel {
  border-radius: 14px;
}

.vector-panel-header {
  min-height: 44px;
  padding: 8px 12px;
}

.vector-panel-title strong {
  font-size: 0.86rem;
}

.vector-panel-title small {
  color: var(--kx-muted);
  font-size: 0.7rem;
}

.vector-panel-body {
  gap: 8px;
  padding: 9px 12px 11px;
}

.vector-quality-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.vector-stat-grid-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 10px;
}

.vector-quality-grid div,
.vector-stat-grid div {
  min-height: 36px;
  gap: 4px;
  border-radius: 6px;
  padding: 7px 10px;
}

.vector-quality-grid span,
.vector-stat-grid span {
  font-size: 0.7rem;
}

.vector-quality-grid strong,
.vector-stat-grid strong {
  font-size: 0.72rem;
  font-weight: 500;
}

.vector-trace-card.compact {
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 0.7rem;
}

.vector-trace-card.compact p {
  margin: 0;
  font-size: 0.68rem;
}

.vector-cache-footnote {
  margin: 0;
  color: var(--kx-muted);
  font-size: 0.68rem;
  line-height: 1.42;
}

.vector-cache-turns article {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
}

.vector-cache-turns {
  gap: 6px;
}

.vector-cache-turn-line {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: var(--kx-primary);
  font-size: 0.64rem;
  line-height: 1.35;
}

.vector-cache-turn-line span {
  color: color-mix(in srgb, var(--kx-primary) 82%, var(--kx-text-main));
  font-size: inherit;
  white-space: nowrap;
}

.vector-trace-grid {
  display: grid;
  grid-template-columns: minmax(74px, 0.75fr) minmax(0, 1.55fr);
  gap: 3px 8px;
  border-top: 1px solid color-mix(in srgb, var(--kx-border) 62%, transparent);
  padding-top: 6px;
  font-size: 0.66rem;
  line-height: 1.32;
}

.vector-trace-grid span {
  color: color-mix(in srgb, var(--kx-muted) 82%, transparent);
}

.vector-trace-grid strong {
  min-width: 0;
  color: color-mix(in srgb, var(--kx-text) 72%, var(--kx-muted));
  font-weight: 500;
  overflow-wrap: anywhere;
}

.vector-cache-window-line {
  margin: 0;
  color: color-mix(in srgb, var(--kx-muted) 88%, transparent);
  font-size: 0.64rem;
  line-height: 1.4;
}

.vector-section-panel .vector-quality-grid,
.vector-section-panel .vector-stat-grid-wide {
  gap: 6px;
}

.vector-section-panel .vector-quality-grid div,
.vector-section-panel .vector-stat-grid div {
  min-height: 34px;
  border-radius: 7px;
  padding: 7px 8px;
}

.vector-section-panel .vector-quality-grid span,
.vector-section-panel .vector-stat-grid span {
  font-size: 0.68rem;
}

.vector-section-panel .vector-quality-grid strong,
.vector-section-panel .vector-stat-grid strong {
  font-size: 0.72rem;
  font-weight: 600;
}

.vector-section-panel .vector-trace-card.compact {
  gap: 6px;
  border-radius: 7px;
  padding: 8px 9px;
  font-size: 0.68rem;
  line-height: 1.35;
}

.vector-section-panel .vector-trace-head {
  gap: 6px;
}

.vector-section-panel .vector-trace-head strong {
  font-size: 0.74rem;
  font-weight: 600;
}

.vector-section-panel .vector-pill {
  padding: 3px 7px;
  font-size: 0.64rem;
}

.vector-section-panel .vector-trace-list {
  gap: 6px;
}

.vector-section-panel .vector-trace-list article,
.vector-section-panel .vector-cache-turns article {
  border-radius: 7px;
  padding: 7px 8px;
}

.vector-section-panel .vector-trace-list article {
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
}

.vector-section-panel .vector-trace-list article > span {
  width: 18px;
  height: 18px;
  font-size: 0.62rem;
}

.vector-section-panel .vector-context-meta {
  gap: 4px;
  margin-bottom: 5px;
}

.vector-section-panel .vector-context-meta span,
.vector-section-panel .vector-source-mix span {
  padding: 3px 6px;
  font-size: 0.62rem;
}

.vector-section-panel .vector-trace-list strong {
  font-size: 0.74rem;
  font-weight: 600;
}

.vector-section-panel .vector-trace-list p {
  margin-top: 3px;
  font-size: 0.68rem;
  line-height: 1.42;
}

.vector-section-panel .vector-cache-turns {
  gap: 6px;
}

.vector-section-panel .vector-cache-turn-line {
  gap: 4px 8px;
  font-size: 0.64rem;
}

.vector-section-panel .vector-cache-turn-card {
  display: grid;
  gap: 5px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--kx-border) 76%, transparent);
  background: color-mix(in srgb, var(--kx-surface) 88%, var(--kx-surface-strong) 12%);
  box-shadow: 0 4px 10px rgba(40, 30, 48, 0.035);
}

.vector-cache-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
}

.vector-cache-turns .vector-cache-turn-card > .vector-cache-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: stretch;
}

.vector-cache-card-head div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.vector-cache-card-head span {
  color: color-mix(in srgb, var(--kx-muted) 88%, transparent);
  font-size: 0.56rem;
  line-height: 1.25;
}

.vector-cache-card-head strong {
  color: var(--kx-text-main);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vector-cache-card-head i {
  align-self: start;
  border-radius: 999px;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--kx-border) 70%, transparent);
  color: color-mix(in srgb, var(--kx-muted) 84%, var(--kx-text-main));
  background: color-mix(in srgb, var(--kx-surface-strong) 66%, transparent);
  font-size: 0.53rem;
  font-style: normal;
  white-space: nowrap;
}

.vector-cache-turn-card.hit .vector-cache-card-head i {
  color: color-mix(in srgb, var(--kx-primary) 84%, var(--kx-text-main));
  border-color: color-mix(in srgb, var(--kx-primary) 42%, transparent);
  background: color-mix(in srgb, var(--kx-primary) 14%, transparent);
}

.vector-cache-token-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.vector-cache-turns .vector-cache-turn-card > .vector-cache-token-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  justify-content: stretch;
}

.vector-cache-token-strip div {
  display: grid;
  gap: 1px;
  min-height: 29px;
  border-radius: 6px;
  padding: 4px 5px;
  border: 1px solid color-mix(in srgb, var(--kx-border) 62%, transparent);
  background: color-mix(in srgb, var(--kx-surface) 72%, transparent);
}

.vector-cache-token-strip span {
  color: color-mix(in srgb, var(--kx-muted) 88%, transparent);
  font-size: 0.53rem;
  line-height: 1.1;
}

.vector-cache-token-strip strong {
  color: var(--kx-text-main);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
}

.vector-cache-turn-card.hit .vector-cache-token-strip div:nth-child(2) strong,
.vector-cache-turn-card.hit .vector-cache-token-strip div:nth-child(3) strong {
  color: color-mix(in srgb, var(--kx-primary) 88%, var(--kx-text-main));
}

.vector-cache-debug-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.vector-cache-turns .vector-cache-turn-card > .vector-cache-debug-chips {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.vector-cache-debug-chips span {
  max-width: 100%;
  border-radius: 999px;
  padding: 1px 5px;
  color: color-mix(in srgb, var(--kx-muted) 82%, var(--kx-text-main));
  background: color-mix(in srgb, var(--kx-surface-strong) 54%, transparent);
  font-size: 0.52rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vector-cache-turns .vector-cache-turn-card > .vector-cache-debug-chips span {
  color: color-mix(in srgb, var(--kx-muted) 82%, var(--kx-text-main));
  font-size: 0.52rem;
}

.vector-section-panel .vector-cache-footnote {
  font-size: 0.62rem;
}

.vector-section-panel .vector-empty {
  border-radius: 7px;
  padding: 8px 9px;
  font-size: 0.7rem;
}

@media (max-width: 420px) {
  .vector-quality-grid,
  .vector-stat-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final ritual-page resets: neutralize legacy full-height workbench rules. */
.settings-route-shell .cottage-ritual-page {
  min-height: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.settings-route-shell[data-theme] .persona-deck-panel {
  display: block;
  min-height: 0;
  overflow: visible;
  border-right: 1px solid var(--kx-border);
}

.settings-route-shell[data-theme] .persona-deck-list {
  display: flex;
  align-items: center;
}

.settings-route-shell[data-theme] .persona-editor-panel {
  width: 100%;
  align-self: start;
  justify-self: stretch;
}

.persona-save-command {
  position: relative;
  overflow: visible;
  border-radius: 999px;
  isolation: isolate;
}

.persona-save-particles {
  position: absolute;
  inset: -16px -20px;
  z-index: 1;
  pointer-events: none;
}

.persona-save-particles .particle-dot,
.persona-save-particles .particle-star {
  position: absolute;
  color: var(--kx-primary, #dcbda8);
  opacity: 0;
}

.persona-save-particles .particle-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--kx-primary, #dcbda8);
  box-shadow: 0 0 7px rgba(var(--kx-primary-rgb), 0.48);
}

.particle-dot-one { top: 44%; left: 16%; --particle-x: -17px; --particle-y: -11px; }
.particle-dot-two { top: 52%; right: 16%; --particle-x: 18px; --particle-y: 10px; }
.particle-star-one { top: 17%; left: 38%; width: 11px; height: 11px; --particle-x: -8px; --particle-y: -13px; }
.particle-star-two { top: 64%; right: 37%; width: 9px; height: 9px; --particle-x: 10px; --particle-y: 13px; }

.persona-save-command:hover .particle-dot-one,
.persona-save-command:hover .particle-star-two {
  animation: persona-save-particle-bloom 1.35s ease-out infinite;
}

.persona-save-command:hover .particle-dot-two,
.persona-save-command:hover .particle-star-one {
  animation: persona-save-particle-bloom 1.35s 0.28s ease-out infinite;
}

@keyframes persona-save-particle-bloom {
  0% { opacity: 0; transform: translate(0, 0) scale(0.2); }
  24% { opacity: 0.82; }
  68% { opacity: 0.34; }
  100% { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .persona-save-command:hover .particle-dot,
  .persona-save-command:hover .particle-star { animation: none; }
}

/* Time Corridor */
.cottage-chat-shell[data-theme] .cottage-sidebar-title h1,
.cottage-chat-shell[data-theme] .cottage-sidebar-actions button {
  color: var(--kx-primary);
}

.cottage-chat-shell[data-theme] .cottage-sidebar-actions button {
  border-color: rgba(var(--kx-primary-rgb), .34);
  background: rgba(var(--kx-primary-rgb), .1);
}

.cottage-state-card-compact {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 14px 10px;
  border: 1px solid var(--kx-border);
  border-radius: 7px;
  background: var(--kx-panel-soft);
  padding: 6px 8px;
}

.cottage-state-card-compact > div:first-child {
  display: inline-flex;
  min-width: 0;
  gap: 6px;
}

.cottage-state-card-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--kx-primary);
}

.cottage-state-card-label small {
  display: block;
  max-width: 6.2rem;
  color: var(--kx-primary);
  opacity: .68;
}

.cottage-state-card-compact strong { color: var(--kx-text-main); font-size: .7rem; white-space: nowrap; }
.cottage-state-card-compact small { overflow: hidden; color: var(--kx-muted); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.cottage-state-card-compact .cottage-state-card-label small {
  color: var(--kx-primary);
}
.cottage-state-card-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}
.cottage-state-card-tools button {
  position: relative;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  color: color-mix(in srgb, var(--kx-muted) 82%, transparent);
  background: transparent;
}
.cottage-state-card-tools button.muted {
  color: color-mix(in srgb, var(--kx-muted) 54%, transparent);
  opacity: .68;
}
.cottage-state-card-tools button.active,
.cottage-state-card-tools button:hover {
  border-color: rgba(var(--kx-primary-rgb), .18);
  color: var(--kx-primary);
  background: rgba(var(--kx-primary-rgb), .08);
}
.cottage-state-card-tools button.active {
  border-color: rgba(var(--kx-primary-rgb), .22);
  color: var(--kx-primary);
  background: rgba(var(--kx-primary-rgb), .1);
}
.cottage-state-card-off-slash {
  position: absolute;
  width: 19px;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  opacity: .82;
  transform: rotate(-42deg);
}
.cottage-state-card-tools .spin,
.cottage-memory-write-state .spin,
.cottage-state-card-editor .spin { animation: vector-spin 1s linear infinite; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.cottage-memory-write-state {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  border-left: 1px solid var(--kx-primary);
  color: var(--kx-muted);
  padding: 2px 0 2px 8px;
  font-size: .62rem;
}
.cottage-memory-write-state.done { color: var(--kx-primary); }
.cottage-memory-write-state.error { color: #c97770; }

.cottage-state-card-panel-layer {
  position: absolute;
  inset: 126px 0 0;
  z-index: 6;
  overflow-y: auto;
  background: rgba(8, 5, 4, 0.38);
  padding: 12px;
  backdrop-filter: blur(3px);
}

.cottage-state-card-editor {
  display: grid;
  width: auto;
  min-height: min(500px, calc(100vh - 154px));
  max-height: none;
  gap: 10px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--kx-border);
  border-radius: 14px;
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-panel-bg) 96%, transparent);
  padding: 12px;
  box-shadow: 0 20px 54px color-mix(in srgb, var(--kx-shadow) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.08);
}
.cottage-state-card-editor header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cottage-state-card-editor header > div { display: grid; gap: 4px; }
.cottage-state-card-editor header strong { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; letter-spacing: .04em; }
.cottage-state-card-editor header small { color: var(--kx-muted); font-size: .56rem; line-height: 1.55; }
.cottage-state-card-editor header button { border: 0; color: var(--kx-muted); background: transparent; }
.cottage-state-card-editor textarea {
  min-height: 340px;
  max-height: none;
  resize: none;
  border: 1px solid var(--kx-border);
  border-radius: 9px;
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-input-bg) 88%, transparent);
  padding: 10px;
  font-size: .66rem;
  line-height: 1.72;
  outline: none;
}
.cottage-state-card-editor footer { display: flex; justify-content: flex-end; gap: 7px; }
.cottage-state-card-editor footer button { display: inline-flex; height: 22px; min-height: 22px; align-items: center; gap: 4px; border: 1px solid var(--kx-border); border-radius: 999px; color: var(--kx-text-main); background: var(--kx-button-bg); padding: 0 9px; font-size: .63rem; line-height: 1; }
.cottage-state-card-editor footer button svg { width: 12px; height: 12px; }
.cottage-state-card-editor footer button.primary { border-color: var(--kx-primary); color: var(--vector-primary-text); background: var(--kx-primary); }

/* Unified route page rhythm: persona, memory, chronicles, vector, and settings should
   feel like the same cottage surface instead of separate admin screens. */
.settings-route-shell,
.settings-route-shell.persona-route-shell,
.settings-route-shell.memory-route-shell,
.settings-route-shell.vector-route-shell {
  padding: 80px clamp(24px, 5vw, 72px) 52px;
}

.settings-route-shell .settings-page,
.settings-route-shell .cottage-ritual-page,
.settings-route-shell.persona-route-shell .cottage-ritual-page,
.settings-route-shell.memory-route-shell .cottage-ritual-page,
.settings-route-shell.vector-route-shell .cottage-ritual-page,
.vector-route-shell .vector-page {
  width: min(100%, 1040px);
  margin-right: auto;
  margin-left: auto;
}

.persona-route-shell .cottage-page-heading,
.memory-route-shell .cottage-page-heading,
.vector-route-shell .vector-hero,
.chronicle-page-header,
.chronicle-list-header {
  min-height: 118px;
  align-items: flex-end;
  padding: 12px 4px 18px;
}

.vector-route-shell .vector-page-card {
  border: 0;
  background: transparent;
  padding: 0;
}

.vector-route-shell .vector-hero {
  display: flex;
  gap: 16px;
  border: 0;
}

.vector-route-shell .vector-hero h1,
.chronicle-title-lockup h1,
.chronicle-list-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.08;
}

.vector-route-shell .vector-hero h1 {
  margin: 0;
}

.vector-route-shell .vector-hero p,
.chronicle-title-lockup p,
.chronicle-list-header p {
  max-width: 40rem;
  margin: 9px 0 0;
  color: var(--kx-muted);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
}

.chronicle-page-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--kx-primary);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.chronicle-route-shell {
  padding: 80px clamp(24px, 5vw, 72px) 52px;
}

.chronicle-page {
  width: min(100%, 1040px);
  min-height: 0;
  padding: 0;
  background: transparent;
}

.chronicle-page > .cottage-divider,
.vector-route-shell .cottage-divider,
.memory-route-shell .cottage-divider,
.persona-route-shell .cottage-divider {
  margin: 0 0 18px;
}

@media (max-width: 760px) {
  .cottage-new-window-panel-layer {
    inset: 126px 0 0;
  }

  .cottage-new-window-dialog {
    max-height: 48vh;
  }

  .cottage-state-card-panel-layer {
    inset: 126px 0 0;
  }

  .cottage-state-card-editor {
    min-height: min(470px, calc(100vh - 145px));
  }

  .settings-route-shell,
  .settings-route-shell.persona-route-shell,
  .settings-route-shell.memory-route-shell,
  .settings-route-shell.vector-route-shell,
  .chronicle-route-shell {
    padding: 68px 16px 32px;
  }

  .persona-route-shell .cottage-page-heading,
  .memory-route-shell .cottage-page-heading,
  .vector-route-shell .vector-hero,
  .chronicle-page-header,
  .chronicle-list-header {
    min-height: 0;
    align-items: flex-start;
    padding: 8px 0 14px;
  }
}

.chronicle-route-shell[data-theme="black-gold"] {
  --kx-secondary: #8f7a62;
  --kx-deep-card: color-mix(in srgb, var(--kx-bg-card) 70%, var(--kx-primary) 30%);
  --kx-deep-accent: var(--kx-primary);
  --vector-primary-text: #090806;
}
.chronicle-route-shell[data-theme="white-gold"] {
  --kx-secondary: #a68f70;
  --kx-deep-card: color-mix(in srgb, var(--kx-text-main) 72%, var(--kx-primary) 28%);
  --kx-deep-accent: var(--kx-primary);
  --vector-primary-text: #2e2824;
}
.chronicle-route-shell[data-theme="pink-mocha"] {
  --kx-secondary: #c3a6ae;
  --kx-deep-card: color-mix(in srgb, var(--kx-bg-card) 74%, var(--kx-primary) 26%);
  --kx-deep-accent: #d3adad;
  --vector-primary-text: #2c2420;
}
.chronicle-route-shell[data-theme="custom"] {
  --kx-primary: #a28576;
  --kx-primary-rgb: 162, 133, 118;
  --kx-primary-soft: #a694bc;
  --kx-secondary: #8f7fa2;
  --kx-text-main: #4f4365;
  --kx-page-bg:
    radial-gradient(circle at 14% 8%, rgba(166, 148, 188, 0.22), transparent 30%),
    radial-gradient(circle at 82% 86%, rgba(162, 133, 118, 0.11), transparent 34%),
    linear-gradient(135deg, #efe9f2, #fbf9fc 54%, #e5dceb);
  --kx-panel-bg: rgba(251, 249, 252, 0.94);
  --kx-panel-soft: rgba(255, 255, 255, 0.72);
  --kx-border: rgba(143, 127, 162, 0.25);
  --kx-muted: rgba(79, 67, 101, 0.58);
  --kx-shadow: rgba(79, 67, 101, 0.16);
  --kx-deep-card: color-mix(in srgb, #4f4365 74%, #a694bc 26%);
  --kx-deep-accent: #a28576;
  --vector-primary-text: #fbf9fc;
}
.chronicle-glyph-book { stroke: var(--kx-primary, #dcbda8); }
.chronicle-glyph-orbit { stroke: var(--kx-secondary, #a694bc); }

.chronicle-route-shell {
  min-height: 100vh;
  padding: 58px 0 0;
  color: var(--kx-text-main);
  background:
    radial-gradient(circle at 12% 5%, rgba(var(--kx-primary-rgb), 0.1), transparent 30%),
    linear-gradient(145deg, var(--kx-page-bg), var(--kx-panel-bg));
}

.chronicle-page {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 58px);
  margin: 0 auto;
  border: 0;
  background: color-mix(in srgb, var(--kx-page-bg) 94%, transparent);
  padding: 24px;
  box-shadow: none;
}

.chronicle-page-header,
.chronicle-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.chronicle-title-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chronicle-title-lockup > svg {
  width: 32px;
  height: 32px;
}

.chronicle-title-lockup h1,
.chronicle-list-header h1 {
  margin: 0;
  color: var(--kx-text-main);
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
}

.chronicle-list-header h1 {
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.18rem, 3.2vw, 1.72rem);
  font-weight: 600;
  letter-spacing: 0.035em;
}

.chronicle-title-lockup p,
.chronicle-list-header p {
  margin: 2px 0 0;
  color: var(--kx-muted);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.chronicle-toolbar,
.chronicle-reading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.chronicle-toolbar button,
.chronicle-search-row > button,
.chronicle-reading-actions button,
.chronicle-empty button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--kx-border);
  border-radius: 6px;
  color: var(--kx-text-main);
  background: var(--kx-panel-soft);
  padding: 0 10px;
  font-size: 0.69rem;
}

.chronicle-refine-glyph {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  --interactive-accent: var(--kx-readable-gold, var(--kx-primary, #dcbda8));
}

.chronicle-continuity-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--kx-primary) 36%, var(--kx-border)) !important;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--kx-primary) 16%, transparent), transparent 42%),
    color-mix(in srgb, var(--kx-primary) 10%, var(--kx-panel-soft)) !important;
  animation: chronicleContinuityBreath 4.6s ease-in-out infinite;
}

.chronicle-continuity-button::before,
.chronicle-continuity-button::after {
  position: absolute;
  z-index: -1;
  width: 64px;
  height: 34px;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 62%, currentColor 0 0.95px, transparent 1.35px),
    radial-gradient(circle at 34% 24%, currentColor 0 0.72px, transparent 1.1px),
    radial-gradient(circle at 68% 48%, currentColor 0 0.8px, transparent 1.18px),
    radial-gradient(circle at 88% 18%, currentColor 0 0.62px, transparent 1px);
  color: color-mix(in srgb, var(--kx-primary) 72%, var(--kx-text-main) 28%);
  content: "";
  opacity: 0;
}

.chronicle-continuity-button::before {
  left: -9px;
  top: -9px;
  animation: chronicleContinuityDustA 5.4s ease-in-out infinite;
}

.chronicle-continuity-button::after {
  right: -12px;
  bottom: -10px;
  transform: rotate(180deg);
  animation: chronicleContinuityDustB 5.4s ease-in-out 1.2s infinite;
}

.chronicle-continuity-button svg {
  position: relative;
  z-index: 1;
}

.chronicle-continuity-button:hover {
  animation-duration: 3.2s;
}

.chronicle-continuity-button:hover::before,
.chronicle-continuity-button:hover::after {
  opacity: 0.42;
}

@keyframes chronicleContinuityBreath {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--kx-primary) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kx-primary) 12%, transparent);
  }
}

@keyframes chronicleContinuityDustA {
  0%,
  100% {
    opacity: 0.08;
    transform: translate3d(0, 4px, 0) scale(0.94);
  }
  48% {
    opacity: 0.34;
    transform: translate3d(6px, -2px, 0) scale(1.04);
  }
}

@keyframes chronicleContinuityDustB {
  0%,
  100% {
    opacity: 0.06;
    transform: translate3d(0, -2px, 0) rotate(180deg) scale(0.92);
  }
  52% {
    opacity: 0.30;
    transform: translate3d(-5px, 3px, 0) rotate(180deg) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chronicle-continuity-button,
  .chronicle-continuity-button::before,
  .chronicle-continuity-button::after,
  .continuity-generate,
  .continuity-generate::before,
  .continuity-generate::after {
    animation: none !important;
  }
}

.chronicle-page > .cottage-divider,
.chronicle-reading-page > .cottage-divider {
  margin: 15px 0 18px;
}

.chronicle-month-list {
  display: grid;
  gap: 10px;
}

.chronicle-month-card {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  min-height: 128px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--kx-border);
  border-radius: 8px;
  color: var(--kx-text-main);
  background: var(--kx-panel-bg);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.chronicle-month-card.tone-mist { background: color-mix(in srgb, var(--kx-panel-bg) 84%, var(--kx-secondary) 16%); }
.chronicle-month-card.tone-lavender { background: color-mix(in srgb, var(--kx-panel-bg) 68%, var(--kx-secondary) 32%); }
.chronicle-month-card.tone-deep { border-color: transparent; color: var(--vector-primary-text); background: var(--kx-deep-card, color-mix(in srgb, var(--kx-text-main) 74%, var(--kx-primary) 26%)); }

.chronicle-month-card:hover {
  z-index: 2;
  border-color: color-mix(in srgb, var(--kx-primary) 62%, var(--kx-border));
  transform: translateY(-3px);
  box-shadow: 0 12px 26px var(--kx-shadow);
}

.chronicle-month-edge {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  opacity: 0;
  background: color-mix(in srgb, var(--kx-primary) 70%, var(--kx-secondary));
  transition: opacity 180ms ease;
}

.chronicle-month-card:hover .chronicle-month-edge { opacity: 1; }

.chronicle-month-number {
  border-right: 1px solid currentColor;
  color: color-mix(in srgb, var(--kx-secondary) 72%, transparent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 4.7rem;
  font-weight: 500;
  line-height: 0.82;
  text-align: center;
}

.tone-deep .chronicle-month-number { color: var(--kx-deep-accent, var(--kx-primary)); opacity: 1; }

.chronicle-month-copy {
  min-width: 0;
  padding: 14px 22px;
}

.chronicle-month-copy h2 {
  margin: 0 0 4px;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.chronicle-month-copy > span {
  color: var(--kx-secondary);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.17em;
}

.tone-deep .chronicle-month-copy > span,
.tone-deep .chronicle-month-meta { color: var(--kx-deep-accent, var(--kx-primary)); }

.chronicle-month-copy p {
  overflow: hidden;
  margin: 9px 0 0;
  color: var(--kx-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tone-deep .chronicle-month-copy p { color: color-mix(in srgb, white 68%, var(--kx-deep-accent, var(--kx-primary)) 32%); }

.chronicle-month-meta {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--kx-secondary);
  padding-right: 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.78rem;
}

.chronicle-delete-month {
  position: absolute;
  right: 8px;
  bottom: 7px;
  border: 0;
  color: color-mix(in srgb, var(--kx-secondary) 35%, transparent);
  background: transparent;
  padding: 5px;
  opacity: 0.58;
}

.chronicle-month-card:hover .chronicle-delete-month { color: var(--kx-secondary); opacity: 1; }
.tone-deep .chronicle-delete-month { color: color-mix(in srgb, var(--kx-deep-accent, var(--kx-primary)) 38%, transparent); }
.tone-deep:hover .chronicle-delete-month { color: var(--kx-deep-accent, var(--kx-primary)); }

.chronicle-list-header { justify-content: flex-start; }
.chronicle-back,
.chronicle-reading-header > button {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--kx-secondary) 14%, transparent);
  border-radius: 50%;
  color: var(--kx-secondary);
  background: color-mix(in srgb, var(--kx-panel-soft) 42%, transparent);
  padding: 0;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.chronicle-back:hover,
.chronicle-reading-header > button:hover {
  border-color: color-mix(in srgb, var(--kx-secondary) 28%, transparent);
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-secondary) 10%, var(--kx-panel-soft));
  transform: translateY(-1px);
}

.chronicle-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  margin-bottom: 20px;
}

.chronicle-search-row label {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--kx-border);
  border-radius: 999px;
  color: var(--kx-secondary);
  background: var(--kx-panel-bg);
  padding: 0 13px;
}

.chronicle-search-row input {
  width: 100%;
  border: 0;
  color: var(--kx-text-main);
  background: transparent;
  outline: none;
}

.chronicle-search-row > button {
  color: color-mix(in srgb, var(--kx-text-main) 84%, var(--kx-readable-gold, var(--kx-primary)) 16%);
  font-weight: 600;
}

.chronicle-entry-list { display: grid; gap: 15px; }
.chronicle-entry {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  color: var(--kx-text-main);
}

.chronicle-entry.inactive { opacity: 0.48; }
.chronicle-entry-rail { display: grid; grid-template-rows: 28px 1fr; justify-items: center; }
.chronicle-entry-rail > button {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 0;
  color: var(--kx-primary);
  background: transparent;
  padding: 0;
}
.chronicle-entry-rail button i { width: 11px; height: 11px; border: 1.5px solid var(--kx-secondary); border-radius: 50%; background: color-mix(in srgb, var(--kx-secondary) 24%, transparent); }
.chronicle-entry-rail button svg { width: 14px; height: 14px; }
.chronicle-entry-rail > span { width: 2.5px; border-radius: 999px; background: color-mix(in srgb, var(--kx-secondary) 34%, transparent); }
.chronicle-entry-main { min-width: 0; cursor: pointer; }
.chronicle-entry-head { display: flex; min-height: 28px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chronicle-entry-date { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.12rem; font-weight: 600; letter-spacing: 0.14em; }
.chronicle-entry-actions { display: inline-flex; align-items: center; gap: 7px; color: var(--kx-secondary); }
.chronicle-entry-actions button { display: inline-flex; border: 0; color: inherit; background: transparent; padding: 3px; }
.chronicle-entry-card {
  border: 1px solid var(--kx-border);
  border-left: 3px solid color-mix(in srgb, var(--kx-secondary) 62%, transparent);
  border-radius: 7px;
  background: var(--kx-panel-bg);
  padding: 16px 18px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.chronicle-entry-main:hover .chronicle-entry-card { transform: translateY(-2px); box-shadow: 0 10px 24px var(--kx-shadow); }
.chronicle-entry.tone-mist .chronicle-entry-card { background: color-mix(in srgb, var(--kx-panel-bg) 84%, var(--kx-secondary) 16%); }
.chronicle-entry.tone-lavender .chronicle-entry-card { background: color-mix(in srgb, var(--kx-panel-bg) 67%, var(--kx-secondary) 33%); }
.chronicle-entry.tone-deep .chronicle-entry-card { border-color: transparent; border-left-color: var(--kx-deep-accent, var(--kx-primary)); color: var(--vector-primary-text); background: var(--kx-deep-card, color-mix(in srgb, var(--kx-text-main) 74%, var(--kx-primary) 26%)); }
.chronicle-entry-card h2 { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.02rem; line-height: 1.5; }
.chronicle-entry-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chronicle-entry-badges span { border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; color: var(--kx-secondary); font-size: 0.58rem; opacity: 0.68; }
.tone-deep .chronicle-entry-badges span { color: var(--kx-deep-accent, var(--kx-primary)); }
.chronicle-entry-card p { margin: 12px 0 0; color: var(--kx-muted); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.82rem; line-height: 1.8; }
.tone-deep .chronicle-entry-card p { color: color-mix(in srgb, white 72%, var(--kx-deep-accent, var(--kx-primary)) 28%); }
.chronicle-entry-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; color: color-mix(in srgb, var(--kx-secondary) 54%, transparent); font-size: 0.62rem; }
.tone-deep .chronicle-entry-tags { color: color-mix(in srgb, var(--kx-deep-accent, var(--kx-primary)) 58%, transparent); }

.chronicle-reading-page { display: grid; }
.chronicle-reading-header {
  display: grid;
  grid-template-columns: 40px 115px minmax(0, 1fr);
  min-height: 190px;
  align-items: center;
  gap: 22px;
  padding: 8px 10px 20px;
}
.chronicle-reading-header > button { align-self: start; }
.chronicle-reading-date { display: grid; justify-items: center; border-right: 1px solid var(--kx-border); padding-right: 20px; }
.chronicle-reading-date strong { color: var(--kx-secondary); font-family: "Cormorant Garamond", Georgia, serif; font-size: 5.8rem; font-weight: 500; line-height: 0.82; }
.chronicle-reading-date span { margin-top: 13px; color: var(--kx-muted); font-size: 0.62rem; }
.chronicle-reading-heading > span { color: var(--kx-primary); font-size: 0.62rem; letter-spacing: 0.22em; }
.chronicle-reading-heading h1 { margin: 12px 0 8px; font-family: var(--kico-morandi-title-font, "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif); font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.35; }
.chronicle-reading-heading p { margin: 0; color: var(--kx-secondary); font-size: 0.68rem; }
.chronicle-reading-sheet {
  position: relative;
  width: min(92%, 660px);
  margin: 4px auto 0;
  border: 1px solid var(--kx-border);
  background: color-mix(in srgb, var(--kx-panel-bg) 96%, white 4%);
  padding: 52px 54px 38px;
  box-shadow: 0 18px 42px var(--kx-shadow);
}
.chronicle-reading-body { display: grid; gap: 0.86em; color: var(--kx-text-main); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Inter, "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; font-size: 0.94rem; line-height: 2.05; white-space: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.chronicle-reading-body p,
.chronicle-reading-body h1,
.chronicle-reading-body h2,
.chronicle-reading-body h3,
.chronicle-reading-body h4,
.chronicle-reading-body h5,
.chronicle-reading-body h6,
.chronicle-reading-body ul,
.chronicle-reading-body ol,
.chronicle-reading-body blockquote,
.chronicle-reading-body pre { margin: 0; }
.chronicle-reading-body h1,
.chronicle-reading-body h2,
.chronicle-reading-body h3,
.chronicle-reading-body h4,
.chronicle-reading-body h5,
.chronicle-reading-body h6 { color: inherit; font: inherit; font-size: 1.04em; font-weight: 600; line-height: 1.85; }
.chronicle-reading-body ul,
.chronicle-reading-body ol { padding-left: 1.25em; }
.chronicle-reading-body em,
.chronicle-reading-body i { font-style: normal; }
.chronicle-reading-body strong { font-weight: 600; font-synthesis: none; -webkit-text-stroke: 0 currentColor; }
@media (max-width: 620px), (pointer: coarse) {
  .chronicle-reading-body strong { font-weight: 500; }
}
.chronicle-reading-sheet blockquote { margin: 32px 0 0; border-left: 2px solid var(--kx-primary); color: var(--kx-secondary); padding: 4px 0 4px 16px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-style: normal; line-height: 1.8; }
.chronicle-reading-sheet footer { display: grid; justify-items: end; gap: 5px; margin-top: 42px; color: var(--kx-secondary); font-family: "Cormorant Garamond", Georgia, serif; }
.chronicle-reading-sheet footer small { font-size: 0.58rem; letter-spacing: 0.22em; opacity: 0.56; }
.chronicle-reading-star { position: absolute; width: 12px; height: 12px; color: var(--kx-primary); }
.chronicle-reading-star.top { top: 18px; right: 21px; }
.chronicle-reading-star.bottom { left: 18px; bottom: 20px; }
.chronicle-reading-actions { width: min(92%, 660px); margin: 10px auto 0; }

.chronicle-empty { display: grid; min-height: 280px; place-items: center; align-content: center; gap: 9px; color: var(--kx-muted); text-align: center; }
.chronicle-empty > svg { width: 42px; height: 42px; }
.chronicle-empty p { margin: 0; font-size: 0.76rem; }
.chronicle-empty.compact { min-height: 110px; }
.chronicle-notice {
  position: fixed;
  z-index: 90;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  max-width: min(420px, calc(100vw - 44px));
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--kx-primary) 42%, var(--kx-border));
  border-radius: 7px;
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-panel-bg) 82%, var(--kx-primary) 8%);
  padding: 10px 12px;
  box-shadow: 0 12px 34px var(--kx-shadow);
  font-size: 0.72rem;
  font-weight: 600;
}
.chronicle-notice svg {
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.72;
}
.chronicle-spin { animation: vector-spin 1s linear infinite; }

.chronicle-modal-backdrop { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; overflow-y: auto; background: rgba(10, 8, 12, 0.68); padding: 18px; backdrop-filter: blur(8px); }
.chronicle-modal { position: relative; display: grid; width: min(100%, 520px); max-height: calc(100vh - 36px); gap: 12px; overflow-y: auto; border: 1px solid var(--kx-border); border-radius: 8px; color: var(--kx-text-main); background: var(--kx-page-bg); padding: 24px; box-shadow: 0 30px 78px rgba(0,0,0,.28); }
.chronicle-modal h2 { margin: 0 0 4px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.chronicle-modal-close {
  position: absolute;
  top: 13px;
  right: 13px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  color: color-mix(in srgb, var(--kx-text-main) 58%, transparent);
  background: transparent !important;
  padding: 0;
  box-shadow: none !important;
}

.chronicle-modal-close:hover {
  color: var(--kx-text-main);
  background: transparent !important;
}
.chronicle-modal label:not(.chronicle-check) { display: grid; gap: 5px; color: var(--kx-muted); font-size: 0.68rem; }
.chronicle-modal input,
.chronicle-modal textarea { border: 1px solid var(--kx-border); border-radius: 6px; color: var(--kx-text-main); background: var(--kx-panel-bg); padding: 9px 10px; font: inherit; outline: none; resize: vertical; }
.chronicle-primary { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--kx-primary); border-radius: 6px; color: var(--vector-primary-text); background: var(--kx-primary); padding: 0 12px; font-weight: 700; }

.diary-editor {
  width: min(100%, 640px);
  isolation: isolate;
  gap: 13px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--kx-secondary) 28%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--kx-primary) 13%, transparent), transparent 34%),
    radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--kx-secondary) 12%, transparent), transparent 38%),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 31px,
      color-mix(in srgb, var(--kx-secondary) 7%, transparent) 32px
    ),
    linear-gradient(145deg, color-mix(in srgb, var(--kx-panel-bg) 98%, white 2%), color-mix(in srgb, var(--kx-panel-soft) 90%, transparent));
  padding: 22px 22px 18px;
  box-shadow: 0 24px 78px color-mix(in srgb, var(--kx-text-main) 24%, transparent);
}

.diary-editor::before {
  position: absolute;
  right: 48px;
  top: 24px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: var(--kx-readable-gold, var(--kx-primary));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cline x1='2.5' y1='7' x2='11.5' y2='7' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cline x1='7' y1='0.5' x2='7' y2='13.5' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cpath d='M7 0.8 C7 4.2 9.0 6.5 10.8 7 C9.0 7.5 7 9.8 7 13.2 C7 9.8 5.0 7.5 3.2 7 C5.0 6.5 7 4.2 7 0.8 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cline x1='2.5' y1='7' x2='11.5' y2='7' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cline x1='7' y1='0.5' x2='7' y2='13.5' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cpath d='M7 0.8 C7 4.2 9.0 6.5 10.8 7 C9.0 7.5 7 9.8 7 13.2 C7 9.8 5.0 7.5 3.2 7 C5.0 6.5 7 4.2 7 0.8 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
  opacity: 0.34;
}

.diary-editor-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-right: 34px;
}

.diary-editor-glyph {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--kx-secondary) 24%, transparent);
  border-radius: 999px;
  color: var(--kx-readable-gold, var(--kx-primary));
  background: color-mix(in srgb, var(--kx-secondary) 8%, transparent);
}

.diary-editor-glyph > svg {
  width: 16px;
  height: 16px;
  opacity: 0.82;
}

.diary-editor-head h2 {
  margin: 0;
  color: var(--kx-text-main) !important;
  font-size: 0.96rem;
  font-weight: 650;
  letter-spacing: 0.14em;
}

.diary-editor-head p {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--kx-text-main) 52%, transparent);
  font-size: 0.68rem;
  line-height: 1.55;
}

.diary-editor-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: -1px 4px 1px;
  color: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 72%, transparent);
}

.diary-editor-divider span {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 36%, transparent),
    transparent
  );
}

.diary-editor-divider svg {
  width: 18px;
  height: 18px;
  opacity: 0.68;
}

.diary-editor-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 10px;
}

.diary-editor label:not(.chronicle-check) {
  gap: 7px;
  color: color-mix(in srgb, var(--kx-text-main) 62%, transparent);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.diary-editor-body-field {
  grid-column: 1 / -1;
}

.diary-editor input,
.diary-editor textarea {
  border-color: color-mix(in srgb, var(--kx-secondary) 18%, transparent);
  border-radius: 12px;
  color: var(--kx-text-main);
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 30px,
      color-mix(in srgb, var(--kx-secondary) 8%, transparent) 31px
    ),
    linear-gradient(180deg, color-mix(in srgb, var(--kx-panel-bg) 78%, white 6%), color-mix(in srgb, var(--kx-panel-bg) 68%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
  font-size: 0.72rem;
  line-height: 1.65;
}

.diary-editor input:focus,
.diary-editor textarea:focus {
  border-color: color-mix(in srgb, var(--kx-primary) 38%, var(--kx-border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 26%, transparent),
    0 0 0 3px color-mix(in srgb, var(--kx-primary) 10%, transparent);
}

.diary-editor textarea {
  min-height: min(38vh, 300px);
  resize: vertical;
}

.diary-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--kx-secondary) 18%, transparent);
  padding-top: 12px;
}

.diary-editor-foot span {
  max-width: 28rem;
  color: color-mix(in srgb, var(--kx-text-main) 50%, transparent);
  font-size: 0.6rem;
  line-height: 1.55;
}

.diary-save-button {
  min-width: 96px;
  min-height: 30px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--kx-primary) 46%, var(--kx-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--kx-primary) 88%, white 9%), color-mix(in srgb, var(--kx-primary) 70%, var(--kx-secondary) 30%));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--kx-primary) 14%, transparent);
  padding: 0 13px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.diary-save-button svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 620px) {
  .diary-editor {
    padding: 20px 15px 16px;
  }

  .diary-editor-fields {
    grid-template-columns: 1fr;
  }

  .diary-editor textarea {
    min-height: 260px;
  }

  .diary-editor-foot {
    align-items: flex-end;
    flex-direction: column;
  }

  .diary-editor-foot span {
    width: 100%;
  }

  .diary-save-button {
    width: auto;
    align-self: flex-end;
  }
}

.chronicle-check { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--kx-border); border-radius: 7px; background: var(--kx-panel-soft); padding: 10px; }
.chronicle-check span { display: grid; gap: 3px; }
.chronicle-check small { color: var(--kx-muted); line-height: 1.5; }
.chronicle-check.compact { padding: 8px 9px; }
.chronicle-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chronicle-days button { min-height: 32px; border: 1px solid var(--kx-border); border-radius: 6px; color: var(--kx-muted); background: var(--kx-panel-soft); }
.chronicle-days button.active { border-color: var(--kx-primary); color: var(--vector-primary-text); background: var(--kx-primary); }
.chronicle-auto-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 8px; border-top: 1px solid var(--kx-border); padding-top: 12px; }
.chronicle-auto-settings > div { display: grid; gap: 2px; }
.chronicle-auto-settings > div small { color: var(--kx-muted); font-size: .64rem; line-height: 1.45; }
.chronicle-frequency { display: flex !important; align-items: center; gap: 5px !important; white-space: nowrap; }
.chronicle-frequency input { width: 48px; padding: 6px !important; text-align: center; }
.chronicle-pins { display: grid; gap: 7px; border-top: 1px solid var(--kx-border); padding-top: 12px; }
.chronicle-pins > strong { display: flex; align-items: center; gap: 6px; }
.chronicle-pins > div,
.chronicle-pins form { display: flex; align-items: center; justify-content: space-between; gap: 7px; border: 1px solid var(--kx-border); border-radius: 6px; padding: 7px 9px; }
.chronicle-pins form input { min-width: 0; flex: 1; border: 0; padding: 0; }
.chronicle-pins button { border: 0; color: var(--kx-secondary); background: transparent; }
.continuity-dialog {
  width: min(100%, 640px);
  gap: 10px;
  max-height: min(92vh, 780px);
  border-color: color-mix(in srgb, var(--kx-secondary) 28%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--kx-secondary) 13%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--kx-panel-bg) 98%, white 2%), color-mix(in srgb, var(--kx-panel-soft) 88%, transparent));
  padding: 20px;
  box-shadow: 0 24px 78px color-mix(in srgb, var(--kx-text-main) 24%, transparent);
}

.continuity-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 30px 6px 0;
}

.continuity-dialog-glyph {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--kx-secondary) 24%, transparent);
  border-radius: 999px;
  color: var(--kx-readable-gold, var(--kx-primary));
  background: color-mix(in srgb, var(--kx-secondary) 8%, transparent);
}

.continuity-dialog-glyph > svg {
  width: 16px;
  height: 16px;
  opacity: 0.82;
}

.continuity-dialog-head h2 {
  margin: 0;
  color: var(--kx-text-main) !important;
  font-size: 0.94rem;
  font-weight: 650;
  letter-spacing: 0.14em;
}

.continuity-dialog-head p {
  margin: 3px 0 0;
  color: color-mix(in srgb, var(--kx-text-main) 52%, transparent);
  font-size: 0.68rem;
  line-height: 1.55;
}

.continuity-option-grid {
  display: grid;
  gap: 7px;
}

.continuity-option {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  min-height: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--kx-panel-bg) 70%, transparent);
  padding: 10px 11px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.continuity-option::before {
  display: inline-flex;
  width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--kx-secondary) 38%, transparent);
  border-radius: 999px;
  color: transparent;
  background: color-mix(in srgb, var(--kx-panel-bg) 70%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kx-panel-bg) 88%, transparent);
  content: "";
}

.continuity-option:hover {
  transform: translateY(-1px);
}

.continuity-option.active {
  border-color: color-mix(in srgb, var(--kx-primary) 36%, var(--kx-border));
  color: var(--vector-primary-text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--kx-primary) 88%, white 12%), color-mix(in srgb, var(--kx-secondary) 72%, var(--kx-primary) 28%));
}

.continuity-option.active::before {
  border-color: color-mix(in srgb, var(--vector-primary-text) 45%, transparent);
  color: var(--vector-primary-text);
  background: color-mix(in srgb, var(--vector-primary-text) 16%, transparent);
  content: "✓";
  font-size: 0.68rem;
  font-weight: 700;
}

.continuity-option.active strong {
  color: inherit;
}

.continuity-option.active small {
  color: color-mix(in srgb, currentColor 76%, transparent);
}

.continuity-option.active.soft {
  border-color: color-mix(in srgb, var(--kx-secondary) 42%, var(--kx-border));
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-secondary) 14%, var(--kx-panel-bg) 86%);
}

.continuity-option.active.soft::before {
  border-color: color-mix(in srgb, var(--kx-secondary) 56%, transparent);
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-secondary) 18%, transparent);
}

.continuity-option.active.soft small {
  color: color-mix(in srgb, var(--kx-text-main) 64%, transparent);
}

.continuity-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  accent-color: var(--kx-readable-gold, var(--kx-primary));
  cursor: pointer;
  opacity: 0;
}

.continuity-option strong {
  color: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.continuity-option small {
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 0.62rem;
}

.continuity-range-card {
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--kx-secondary) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--kx-panel-bg) 62%, transparent);
  padding: 12px;
}

.continuity-range-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.continuity-range-head > strong {
  color: color-mix(in srgb, var(--kx-text-main) 82%, transparent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.continuity-dialog .chronicle-days {
  display: inline-grid;
  width: min(190px, 52%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--kx-secondary) 18%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--kx-panel-bg) 64%, transparent);
  padding: 3px;
}

.continuity-dialog .chronicle-days button {
  min-height: 24px;
  border: 0;
  border-radius: 7px;
  font-size: 0.6rem;
}

.continuity-dialog .chronicle-days button.active {
  color: var(--vector-primary-text);
  background: var(--kx-text-main);
}

.continuity-line-field {
  display: grid;
  gap: 6px;
}

.continuity-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: color-mix(in srgb, var(--kx-text-main) 64%, transparent);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.continuity-line-head strong {
  font-size: inherit;
  font-weight: 600;
}

.continuity-line-head em {
  color: color-mix(in srgb, var(--kx-text-main) 44%, transparent);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.62rem;
  font-style: italic;
  letter-spacing: 0.08em;
}

.continuity-line-field textarea {
  min-height: 219px;
  max-height: 48vh;
  border-color: color-mix(in srgb, var(--kx-secondary) 18%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--kx-panel-bg) 72%, white 4%);
  padding: 9px 10px;
  font-size: 0.68rem;
  line-height: 1.65;
}

.continuity-generate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-self: start;
  min-height: 30px;
  border-color: color-mix(in srgb, var(--kx-secondary) 28%, transparent);
  border-radius: 9px;
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-secondary) 14%, transparent);
  padding: 0 10px;
  font-size: 0.66rem;
  font-weight: 600;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kx-secondary) 7%, transparent);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.continuity-generate::before,
.continuity-generate::after {
  position: absolute;
  z-index: -1;
  width: 58px;
  height: 30px;
  pointer-events: none;
  color: color-mix(in srgb, var(--kx-secondary) 74%, var(--kx-primary) 26%);
  background:
    radial-gradient(circle at 14% 65%, currentColor 0 0.82px, transparent 1.2px),
    radial-gradient(circle at 38% 28%, currentColor 0 0.68px, transparent 1.05px),
    radial-gradient(circle at 76% 52%, currentColor 0 0.72px, transparent 1.08px);
  content: "";
  opacity: 0;
}

.continuity-generate::before {
  left: -8px;
  top: -7px;
  animation: chronicleContinuityDustA 6.2s ease-in-out infinite;
}

.continuity-generate::after {
  right: -10px;
  bottom: -8px;
  transform: rotate(180deg);
  animation: chronicleContinuityDustB 6.2s ease-in-out 1.35s infinite;
}

.continuity-generate:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kx-secondary) 10%, transparent);
}

.continuity-generate:hover::before,
.continuity-generate:hover::after {
  opacity: 0.34;
}

.continuity-dialog .chronicle-auto-settings {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) auto;
  gap: 7px;
  border-top-color: color-mix(in srgb, var(--kx-secondary) 18%, transparent);
  padding-top: 10px;
}

.continuity-dialog .chronicle-auto-settings > div strong,
.continuity-dialog .chronicle-pins > strong {
  color: color-mix(in srgb, var(--kx-text-main) 82%, transparent);
  font-size: 0.7rem;
}

.continuity-dialog .chronicle-auto-settings > div small {
  font-size: 0.58rem;
}

.continuity-dialog .chronicle-check.compact {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: flex-start;
  gap: 8px;
  border-color: color-mix(in srgb, var(--kx-secondary) 22%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--kx-panel-bg) 68%, transparent);
  padding: 7px 8px;
}

.continuity-dialog .chronicle-check.compact::before {
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--kx-secondary) 38%, transparent);
  border-radius: 999px;
  color: transparent;
  background: color-mix(in srgb, var(--kx-panel-bg) 70%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kx-panel-bg) 88%, transparent);
  content: "";
  font-size: 0.6rem;
  font-weight: 700;
}

.continuity-dialog .chronicle-check.compact:has(input:checked) {
  border-color: color-mix(in srgb, var(--kx-secondary) 42%, var(--kx-border));
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-secondary) 14%, var(--kx-panel-bg) 86%);
}

.continuity-dialog .chronicle-check.compact:has(input:checked)::before {
  border-color: color-mix(in srgb, var(--kx-secondary) 56%, transparent);
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-secondary) 18%, transparent);
  content: "✓";
}

.continuity-dialog .chronicle-check.compact input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.continuity-dialog .chronicle-check.compact strong {
  color: inherit;
  font-size: 0.66rem;
}

.continuity-dialog .chronicle-check.compact small {
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 0.56rem;
}

.continuity-dialog .chronicle-frequency {
  color: color-mix(in srgb, var(--kx-text-main) 62%, transparent);
  font-size: 0.62rem;
}

.continuity-dialog .chronicle-frequency input {
  width: 42px;
  min-height: 28px;
  border-radius: 8px;
  font-size: 0.64rem;
}

.continuity-dialog .chronicle-pins {
  gap: 6px;
  border-top-color: color-mix(in srgb, var(--kx-secondary) 18%, transparent);
  padding-top: 10px;
}

.continuity-dialog .chronicle-pins > div,
.continuity-dialog .chronicle-pins form {
  border-color: color-mix(in srgb, var(--kx-secondary) 17%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--kx-panel-bg) 62%, transparent);
  padding: 6px 8px;
  font-size: 0.62rem;
  line-height: 1.55;
}

.continuity-dialog .chronicle-pins form input {
  min-height: 24px;
  font-size: 0.62rem;
}

.continuity-dialog .chronicle-pins button {
  color: color-mix(in srgb, var(--kx-text-main) 62%, var(--kx-secondary) 38%);
}

.continuity-seed-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--kx-secondary) 18%, transparent);
  border-radius: 12px;
  color: color-mix(in srgb, var(--kx-text-main) 50%, transparent);
  background: color-mix(in srgb, var(--kx-panel-bg) 54%, transparent);
  padding: 7px 10px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.continuity-seed-foot strong {
  color: var(--kx-text-main);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1;
}

.continuity-seed-foot:disabled {
  cursor: default;
  opacity: 0.72;
}

.continuity-seed-foot:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--kx-primary) 30%, var(--kx-border));
  background: color-mix(in srgb, var(--kx-primary) 8%, var(--kx-panel-bg));
}
.seed-dialog > p { margin: 0; color: var(--kx-muted); font-size: 0.7rem; }
.seed-dialog > div { display: grid; gap: 8px; }
.seed-dialog article { border: 1px solid var(--kx-border); border-radius: 7px; background: var(--kx-panel-soft); padding: 12px; }
.seed-dialog article > span { color: var(--kx-primary); font-family: "Cormorant Garamond", Georgia, serif; font-size: 0.7rem; }
.seed-dialog h2 {
  font-family: var(--kico-morandi-title-font, "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.seed-dialog h3 { margin: 5px 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.seed-dialog article p { color: var(--kx-muted); font-size: 0.76rem; line-height: 1.7; }
.seed-dialog article i { margin-right: 7px; color: var(--kx-secondary); font-size: 0.62rem; font-style: normal; opacity: .62; }
.seed-dialog footer { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.seed-dialog footer button { min-height: 32px; border: 1px solid var(--kx-border); border-radius: 6px; color: var(--kx-text-main); background: var(--kx-panel-bg); padding: 0 10px; }

@media (max-width: 620px) {
  .chronicle-route-shell { padding: 54px 0 0; }
  .chronicle-page { min-height: calc(100vh - 54px); padding: 16px 10px; }
  .chronicle-page-header { align-items: flex-start; }
  .chronicle-title-lockup h1 { font-size: 1.05rem; }
  .chronicle-title-lockup > svg { width: 27px; height: 27px; }
  .chronicle-toolbar { max-width: 230px; gap: 4px; }
  .chronicle-toolbar button { min-height: 30px; padding: 0 7px; font-size: .61rem; }
  .chronicle-month-card { grid-template-columns: 78px minmax(0, 1fr) auto; min-height: 108px; }
  .chronicle-month-number { font-size: 3.65rem; }
  .chronicle-month-copy { padding: 10px 12px; }
  .chronicle-month-copy h2 { font-size: .88rem; }
  .chronicle-month-copy p { font-size: .65rem; }
  .chronicle-month-meta { padding-right: 13px; }
  .chronicle-search-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; }
  .chronicle-search-row > button { padding-inline: 8px; }
  .chronicle-entry { grid-template-columns: 22px minmax(0, 1fr); }
  .chronicle-entry-card { padding: 13px 12px; }
  .chronicle-entry-card h2 { font-size: .92rem; }
  .chronicle-entry-card p { font-size: .78rem; }
  .chronicle-reading-header { grid-template-columns: 32px 78px minmax(0,1fr); min-height: 174px; gap: 10px; padding-inline: 0; }
  .chronicle-reading-date { padding-right: 9px; }
  .chronicle-reading-date strong { font-size: 4.1rem; }
  .chronicle-reading-heading h1 { font-size: 1.42rem; }
  .chronicle-reading-sheet { width: 96%; padding: 43px 25px 31px; }
  .chronicle-reading-body { font-size: .86rem; }
  .chronicle-modal { padding: 20px 16px; }
  .continuity-dialog {
    width: min(94vw, 560px);
    padding: 16px 13px;
    border-radius: 16px;
  }
  .continuity-dialog-head {
    margin-right: 24px;
    gap: 8px;
  }
  .continuity-dialog-glyph {
    width: 24px;
    height: 24px;
  }
  .continuity-option-grid {
    gap: 6px;
  }
  .continuity-option {
    padding: 9px 10px;
  }
  .continuity-range-card {
    padding: 10px;
  }
  .continuity-range-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .continuity-dialog .chronicle-days {
    width: 100%;
  }
  .chronicle-auto-settings { grid-template-columns: 1fr; }
  .continuity-dialog .chronicle-auto-settings {
    grid-template-columns: 1fr;
  }
  .chronicle-auto-settings > div { grid-column: auto; }
  .chronicle-frequency { justify-content: center; border: 1px solid var(--kx-border); border-radius: 7px; background: var(--kx-panel-soft); padding: 7px 9px; }
}

/* Memory archive list: weighted light/theme/deep surfaces without repeated side rails. */
.settings-route-shell[data-theme] .memory-entry-card {
  --memory-card-text: var(--kx-text-main);
  --memory-card-muted: var(--kx-muted);
  --memory-card-accent: var(--kx-primary);
}

.settings-route-shell[data-theme] .memory-entry-summary-copy strong,
.settings-route-shell[data-theme] .memory-entry-content {
  color: var(--memory-card-text);
}

.settings-route-shell[data-theme] .memory-entry-summary-copy small,
.settings-route-shell[data-theme] .memory-entry-chevron,
.settings-route-shell[data-theme] .memory-entry-meta {
  color: var(--memory-card-muted);
}

.settings-route-shell[data-theme] .memory-entry-day,
.settings-route-shell[data-theme] .memory-entry-symbol {
  color: var(--memory-card-accent);
}

.settings-route-shell[data-theme="white-gold"] .memory-entry-card.memory-tone-0 {
  background: rgba(255, 255, 255, 0.96);
}

.settings-route-shell[data-theme="white-gold"] .memory-entry-card.memory-tone-1 {
  background: #f4eee3;
}

.settings-route-shell[data-theme="white-gold"] .memory-entry-card.memory-tone-2 {
  --memory-card-text: #2e2824;
  --memory-card-muted: rgba(46, 40, 36, 0.62);
  --memory-card-accent: #fff8ea;
  background: #b59869;
}

.settings-route-shell[data-theme="white-gold"] .memory-entry-card.memory-tone-3 {
  --memory-card-text: #f8f1e6;
  --memory-card-muted: rgba(248, 241, 230, 0.62);
  --memory-card-accent: #d6b77f;
  background: #332d29;
}

.settings-route-shell[data-theme="black-gold"] .memory-entry-card.memory-tone-0 {
  background: #0a0a0a;
}

.settings-route-shell[data-theme="black-gold"] .memory-entry-card.memory-tone-1 {
  background: #1a1712;
}

.settings-route-shell[data-theme="black-gold"] .memory-entry-card.memory-tone-2 {
  --memory-card-text: #090806;
  --memory-card-muted: rgba(9, 8, 6, 0.62);
  --memory-card-accent: #fff6e7;
  background: #b08d55;
}

.settings-route-shell[data-theme="black-gold"] .memory-entry-card.memory-tone-3 {
  --memory-card-text: #2b241c;
  --memory-card-muted: rgba(43, 36, 28, 0.6);
  --memory-card-accent: #9a7848;
  background: #f0e8db;
}

.settings-route-shell[data-theme="pink-mocha"] .memory-entry-card.memory-tone-0 {
  background: #312a21;
}

.settings-route-shell[data-theme="pink-mocha"] .memory-entry-card.memory-tone-1 {
  background: #514239;
}

.settings-route-shell[data-theme="pink-mocha"] .memory-entry-card.memory-tone-2 {
  --memory-card-text: #2c2420;
  --memory-card-muted: rgba(44, 36, 32, 0.6);
  --memory-card-accent: #fff5f2;
  background: #b58c8c;
}

.settings-route-shell[data-theme="pink-mocha"] .memory-entry-card.memory-tone-3 {
  --memory-card-text: #4b3938;
  --memory-card-muted: rgba(75, 57, 56, 0.58);
  --memory-card-accent: #a87678;
  background: #efe3e2;
}

.settings-route-shell[data-theme="custom"] .memory-entry-card.memory-tone-0 {
  --memory-card-text: #4f4365;
  --memory-card-muted: rgba(79, 67, 101, 0.58);
  --memory-card-accent: #a28576;
  background: rgba(251, 249, 252, 0.96);
}

.settings-route-shell[data-theme="custom"] .memory-entry-card.memory-tone-1 {
  --memory-card-text: #4f4365;
  --memory-card-muted: rgba(79, 67, 101, 0.6);
  --memory-card-accent: #8f7fa2;
  background: #e8ddec;
}

.settings-route-shell[data-theme="custom"] .memory-entry-card.memory-tone-2 {
  --memory-card-text: #fbf9fc;
  --memory-card-muted: rgba(251, 249, 252, 0.68);
  --memory-card-accent: #d9c4b8;
  background: #766989;
}

.settings-route-shell[data-theme="custom"] .memory-entry-card.memory-tone-3 {
  --memory-card-text: #f8f1e8;
  --memory-card-muted: rgba(248, 241, 232, 0.66);
  --memory-card-accent: #dcbda8;
  background: #4f4365;
}

.settings-route-shell[data-theme="custom"] .memory-entry-card.memory-tone-2,
.settings-route-shell[data-theme="custom"] .memory-entry-card.memory-tone-3 {
  border-color: color-mix(in srgb, var(--memory-card-accent) 24%, transparent);
}

.settings-route-shell[data-theme] .memory-tag-chip {
  color: var(--kx-muted);
  background: var(--kx-panel-soft);
}

.settings-route-shell[data-theme] .memory-tag-chip.memory-tag-tone-1 {
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-panel-bg) 76%, var(--kx-primary) 24%);
}

.settings-route-shell[data-theme] .memory-tag-chip.memory-tag-tone-2 {
  color: var(--kx-bg-card);
  background: var(--kx-primary);
}

.settings-route-shell[data-theme="white-gold"] .memory-tag-chip.memory-tag-tone-3,
.settings-route-shell[data-theme="pink-mocha"] .memory-tag-chip.memory-tag-tone-3 {
  color: #f8f1e8;
  background: #3a302c;
}

.settings-route-shell[data-theme="black-gold"] .memory-tag-chip.memory-tag-tone-3 {
  color: #2b241c;
  background: #eee4d5;
}

.settings-route-shell[data-theme] .memory-tag-chip button,
.settings-route-shell[data-theme] .memory-mini-chip button,
.settings-route-shell[data-theme] .memory-chip-add,
.settings-route-shell[data-theme] .memory-tag-more {
  display: inline-grid;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--kx-bg-card) !important;
  background: var(--kx-primary) !important;
  padding: 0;
  opacity: 1;
}

.settings-route-shell[data-theme] .primary-memory-button {
  border-color: var(--kx-primary) !important;
  color: var(--kx-bg-card) !important;
  background: var(--kx-primary) !important;
  font-weight: 700;
  opacity: 1;
}

.settings-route-shell[data-theme] .primary-memory-button:disabled {
  border-color: var(--kx-primary) !important;
  background: var(--kx-primary) !important;
  opacity: 0.62;
}

.settings-route-shell[data-theme="black-gold"] .primary-memory-button,
.settings-route-shell[data-theme="black-gold"] .primary-memory-button:disabled {
  color: #090806 !important;
}

.settings-route-shell[data-theme="white-gold"] .primary-memory-button,
.settings-route-shell[data-theme="white-gold"] .primary-memory-button:disabled {
  color: #2e2824 !important;
}

.settings-route-shell[data-theme="pink-mocha"] .primary-memory-button,
.settings-route-shell[data-theme="pink-mocha"] .primary-memory-button:disabled {
  color: #2c2420 !important;
}

/* Vector mixer ritual layout and priority colors. */
.vector-route-shell[data-theme="black-gold"] {
  --vector-primary-text: #090806;
}

.vector-route-shell[data-theme="white-gold"] {
  --vector-primary-text: #2e2824;
}

.vector-route-shell[data-theme="pink-mocha"] {
  --vector-primary-text: #2c2420;
}

.vector-route-shell[data-theme="custom"] {
  --vector-primary-text: #f8f3fb;
}

.vector-route-shell .vector-page-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.vector-route-shell .vector-page {
  width: min(1020px, calc(100vw - 56px));
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 720px) {
  .vector-route-shell .vector-page {
    width: min(100vw - 24px, 720px);
  }
}

.vector-route-shell .vector-hero {
  min-height: 128px;
  align-items: center;
  border: 0;
  padding: 22px 4px 18px;
}

.vector-route-shell .vector-hero h1 {
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 500;
  letter-spacing: 0;
}

.vector-route-shell .cottage-divider {
  margin-bottom: 14px;
}

.vector-route-shell .vector-note {
  border-radius: 6px;
  background: color-mix(in srgb, var(--kx-primary) 9%, var(--kx-panel-soft));
}

.vector-route-shell .vector-section,
.vector-route-shell .vector-section-panel,
.vector-route-shell .vector-cache-card,
.vector-route-shell .vector-subpanel,
.vector-route-shell .vector-debug-block,
.vector-route-shell .vector-diagnostic-list,
.vector-route-shell .vector-cache-summary,
.vector-route-shell .vector-trace-card {
  border-radius: 8px;
}

.vector-route-shell .vector-section-panel {
  border-color: var(--kx-border);
  background: var(--kx-panel-bg);
  box-shadow: 0 14px 38px var(--kx-shadow);
}

.vector-route-shell .vector-cache-card {
  position: relative;
  min-height: 58px;
  border-color: var(--kx-border-soft);
  background: var(--kx-panel-soft);
}

.vector-route-shell .vector-mode-card.active,
.vector-route-shell .vector-preset-card.active,
.vector-route-shell .vector-cache-card.active {
  border-color: var(--kx-primary);
  color: var(--vector-primary-text);
  background: var(--kx-primary);
}

.vector-route-shell .vector-cache-card.active strong,
.vector-route-shell .vector-cache-card.active span {
  color: var(--vector-primary-text);
}

.vector-route-shell .vector-preset-card.preset-budget:not(.active) {
  background: color-mix(in srgb, var(--kx-panel-bg) 92%, white 8%);
}

.vector-route-shell .vector-preset-card.preset-balanced:not(.active) {
  border-color: rgba(var(--kx-primary-rgb), 0.46);
  background: color-mix(in srgb, var(--kx-panel-bg) 82%, var(--kx-primary) 18%);
}

.vector-route-shell .vector-preset-card.preset-recall:not(.active) {
  background: color-mix(in srgb, var(--kx-panel-bg) 82%, var(--kx-text-main) 18%);
}

.vector-preset-card em {
  position: absolute;
  top: 6px;
  right: 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 0.52rem;
  font-style: normal;
  opacity: 0.66;
}

.vector-link-card {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed var(--kx-border);
  border-radius: 7px;
  color: var(--kx-muted);
  background: var(--kx-panel-soft);
  padding: 9px 11px;
}

.vector-link-card > div {
  display: grid;
  gap: 3px;
}

.vector-link-card strong {
  color: var(--kx-text-main);
  font-size: 0.76rem;
}

.vector-link-card span {
  font-size: 0.66rem;
  line-height: 1.45;
}

.vector-link-card.active {
  border-style: solid;
  border-color: rgba(var(--kx-primary-rgb), 0.52);
  background: color-mix(in srgb, var(--kx-panel-bg) 78%, var(--kx-primary) 22%);
}

.vector-link-card button,
.vector-route-shell .vector-action-primary {
  border-color: var(--kx-primary) !important;
  color: var(--vector-primary-text) !important;
  background: var(--kx-primary) !important;
  font-weight: 700;
}

.vector-route-shell .vector-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.vector-route-shell .vector-mode-card,
.vector-route-shell .vector-preset-card {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 9px;
  text-align: center;
}

.vector-route-shell .vector-mode-card strong,
.vector-route-shell .vector-preset-card strong {
  font-size: 0.72rem;
}

.vector-choice-star {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.vector-route-shell .vector-cache-card.active .vector-choice-star {
  color: var(--vector-primary-text);
  opacity: 0.82;
}

.vector-preset-hint {
  margin: -1px 0 0;
  color: var(--kx-muted);
  font-size: 0.64rem;
  line-height: 1.55;
}

.vector-soft-hint {
  margin: 0;
  color: var(--kx-muted);
  font-family: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  font-size: 0.68rem;
  line-height: 1.6;
  opacity: 0.72;
}

.vector-route-shell .vector-scope-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vector-route-shell .vector-scope-card {
  min-height: 34px;
  justify-content: center;
  padding: 6px 8px;
  text-align: center;
}

.vector-compact-control-grid {
  display: grid;
  gap: 10px;
}

.vector-compact-control-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vector-compact-control-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vector-compact-control {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border: 1px solid var(--kx-border-soft);
  border-radius: 6px;
  color: var(--kx-muted);
  background: var(--kx-panel-soft);
  padding: 7px 11px;
  font-size: 0.66rem;
}

.vector-compact-control > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vector-compact-control > div {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.vector-compact-control input {
  width: 58px;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--kx-border);
  color: var(--kx-primary);
  background: transparent;
  padding: 2px 3px;
  font-size: 0.7rem;
  text-align: center;
  outline: none;
}

.vector-compact-control small {
  font-size: 0.6rem;
}

.vector-compact-control.toggle {
  cursor: pointer;
}

.vector-compact-control.toggle i {
  position: relative;
  width: 30px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-muted) 24%, transparent);
}

.vector-compact-control.toggle i::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kx-text-main);
  content: "";
  transition: transform 180ms ease;
}

.vector-compact-control.toggle.active {
  border-color: var(--kx-primary);
  color: var(--vector-primary-text);
  background: var(--kx-primary);
}

.vector-compact-control.toggle.active i {
  background: color-mix(in srgb, var(--vector-primary-text) 24%, transparent);
}

.vector-compact-control.toggle.active i::after {
  background: var(--vector-primary-text);
  transform: translateX(14px);
}

.vector-compact-control.disabled {
  opacity: 0.48;
}

@media (max-width: 720px) {
  .settings-route-shell.vector-route-shell {
    padding: 54px 0 0;
  }

  .vector-route-shell .vector-hero {
    min-height: 108px;
    align-items: flex-start;
    padding-top: 14px;
  }

  .vector-route-shell .vector-hero h1 {
    font-size: 1.55rem;
  }

  .vector-link-card {
    align-items: flex-start;
  }

  .vector-route-shell .vector-panel-header {
    min-height: 38px;
    padding: 6px 9px;
  }

  .vector-route-shell .vector-panel-title {
    gap: 7px;
  }

  .vector-route-shell .vector-panel-icon {
    width: 21px;
    height: 21px;
  }

  .vector-route-shell .vector-panel-title strong {
    font-size: 0.76rem;
  }

  .vector-route-shell .vector-panel-title small {
    max-width: 56vw;
    font-size: 0.58rem;
  }

  .vector-route-shell .vector-panel-body {
    gap: 7px;
    padding: 7px 9px 9px;
  }

  .vector-route-shell .vector-config-grid:not(.vector-choice-grid):not(.vector-scope-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .vector-route-shell .vector-field.wide {
    grid-column: span 2;
  }

  .vector-route-shell .vector-field input,
  .vector-route-shell .vector-field select {
    min-height: 31px;
    padding-inline: 8px;
    font-size: 0.68rem;
  }

  .vector-route-shell .vector-test-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .vector-route-shell .vector-test-actions button,
  .vector-route-shell .vector-test-actions .vector-clear-button {
    width: auto;
    min-height: 30px;
    flex: 0 0 auto;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 0.66rem;
  }

  .vector-route-shell .vector-test-row textarea {
    min-height: 58px;
    padding: 7px 8px;
    font-size: 0.72rem;
  }

  .vector-route-shell .vector-scope-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .vector-compact-control-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vector-compact-control-grid.three {
    grid-template-columns: 0.78fr 1.08fr 1.14fr;
  }

  .vector-compact-control-grid.three .vector-compact-control {
    gap: 4px;
    padding-inline: 6px;
  }

  .vector-compact-control-grid.three .vector-compact-control input {
    width: 40px;
  }
}

@media (max-width: 370px) {
  .vector-compact-control-grid.three {
    grid-template-columns: 1fr;
  }
}

/* Vector mixer parity: compact controls, readable actions, and Obsidian folder selection. */
.vector-route-shell .vector-compact-control-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vector-route-shell .vector-compact-control-grid.four .vector-compact-control {
  min-height: 36px;
  gap: 5px;
  padding-inline: 7px;
}

.vector-route-shell .vector-compact-control-grid.four .vector-compact-control input {
  width: 44px;
}

.vector-route-shell input[type="number"]::-webkit-inner-spin-button,
.vector-route-shell input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.vector-route-shell input[type="number"] {
  appearance: textfield;
}

.vector-route-shell .vector-budget-input {
  width: 78px;
  min-width: 70px;
  padding-inline: 6px;
  text-align: right;
}

@media (max-width: 720px) {
  .vector-route-shell .vector-compact-control-grid.four,
  .vector-route-shell .vector-compact-control-grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control,
  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control,
  .vector-route-shell .vector-compact-control {
    display: grid;
    grid-template-columns: minmax(4.8em, 1fr) auto;
    min-height: 44px;
    align-items: center;
    gap: 4px 7px;
    padding: 7px 8px;
  }

  .vector-route-shell .vector-compact-control > span {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.25;
  }

  .vector-route-shell .vector-compact-control > div {
    justify-self: end;
    max-width: 86px;
  }

  .vector-route-shell .vector-compact-control input,
  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control input,
  .vector-compact-control-grid.three .vector-compact-control input {
    width: 42px;
    max-width: 100%;
    font-size: 0.68rem;
  }

  .vector-route-shell .vector-compact-control .vector-budget-input {
    width: 64px;
    min-width: 56px;
  }

  .vector-route-shell .vector-compact-control.toggle {
    grid-template-columns: minmax(4.8em, 1fr) 30px;
  }
}

@media (max-width: 370px) {
  .vector-route-shell .vector-compact-control-grid.four,
  .vector-route-shell .vector-compact-control-grid.three {
    grid-template-columns: 1fr;
  }
}

.vector-route-shell .vector-test-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.vector-route-shell .vector-test-actions button,
.vector-route-shell .vector-test-actions .vector-clear-button {
  display: inline-flex;
  width: auto;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--kx-border);
  border-radius: 6px;
  color: var(--kx-text-main);
  background: var(--kx-panel-soft);
  padding: 0 10px;
  font-size: 0.69rem;
  font-weight: 650;
  line-height: 1;
  vertical-align: middle;
}

.vector-route-shell .vector-test-actions button svg,
.vector-route-shell .vector-test-actions .vector-clear-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  align-self: center;
}

.vector-route-shell .vector-test-actions button.secondary,
.vector-route-shell .vector-test-actions button.ghost,
.vector-route-shell .vector-test-actions .vector-clear-button {
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-panel-bg) 88%, var(--kx-primary) 12%);
}

.vector-route-shell .vector-test-actions button:hover,
.vector-route-shell .vector-test-actions .vector-clear-button:hover {
  border-color: var(--kx-primary);
  color: var(--kx-primary);
}

.vector-folder-picker {
  display: grid;
  gap: 7px;
  border: 1px solid var(--kx-border-soft);
  border-radius: 7px;
  background: var(--kx-panel-soft);
  padding: 8px;
}

.vector-folder-picker > p {
  margin: 0;
  color: var(--kx-muted);
  font-size: 0.66rem;
}

.vector-folder-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--kx-muted);
  font-size: 0.65rem;
}

.vector-folder-picker-head > div {
  display: inline-flex;
  gap: 5px;
}

.vector-folder-picker-head button {
  min-height: 24px;
  border: 1px solid var(--kx-border);
  border-radius: 5px;
  color: var(--kx-text-main);
  background: var(--kx-panel-bg);
  padding: 0 7px;
  font-size: 0.6rem;
}

.vector-folder-tree {
  display: grid;
  max-height: 210px;
  gap: 4px;
  overflow-y: auto;
  padding-right: 3px;
}

.vector-folder-branch {
  display: grid;
  gap: 4px;
}

.vector-folder-row {
  display: grid;
  grid-template-columns: 16px 14px minmax(0, 1fr) auto;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--kx-border-soft);
  border-radius: 5px;
  color: var(--kx-muted);
  background: var(--kx-panel-bg);
  padding: 3px 7px;
  font-size: 0.66rem;
}

.vector-folder-row.selected,
.vector-folder-row.partial {
  border-color: color-mix(in srgb, var(--kx-primary) 48%, var(--kx-border));
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-panel-bg) 84%, var(--kx-primary) 16%);
}

.vector-folder-row input {
  margin: 0;
  accent-color: var(--kx-primary);
}

.vector-folder-row > span:not(.vector-folder-chevron) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vector-folder-row small {
  color: var(--kx-muted);
  font-size: 0.58rem;
}

.vector-folder-chevron {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border: 0;
  color: var(--kx-muted);
  background: transparent;
  padding: 0;
}

.vector-embedding-hint,
.vector-index-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--kx-border-soft);
  border-radius: 6px;
  color: var(--kx-muted);
  background: var(--kx-panel-soft);
  padding: 7px 9px;
  font-size: 0.66rem;
  line-height: 1.5;
}

.vector-embedding-hint.connected {
  border-color: color-mix(in srgb, var(--kx-primary) 44%, var(--kx-border));
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-panel-bg) 86%, var(--kx-primary) 14%);
}

.vector-embedding-hint-star {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--kx-primary);
}

.vector-index-notice.error {
  border-color: rgba(190, 92, 92, 0.42);
  color: color-mix(in srgb, #c56f6f 76%, var(--kx-text-main));
}

.vector-rebuild-button {
  position: relative;
  overflow: visible;
}

.vector-rebuild-button.needs-attention {
  animation: vector-rebuild-breathe 2.6s ease-in-out infinite;
}

.vector-rebuild-particles {
  position: absolute;
  inset: -8px;
  pointer-events: none;
}

.vector-rebuild-particles i,
.vector-rebuild-particles svg {
  position: absolute;
  opacity: 0;
}

.vector-rebuild-button.needs-attention .vector-rebuild-particles i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--kx-primary);
  animation: vector-index-particle 2.6s ease-out infinite;
}

.vector-rebuild-button.needs-attention .vector-rebuild-particles i:nth-child(1) {
  top: 9px;
  left: 7px;
}

.vector-rebuild-button.needs-attention .vector-rebuild-particles i:nth-child(2) {
  right: 9px;
  bottom: 7px;
  animation-delay: 1.2s;
}

.vector-rebuild-button.needs-attention .vector-rebuild-particles svg {
  top: -1px;
  right: 15px;
  width: 9px;
  height: 9px;
  color: var(--kx-primary);
  animation: vector-index-star 2.6s ease-out 0.55s infinite;
}

.vector-spin {
  animation: vector-spin 1s linear infinite;
}

@keyframes vector-rebuild-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--kx-primary-rgb), 0); }
  50% { box-shadow: 0 0 0 4px rgba(var(--kx-primary-rgb), 0.12), 0 6px 18px rgba(var(--kx-primary-rgb), 0.16); }
}

@keyframes vector-index-particle {
  0%, 42% { opacity: 0; transform: translate(0, 2px) scale(0.5); }
  58% { opacity: 0.72; }
  100% { opacity: 0; transform: translate(2px, -8px) scale(1.35); }
}

@keyframes vector-index-star {
  0%, 38% { opacity: 0; transform: scale(0.45); }
  58% { opacity: 0.78; }
  100% { opacity: 0; transform: translateY(-7px) scale(1.25); }
}

@keyframes vector-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vector-rebuild-button.needs-attention,
  .vector-rebuild-button.needs-attention .vector-rebuild-particles i,
  .vector-rebuild-button.needs-attention .vector-rebuild-particles svg,
  .vector-spin {
    animation: none;
  }
}

@media (max-width: 720px) {
  .vector-route-shell .vector-compact-control-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control {
    min-height: 34px;
    gap: 2px;
    padding-inline: 4px;
    font-size: 0.54rem;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control > span {
    max-width: none;
    font-size: 0.54rem;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control input {
    width: 23px;
    padding-inline: 1px;
    font-size: 0.6rem;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control small {
    font-size: 0.5rem;
  }

  .vector-route-shell .vector-compact-control.toggle i {
    width: 24px;
    height: 14px;
  }

  .vector-route-shell .vector-compact-control.toggle i::after {
    width: 10px;
    height: 10px;
  }

  .vector-route-shell .vector-compact-control.toggle.active i::after {
    transform: translateX(10px);
  }

  .vector-route-shell .vector-budget-input {
    width: 68px !important;
  }

  .vector-folder-picker-head {
    align-items: flex-start;
  }
}

.settings-route-shell[data-theme] .memory-tag-more {
  width: auto;
  min-width: 24px;
  border-radius: 999px;
  padding-inline: 5px;
  font-size: 0.58rem;
}

html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.cinema-shell,
.settings-route-shell,
.settings-route-shell.persona-route-shell,
.settings-route-shell.memory-route-shell,
.settings-route-shell.vector-route-shell {
  -ms-overflow-style: none;
  scrollbar-width: none !important;
}

.cinema-shell::-webkit-scrollbar,
.settings-route-shell::-webkit-scrollbar,
.settings-route-shell.persona-route-shell::-webkit-scrollbar,
.settings-route-shell.memory-route-shell::-webkit-scrollbar,
.settings-route-shell.vector-route-shell::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.cottage-message-scroll,
.chat-message-list,
.cottage-state-card-panel-layer,
.cottage-state-card-editor,
.cottage-new-window-panel-layer,
.cottage-new-window-dialog,
.chronicle-modal-backdrop,
.chronicle-modal,
.vector-folder-tree,
.vector-panel-body,
textarea {
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(in srgb, var(--kx-muted, #8f7a62) 10%, transparent)
    transparent;
}

.cottage-message-scroll::-webkit-scrollbar,
.chat-message-list::-webkit-scrollbar,
.cottage-state-card-panel-layer::-webkit-scrollbar,
.cottage-state-card-editor::-webkit-scrollbar,
.cottage-new-window-panel-layer::-webkit-scrollbar,
.cottage-new-window-dialog::-webkit-scrollbar,
.chronicle-modal-backdrop::-webkit-scrollbar,
.chronicle-modal::-webkit-scrollbar,
.vector-folder-tree::-webkit-scrollbar,
.vector-panel-body::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  display: block !important;
  width: 4px !important;
  height: 4px !important;
}

.cottage-message-scroll::-webkit-scrollbar-thumb,
.chat-message-list::-webkit-scrollbar-thumb,
.cottage-state-card-panel-layer::-webkit-scrollbar-thumb,
.cottage-state-card-editor::-webkit-scrollbar-thumb,
.cottage-new-window-panel-layer::-webkit-scrollbar-thumb,
.cottage-new-window-dialog::-webkit-scrollbar-thumb,
.chronicle-modal-backdrop::-webkit-scrollbar-thumb,
.chronicle-modal::-webkit-scrollbar-thumb,
.vector-folder-tree::-webkit-scrollbar-thumb,
.vector-panel-body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-muted, #8f7a62) 10%, transparent) !important;
}

/* Final route parity pass. Keep this at the end so page-specific legacy rules do
   not make route changes feel like jumping between different apps. */
.settings-route-shell,
.settings-route-shell.persona-route-shell,
.settings-route-shell.memory-route-shell,
.settings-route-shell.vector-route-shell,
.chronicle-route-shell {
  padding: 80px clamp(34px, 7vw, 104px) 56px;
}

.settings-route-shell .settings-page,
.settings-route-shell .cottage-ritual-page,
.settings-route-shell.persona-route-shell .cottage-ritual-page,
.settings-route-shell.memory-route-shell .cottage-ritual-page,
.settings-route-shell.vector-route-shell .cottage-ritual-page,
.vector-route-shell .vector-page,
.chronicle-page {
  width: min(100%, 1040px);
  margin-right: auto;
  margin-left: auto;
}

.chronicle-page,
.vector-route-shell .vector-page-card {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.persona-route-shell .cottage-page-heading,
.memory-route-shell .cottage-page-heading,
.vector-route-shell .vector-hero,
.chronicle-page-header,
.chronicle-list-header {
  min-height: 118px;
  align-items: flex-end;
  padding: 12px 4px 18px;
}

.vector-route-shell .vector-hero {
  display: flex;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.vector-route-shell .vector-page,
.vector-route-shell .vector-page-card,
.vector-route-shell .vector-hero {
  background: transparent !important;
}

.vector-route-shell .vector-hero h1,
.chronicle-title-lockup h1,
.chronicle-list-header h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.08;
}

.vector-route-shell .vector-hero p,
.chronicle-title-lockup p,
.chronicle-list-header p {
  max-width: 40rem;
  margin: 9px 0 0;
  color: var(--kx-muted);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
}

.vector-route-shell .vector-hero .settings-route-mark {
  background: transparent;
  box-shadow: none;
}

.chronicle-page-kicker,
.vector-route-shell .vector-hero h1 span {
  display: block;
  margin-bottom: 7px;
  color: var(--kx-primary);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.chronicle-page > .cottage-divider,
.vector-route-shell .cottage-divider,
.memory-route-shell .cottage-divider,
.persona-route-shell .cottage-divider {
  margin: 0 0 18px;
}

@media (max-width: 760px) {
  .settings-route-shell,
  .settings-route-shell.persona-route-shell,
  .settings-route-shell.memory-route-shell,
  .settings-route-shell.vector-route-shell,
  .chronicle-route-shell {
    padding: 68px 18px 34px;
  }

  .settings-route-shell .settings-page,
  .settings-route-shell .cottage-ritual-page,
  .settings-route-shell.persona-route-shell .cottage-ritual-page,
  .settings-route-shell.memory-route-shell .cottage-ritual-page,
  .settings-route-shell.vector-route-shell .cottage-ritual-page,
  .vector-route-shell .vector-page,
  .chronicle-page {
    width: min(100%, 720px);
  }

  .persona-route-shell .cottage-page-heading,
  .memory-route-shell .cottage-page-heading,
  .vector-route-shell .vector-hero,
  .chronicle-page-header,
  .chronicle-list-header {
    min-height: 0;
    align-items: flex-start;
    padding: 8px 0 14px;
  }
}

/* Final correction: route headers stay clean; only the actual content panels are framed. */
.persona-route-shell .cottage-page-heading,
.memory-route-shell .cottage-page-heading,
.memory-route-shell .memory-page-heading,
.vector-route-shell .vector-hero {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.memory-route-shell .memory-page-heading {
  padding: 12px 4px 18px !important;
}

.settings-route-shell .settings-page-card {
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.vector-route-shell .vector-section-panel {
  padding: 18px !important;
}

.vector-route-shell .vector-panel-body {
  gap: 18px !important;
  padding: 16px 2px 2px !important;
}

.vector-route-shell .vector-config-grid,
.vector-route-shell .vector-choice-grid,
.vector-route-shell .vector-scope-grid,
.vector-route-shell .vector-compact-control-grid {
  gap: 12px !important;
}

.vector-route-shell .vector-cache-card,
.vector-route-shell .vector-compact-control {
  padding: 9px 12px !important;
}

.vector-route-shell .vector-test-actions {
  gap: 10px !important;
}

@media (max-width: 760px) {
  .memory-route-shell .memory-page-heading {
    padding: 8px 0 14px !important;
  }

  .vector-route-shell .vector-section-panel {
    padding: 14px !important;
  }

  .vector-route-shell .vector-panel-body {
    gap: 12px !important;
    padding: 12px 0 0 !important;
  }
}

/* Open-source route polish: keep headers calm, give inner panels room to breathe. */
.memory-route-shell .memory-page-heading {
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--kx-primary) 14%, transparent), transparent 34%),
    linear-gradient(90deg, color-mix(in srgb, var(--kx-panel-soft) 42%, transparent), transparent 72%) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 18px 4px !important;
}

.settings-route-shell[data-theme] .persona-deck-panel,
.settings-route-shell[data-theme] .persona-editor-panel,
.settings-route-shell[data-theme] .memory-page-card,
.settings-route-shell[data-theme] .settings-section,
.vector-route-shell .vector-section-panel {
  padding: 20px !important;
}

.settings-route-shell[data-theme] .settings-section-toggle {
  padding: 16px !important;
}

.settings-route-shell[data-theme] .settings-section-body,
.settings-route-shell[data-theme] .memory-page-card .settings-section-body {
  gap: 14px !important;
  padding: 16px !important;
}

.settings-route-shell[data-theme] .memory-page-card > .settings-section {
  padding: 0 !important;
}

.settings-route-shell[data-theme] .memory-page-card > .settings-section + .settings-section {
  padding-top: 16px !important;
}

.memory-page-card .settings-section-toggle {
  padding: 0 0 12px !important;
}

.vector-route-shell .vector-panel-body {
  gap: 20px !important;
  padding: 18px 4px 4px !important;
}

.vector-route-shell .vector-compact-control-grid.four {
  gap: 8px !important;
}

.vector-route-shell .vector-compact-control-grid.four .vector-compact-control {
  min-height: 32px !important;
  gap: 5px !important;
  border-radius: 6px !important;
  padding: 5px 8px !important;
  font-size: 0.72rem !important;
}

.vector-route-shell .vector-compact-control-grid.four .vector-compact-control > span {
  color: var(--kx-text-main);
  font-size: 0.72rem !important;
  line-height: 1.1;
}

.vector-route-shell .vector-compact-control-grid.four .vector-compact-control input {
  width: 42px !important;
  padding: 1px 2px !important;
  font-size: 0.72rem !important;
}

.vector-route-shell .vector-compact-control-grid.four .vector-compact-control.toggle i {
  width: 26px !important;
  height: 14px !important;
}

.vector-route-shell .vector-compact-control-grid.four .vector-compact-control.toggle i::after {
  width: 10px !important;
  height: 10px !important;
}

.vector-route-shell .vector-compact-control-grid.four .vector-compact-control.toggle.active i::after {
  transform: translateX(12px) !important;
}

@media (max-width: 760px) {
  .memory-route-shell .memory-page-heading {
    padding: 14px 0 !important;
  }

  .settings-route-shell[data-theme] .persona-deck-panel,
  .settings-route-shell[data-theme] .persona-editor-panel,
  .settings-route-shell[data-theme] .memory-page-card,
  .settings-route-shell[data-theme] .settings-section,
  .vector-route-shell .vector-section-panel {
    padding: 16px !important;
  }

  .vector-route-shell .vector-panel-body {
    gap: 14px !important;
    padding: 14px 0 0 !important;
  }

  .vector-route-shell .vector-compact-control-grid.three {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 34px !important;
    align-items: center !important;
    gap: 3px !important;
    border-radius: 6px !important;
    padding: 5px 5px !important;
    font-size: 0.62rem !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control > span {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    color: var(--kx-text-main) !important;
    font-size: 0.62rem !important;
    line-height: 1.12 !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control > div {
    justify-self: end !important;
    max-width: none !important;
    gap: 2px !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control input {
    width: 30px !important;
    padding: 1px 1px !important;
    font-size: 0.62rem !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control .vector-budget-input {
    width: 42px !important;
    min-width: 40px !important;
    padding-inline: 2px !important;
    text-align: right !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control small {
    font-size: 0.52rem !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control.toggle {
    grid-template-columns: minmax(0, 1fr) 24px !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control.toggle i {
    width: 24px !important;
    height: 14px !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control.toggle i::after {
    width: 10px !important;
    height: 10px !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control.toggle.active i::after {
    transform: translateX(10px) !important;
  }
}

@media (max-width: 360px) {
  .vector-route-shell .vector-compact-control-grid.three {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control {
    padding-inline: 4px !important;
    font-size: 0.58rem !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control > span {
    font-size: 0.58rem !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control input {
    width: 28px !important;
  }

  .vector-route-shell .vector-compact-control-grid.three .vector-compact-control .vector-budget-input {
    width: 38px !important;
    min-width: 36px !important;
  }
}

.settings-route-shell[data-theme] .memory-compose-card .primary-memory-button {
  flex: 0 0 auto;
  white-space: nowrap;
  word-break: keep-all;
}

.vector-route-shell .vector-index-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px !important;
}

.vector-route-shell .vector-index-actions button,
.vector-route-shell .vector-index-actions label {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding-inline: 8px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .vector-route-shell .vector-compact-control-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control {
    display: grid !important;
    grid-template-columns: minmax(0, auto) auto !important;
    justify-content: center !important;
    min-height: 34px !important;
    gap: 2px 3px !important;
    padding: 5px 3px !important;
    font-size: 0.58rem !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control > span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    color: var(--kx-text-main) !important;
    font-size: 0.58rem !important;
    line-height: 1.1 !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control > div {
    justify-self: end !important;
    max-width: none !important;
    gap: 1px !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control input {
    width: 28px !important;
    padding: 1px 1px !important;
    font-size: 0.58rem !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control small {
    font-size: 0.48rem !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control.toggle {
    grid-template-columns: minmax(0, auto) 22px !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control.toggle i {
    width: 22px !important;
    height: 13px !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control.toggle i::after {
    width: 9px !important;
    height: 9px !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control.toggle.active i::after {
    transform: translateX(9px) !important;
  }

  .vector-route-shell .vector-index-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .vector-route-shell .vector-index-actions button,
  .vector-route-shell .vector-index-actions label {
    min-height: 32px !important;
    gap: 3px !important;
    padding-inline: 4px !important;
    font-size: 0.58rem !important;
  }

  .vector-route-shell .vector-index-actions svg {
    width: 13px !important;
    height: 13px !important;
  }
}

@media (max-width: 360px) {
  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-content: center !important;
    min-height: 42px !important;
    gap: 2px !important;
  }

  .vector-route-shell .vector-compact-control-grid.four .vector-compact-control.toggle {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Memory archive final surface: compose and list belong to one archive panel. */
.settings-route-shell.memory-route-shell[data-theme] {
  background:
    radial-gradient(circle at 18% 108px, rgba(var(--kx-primary-rgb), 0.15), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--kx-panel-soft) 30%, transparent) 0, transparent 260px),
    var(--kx-page-bg) !important;
}

.memory-route-shell .memory-page-heading {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 18px 4px !important;
}

.settings-route-shell[data-theme] .memory-page-card {
  gap: 14px !important;
}

.settings-route-shell[data-theme] .memory-page-card > .settings-section,
.settings-route-shell[data-theme] .memory-page-card > .settings-section + .settings-section {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.settings-route-shell[data-theme] .memory-page-card .settings-section-body {
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--kx-panel-soft) !important;
  padding: 16px !important;
}

.settings-route-shell[data-theme] .memory-page-card > .memory-compose-card {
  overflow: hidden !important;
  margin: 0 16px !important;
  border: 1px solid var(--kx-border-soft) !important;
  border-radius: 8px !important;
  background: var(--kx-panel-bg) !important;
  padding: 0 !important;
  box-shadow: 0 7px 20px var(--kx-shadow) !important;
}

.settings-route-shell[data-theme="white-gold"] .memory-page-card > .memory-compose-card {
  border-color: rgba(var(--kx-primary-rgb), 0.16) !important;
  background: #f4eee3 !important;
}

.settings-route-shell[data-theme="black-gold"] .memory-page-card > .memory-compose-card {
  background: #0a0a0a !important;
}

.settings-route-shell[data-theme="pink-mocha"] .memory-page-card > .memory-compose-card {
  background: #312a21 !important;
}

.settings-route-shell[data-theme] .memory-compose-card .settings-section-toggle {
  padding: 16px 20px 12px !important;
}

.settings-route-shell[data-theme] .memory-compose-card .settings-section-body {
  display: grid;
  gap: 0 !important;
  margin: 0 20px 18px !important;
  border: 1px solid var(--kx-border-soft) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--kx-input-bg) 90%, transparent) !important;
  padding: 12px 14px !important;
}

.settings-route-shell[data-theme] .memory-compose-card textarea {
  min-height: 52px !important;
  max-height: 108px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.settings-route-shell[data-theme] .memory-compose-card .memory-compose-foot {
  margin-top: 11px;
  border-top: 1px solid var(--kx-border-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 11px 0 0 !important;
}

.settings-route-shell[data-theme] .memory-compose-card .memory-compose-foot input {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.settings-route-shell[data-theme] .memory-page-card > .settings-section + .settings-section {
  border-top: 1px solid var(--kx-border-soft) !important;
  padding-top: 14px !important;
}

@media (max-width: 760px) {
  .memory-route-shell .memory-page-heading {
    padding: 14px 0 !important;
  }

  .settings-route-shell[data-theme] .memory-page-card {
    gap: 15px !important;
  }

  .settings-route-shell[data-theme] .memory-page-card > .memory-compose-card {
    margin: 0 !important;
  }
}

/* Route rail correction: align page containers without adding connector panels. */
.settings-route-shell,
.settings-route-shell.persona-route-shell,
.settings-route-shell.memory-route-shell,
.settings-route-shell.vector-route-shell {
  padding: 80px clamp(18px, 4vw, 64px) 56px !important;
}

.settings-route-shell .settings-page,
.settings-route-shell .cottage-ritual-page,
.settings-route-shell.persona-route-shell .cottage-ritual-page,
.settings-route-shell.memory-route-shell .cottage-ritual-page,
.settings-route-shell.vector-route-shell .cottage-ritual-page,
.vector-route-shell .vector-page {
  width: min(100%, 1120px) !important;
}

.persona-responsive-workbench,
.memory-page-card,
.vector-route-shell .vector-page-card {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.settings-route-shell[data-theme] > .settings-page > .settings-page-card {
  width: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.settings-route-shell[data-theme] .memory-page-card > .memory-compose-card {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.settings-route-shell[data-theme] .memory-page-card .settings-section-body {
  padding-right: 16px !important;
  padding-left: 16px !important;
}

@media (max-width: 760px) {
  .settings-route-shell,
  .settings-route-shell.persona-route-shell,
  .settings-route-shell.memory-route-shell,
  .settings-route-shell.vector-route-shell {
    padding: 68px 14px 32px !important;
  }

  .settings-page-card,
  .persona-responsive-workbench,
  .memory-page-card,
  .vector-route-shell .vector-page-card {
    width: 100% !important;
  }
}

/* Final memory archive header: visible gradient without adding another framed card. */
.settings-route-shell.memory-route-shell[data-theme] .memory-page-heading {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(var(--kx-primary-rgb), 0.22), transparent 38%),
    radial-gradient(ellipse at 86% 18%, color-mix(in srgb, var(--kx-panel-soft) 48%, transparent), transparent 42%),
    linear-gradient(118deg, color-mix(in srgb, var(--kx-panel-soft) 76%, transparent) 0%, color-mix(in srgb, var(--kx-primary) 16%, transparent) 54%, transparent 100%) !important;
  box-shadow: none !important;
}

/* Long chat: keep AI replies at a stable reading width instead of content-sized bubbles. */
.cottage-chat-shell[data-theme] .cottage-message-row.companion .cottage-message-stack {
  width: min(70ch, calc(100% - 52px)) !important;
  max-width: min(70ch, calc(100% - 52px)) !important;
}

.cottage-chat-shell[data-theme] .cottage-message-row.companion .cottage-message-card {
  width: 100% !important;
}

@media (max-width: 640px) {
  .cottage-chat-shell[data-theme] .cottage-message-row.companion .cottage-message-stack {
    width: min(100%, calc(100% - 42px)) !important;
    max-width: min(100%, calc(100% - 42px)) !important;
  }
}

/* Morandi poster title type for main route headings. */
:root {
  --kico-morandi-title-font: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

.settings-route-shell[data-theme] .cottage-page-heading h1,
.vector-route-shell .vector-hero h1,
.chronicle-title-lockup h1,
.chronicle-list-header h1 {
  font-family: var(--kico-morandi-title-font) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* Month entry headers follow the original cottage's serif volume title. */
.chronicle-route-shell .chronicle-list-header h1 {
  font-family: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "Times New Roman", serif !important;
  font-size: clamp(2.08rem, 5vw, 2.6rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.055em !important;
  line-height: 1 !important;
}

.chronicle-volume-title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.03em;
}

.chronicle-volume-title-number {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.chronicle-volume-title-mark {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, serif;
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Memory archive: the page background carries the gradient; the title block stays transparent. */
.settings-route-shell.memory-route-shell[data-theme] {
  background:
    radial-gradient(ellipse at 12% 86px, rgba(var(--kx-primary-rgb), 0.2), transparent 34%),
    radial-gradient(ellipse at 86% 124px, color-mix(in srgb, var(--kx-panel-soft) 42%, transparent), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--kx-panel-soft) 34%, transparent) 0%, transparent 330px),
    var(--kx-page-bg) !important;
}

.settings-route-shell.memory-route-shell[data-theme] .memory-page-heading {
  background: transparent !important;
}

/* Readable accent pass: keep white-gold/custom soft, but avoid pale gold text. */
.settings-route-shell[data-theme="white-gold"],
.chronicle-route-shell[data-theme="white-gold"],
.cinema-shell[data-theme="white-gold"],
.cottage-chat-shell[data-theme="white-gold"],
.cottage-route-switcher[data-theme="white-gold"] {
  --kx-readable-gold: #8f744e;
  --kx-primary: var(--kx-readable-gold);
  --kx-primary-rgb: 143, 116, 78;
  --kx-secondary: var(--kx-readable-gold);
  --interactive-accent: #9c8057;
  --text-accent: #8f7d68;
  --vector-primary-text: #2e2824;
}

.settings-route-shell[data-theme="custom"],
.chronicle-route-shell[data-theme="custom"],
.cinema-shell[data-theme="custom"],
.cottage-chat-shell[data-theme="custom"] {
  --kx-readable-gold: #a28576;
  --interactive-accent: #a28576;
  --text-accent: #8f7fa2;
  --kx-text-main: #4f4365;
  --vector-primary-text: #fbf9fc;
}

.settings-route-shell[data-theme="white-gold"] .visual-block-title,
.settings-route-shell[data-theme="white-gold"] .settings-section-heading svg,
.settings-route-shell[data-theme="custom"] .visual-block-title,
.settings-route-shell[data-theme="custom"] .settings-section-heading svg {
  color: var(--kx-readable-gold) !important;
}

.settings-route-shell[data-theme="white-gold"] .stream-row-card strong,
.settings-route-shell[data-theme="custom"] .stream-row-card strong,
.cinema-shell[data-theme="custom"] .stream-row-card strong {
  color: color-mix(in srgb, var(--kx-readable-gold) 78%, var(--kx-text-main) 22%) !important;
}

.settings-route-shell[data-theme="white-gold"] .stream-row-card small,
.settings-route-shell[data-theme="custom"] .stream-row-card small,
.cinema-shell[data-theme="custom"] .stream-row-card small {
  color: color-mix(in srgb, var(--kx-text-main) 54%, transparent) !important;
}

.settings-route-shell[data-theme="custom"] .settings-section-copy strong,
.settings-route-shell[data-theme="custom"] .settings-section-heading strong {
  color: #4f4365 !important;
}

.settings-route-shell[data-theme="custom"] .settings-section-icon,
.settings-route-shell[data-theme="custom"] .settings-section-chevron.open {
  border-color: color-mix(in srgb, #4f4365 26%, transparent) !important;
  color: #4f4365 !important;
  background: color-mix(in srgb, #4f4365 7%, transparent) !important;
}

.settings-route-shell[data-theme="white-gold"] .visual-block-title svg,
.settings-route-shell[data-theme="custom"] .visual-block-title svg {
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--kx-readable-gold) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.chronicle-route-shell[data-theme="white-gold"] .chronicle-toolbar button,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-search-row > button,
.chronicle-route-shell[data-theme="custom"] .chronicle-toolbar button,
.chronicle-route-shell[data-theme="custom"] .chronicle-search-row > button {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 32%, var(--kx-border));
  color: color-mix(in srgb, var(--kx-text-main) 86%, var(--kx-readable-gold) 14%);
  background: color-mix(in srgb, var(--kx-readable-gold) 8%, var(--kx-panel-soft));
}

.chronicle-route-shell[data-theme="white-gold"] .chronicle-toolbar button:hover,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-search-row > button:hover,
.chronicle-route-shell[data-theme="custom"] .chronicle-toolbar button:hover,
.chronicle-route-shell[data-theme="custom"] .chronicle-search-row > button:hover {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 48%, var(--kx-border));
  background: color-mix(in srgb, var(--kx-readable-gold) 13%, var(--kx-panel-soft));
}

.chronicle-route-shell[data-theme="white-gold"] .chronicle-page-kicker,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-modal h2,
.chronicle-route-shell[data-theme="custom"] .chronicle-page-kicker,
.chronicle-route-shell[data-theme="custom"] .chronicle-modal h2 {
  color: var(--kx-readable-gold);
}

.chronicle-route-shell[data-theme="white-gold"] .continuity-dialog-head h2,
.chronicle-route-shell[data-theme="custom"] .continuity-dialog-head h2 {
  color: var(--kx-text-main) !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-title-lockup h1,
.chronicle-route-shell[data-theme="custom"] .chronicle-list-header h1,
.chronicle-route-shell[data-theme="custom"] .chronicle-volume-title,
.chronicle-route-shell[data-theme="custom"] .chronicle-reading-heading h1,
.chronicle-route-shell[data-theme="custom"] .chronicle-entry-card h2,
.chronicle-route-shell[data-theme="custom"] .chronicle-month-copy h2,
.chronicle-route-shell[data-theme="custom"] .chronicle-modal h2 {
  color: #4f4365 !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-page-kicker,
.chronicle-route-shell[data-theme="custom"] .chronicle-reading-heading > span,
.chronicle-route-shell[data-theme="custom"] .chronicle-entry-date {
  color: #8f7fa2 !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-reading-heading p,
.chronicle-route-shell[data-theme="custom"] .chronicle-month-copy > span,
.chronicle-route-shell[data-theme="custom"] .chronicle-month-copy p,
.chronicle-route-shell[data-theme="custom"] .chronicle-entry-card p,
.chronicle-route-shell[data-theme="custom"] .chronicle-entry-badges span,
.chronicle-route-shell[data-theme="custom"] .chronicle-entry-tags {
  color: rgba(79, 67, 101, 0.62) !important;
}

.chronicle-route-shell[data-theme="custom"] .tone-deep .chronicle-month-copy h2,
.chronicle-route-shell[data-theme="custom"] .chronicle-entry.tone-deep .chronicle-entry-card h2 {
  color: #fbf9fc !important;
}

.chronicle-route-shell[data-theme="custom"] .tone-deep .chronicle-month-copy > span,
.chronicle-route-shell[data-theme="custom"] .tone-deep .chronicle-month-copy p,
.chronicle-route-shell[data-theme="custom"] .chronicle-entry.tone-deep .chronicle-entry-card p {
  color: rgba(251, 249, 252, 0.74) !important;
}

.chronicle-route-shell[data-theme="custom"] .tone-deep .chronicle-entry-badges span,
.chronicle-route-shell[data-theme="custom"] .tone-deep .chronicle-entry-tags {
  color: rgba(162, 133, 118, 0.82) !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-back,
.chronicle-route-shell[data-theme="custom"] .chronicle-reading-header > button {
  border: 1px solid color-mix(in srgb, #4f4365 18%, transparent) !important;
  color: #4f4365 !important;
  background: color-mix(in srgb, white 38%, transparent) !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-back:hover,
.chronicle-route-shell[data-theme="custom"] .chronicle-reading-header > button:hover {
  border-color: color-mix(in srgb, #4f4365 32%, transparent) !important;
  background: color-mix(in srgb, white 58%, transparent) !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-modal-close {
  border: 0 !important;
  color: rgba(79, 67, 101, 0.62) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-modal-close:hover {
  color: #4f4365 !important;
  background: transparent !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-search-row > button,
.chronicle-route-shell[data-theme="custom"] .chronicle-toolbar button,
.chronicle-route-shell[data-theme="custom"] .chronicle-reading-actions button,
.chronicle-route-shell[data-theme="custom"] .chronicle-empty button {
  border-color: color-mix(in srgb, #4f4365 20%, var(--kx-border)) !important;
  color: #4f4365 !important;
  background: color-mix(in srgb, #4f4365 6%, var(--kx-panel-soft)) !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-search-row > button:hover,
.chronicle-route-shell[data-theme="custom"] .chronicle-toolbar button:hover,
.chronicle-route-shell[data-theme="custom"] .chronicle-reading-actions button:hover,
.chronicle-route-shell[data-theme="custom"] .chronicle-empty button:hover {
  border-color: color-mix(in srgb, #4f4365 34%, var(--kx-border)) !important;
  background: color-mix(in srgb, #4f4365 10%, var(--kx-panel-soft)) !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-notice {
  border-color: rgba(166, 148, 188, 0.38) !important;
  color: #4f4365 !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(166, 148, 188, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(239, 233, 242, 0.98), rgba(251, 249, 252, 0.98) 56%, rgba(232, 221, 236, 0.92)) !important;
  box-shadow: 0 14px 38px rgba(79, 67, 101, 0.18) !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-notice svg {
  color: #4f4365 !important;
}

.chronicle-route-shell[data-theme="custom"] .seed-dialog {
  border-color: rgba(166, 148, 188, 0.30) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(166, 148, 188, 0.20), transparent 34%),
    radial-gradient(circle at 88% 96%, rgba(162, 133, 118, 0.08), transparent 36%),
    linear-gradient(145deg, rgba(239, 233, 242, 0.98), rgba(251, 249, 252, 0.98) 62%, rgba(232, 221, 236, 0.86)) !important;
  box-shadow: 0 24px 76px rgba(79, 67, 101, 0.24) !important;
}

.chronicle-route-shell[data-theme="custom"] .seed-dialog > p,
.chronicle-route-shell[data-theme="custom"] .seed-dialog article p,
.chronicle-route-shell[data-theme="custom"] .seed-dialog .chronicle-empty p {
  color: rgba(79, 67, 101, 0.68) !important;
}

.chronicle-route-shell[data-theme="custom"] .seed-dialog article {
  border-color: rgba(166, 148, 188, 0.24) !important;
  background: rgba(255, 255, 255, 0.50) !important;
}

.chronicle-route-shell[data-theme="custom"] .seed-dialog h3 {
  color: #4f4365 !important;
}

.chronicle-route-shell[data-theme="custom"] .seed-dialog article i {
  color: rgba(79, 67, 101, 0.66) !important;
  opacity: 1 !important;
}

.chronicle-route-shell[data-theme="custom"] .seed-dialog footer button {
  border-color: rgba(166, 148, 188, 0.24) !important;
  color: #4f4365 !important;
  background: rgba(255, 255, 255, 0.50) !important;
}

.chronicle-route-shell[data-theme="custom"] .seed-dialog footer button.chronicle-primary {
  border-color: rgba(166, 148, 188, 0.50) !important;
  color: #fbf9fc !important;
  background: #a694bc !important;
}

.chronicle-route-shell[data-theme="custom"] .chronicle-entry-rail > button,
.chronicle-route-shell[data-theme="custom"] .chronicle-entry-actions,
.chronicle-route-shell[data-theme="custom"] .chronicle-reading-date strong,
.chronicle-route-shell[data-theme="custom"] .chronicle-reading-heading > span,
.chronicle-route-shell[data-theme="custom"] .chronicle-reading-star,
.chronicle-route-shell[data-theme="custom"] .seed-dialog article > span {
  color: color-mix(in srgb, #4f4365 78%, #a694bc 22%) !important;
}

.chronicle-route-shell[data-theme="custom"] .continuity-dialog {
  border-color: rgba(166, 148, 188, 0.30) !important;
  background:
    radial-gradient(circle at 11% 4%, rgba(231, 218, 241, 0.46), transparent 32%),
    radial-gradient(circle at 88% 92%, rgba(166, 148, 188, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(250, 249, 251, 0.98), rgba(231, 218, 241, 0.90) 100%) !important;
  box-shadow: 0 24px 80px rgba(79, 67, 101, 0.25) !important;
}

.chronicle-route-shell[data-theme="custom"] .diary-editor {
  border-color: rgba(166, 148, 188, 0.30) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(166, 148, 188, 0.22), transparent 36%),
    radial-gradient(circle at 92% 92%, rgba(162, 133, 118, 0.10), transparent 38%),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 31px,
      rgba(166, 148, 188, 0.075) 32px
    ),
    linear-gradient(145deg, rgba(239, 233, 242, 0.96), rgba(255, 255, 255, 0.96) 58%, rgba(232, 221, 236, 0.84)) !important;
}

.chronicle-route-shell[data-theme="custom"] .diary-editor input,
.chronicle-route-shell[data-theme="custom"] .diary-editor textarea {
  border-color: rgba(166, 148, 188, 0.22) !important;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 30px,
      rgba(166, 148, 188, 0.08) 31px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(250, 249, 252, 0.70)) !important;
}

.chronicle-route-shell[data-theme="custom"] .continuity-dialog-glyph {
  border-color: rgba(166, 148, 188, 0.28) !important;
  color: #a28576 !important;
  background: rgba(255, 255, 255, 0.34) !important;
}

.chronicle-route-shell[data-theme="custom"] .continuity-option.active:not(.soft) {
  border-color: rgba(162, 133, 118, 0.42) !important;
  color: #faf9fb !important;
  background: linear-gradient(135deg, rgba(79, 67, 101, 0.94), rgba(79, 67, 101, 0.82)) !important;
}

.chronicle-route-shell[data-theme="custom"] .continuity-option.active:not(.soft) small {
  color: rgba(231, 218, 241, 0.86) !important;
}

.chronicle-route-shell[data-theme="custom"] .continuity-option.active.soft,
.chronicle-route-shell[data-theme="custom"] .continuity-range-card,
.chronicle-route-shell[data-theme="custom"] .continuity-dialog .chronicle-pins > div,
.chronicle-route-shell[data-theme="custom"] .continuity-dialog .chronicle-pins form,
.chronicle-route-shell[data-theme="custom"] .continuity-seed-foot {
  border-color: rgba(166, 148, 188, 0.22) !important;
  background: rgba(255, 255, 255, 0.42) !important;
}

.chronicle-route-shell[data-theme="custom"] .continuity-line-field textarea {
  border-color: rgba(166, 148, 188, 0.24) !important;
  color: #4f4365 !important;
  background: rgba(250, 249, 251, 0.70) !important;
}

.chronicle-route-shell[data-theme="custom"] .continuity-generate,
.chronicle-route-shell[data-theme="custom"] .continuity-dialog .chronicle-days button {
  border-color: rgba(166, 148, 188, 0.24) !important;
  color: #4f4365 !important;
  background: rgba(255, 255, 255, 0.42) !important;
}

.chronicle-route-shell[data-theme="custom"] .continuity-dialog .chronicle-days button.active {
  border-color: rgba(79, 67, 101, 0.34) !important;
  color: #faf9fb !important;
  background: rgba(79, 67, 101, 0.88) !important;
}

.chronicle-route-shell[data-theme="white-gold"] .continuity-dialog .chronicle-days button.active {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 54%, transparent) !important;
  color: #2e2824 !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--kx-readable-gold) 92%, white 8%),
      color-mix(in srgb, var(--kx-readable-gold) 76%, #6f5636 24%)
    ) !important;
}

.chronicle-route-shell[data-theme="white-gold"] .chronicle-notice {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 38%, transparent) !important;
  color: #2e2824 !important;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--kx-readable-gold) 14%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--kx-readable-gold) 9%, white 91%) 100%) !important;
  box-shadow: 0 14px 38px rgba(143, 116, 78, 0.16) !important;
}

.chronicle-route-shell[data-theme="white-gold"] .chronicle-notice svg {
  color: #2e2824 !important;
}

.chronicle-route-shell[data-theme="white-gold"] .seed-dialog > p,
.chronicle-route-shell[data-theme="white-gold"] .seed-dialog article p,
.chronicle-route-shell[data-theme="white-gold"] .seed-dialog .chronicle-empty p {
  color: rgba(46, 40, 36, 0.66) !important;
}

.chronicle-route-shell[data-theme="white-gold"] .seed-dialog article {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 22%, transparent) !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

.chronicle-route-shell[data-theme="white-gold"] .seed-dialog h3,
.chronicle-route-shell[data-theme="white-gold"] .seed-dialog footer button {
  color: #2e2824 !important;
}

.chronicle-route-shell[data-theme="white-gold"] .seed-dialog article i {
  color: color-mix(in srgb, var(--kx-readable-gold) 70%, #2e2824 30%) !important;
  opacity: 1 !important;
}

.chronicle-route-shell[data-theme="white-gold"] .seed-dialog footer button.chronicle-primary {
  color: #2e2824 !important;
  background: color-mix(in srgb, var(--kx-readable-gold) 72%, white 28%) !important;
}

.chronicle-route-shell[data-theme] .chronicle-modal-close {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chronicle-route-shell[data-theme] .chronicle-modal-close:hover {
  background: transparent !important;
}

.chronicle-route-shell[data-theme="white-gold"] .tone-deep .chronicle-month-number,
.chronicle-route-shell[data-theme="white-gold"] .tone-deep .chronicle-month-meta,
.chronicle-route-shell[data-theme="white-gold"] .tone-deep:hover .chronicle-delete-month,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-entry-rail > button,
.chronicle-route-shell[data-theme="white-gold"] .tone-deep .chronicle-entry-badges span,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-reading-heading > span,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-reading-star,
.chronicle-route-shell[data-theme="white-gold"] .seed-dialog article > span {
  color: var(--kx-readable-gold) !important;
}

.chronicle-route-shell[data-theme="white-gold"] .chronicle-entry.tone-deep .chronicle-entry-card {
  border-left-color: var(--kx-readable-gold) !important;
}

.chronicle-route-shell[data-theme="white-gold"] .tone-deep .chronicle-entry-card p,
.chronicle-route-shell[data-theme="white-gold"] .tone-deep .chronicle-month-copy p {
  color: color-mix(in srgb, var(--kx-readable-gold) 72%, white 28%) !important;
}

.chronicle-route-shell[data-theme="white-gold"] .tone-deep .chronicle-entry-tags {
  color: color-mix(in srgb, var(--kx-readable-gold) 74%, transparent) !important;
}

.chronicle-route-shell[data-theme="white-gold"] .chronicle-reading-sheet blockquote {
  border-left-color: var(--kx-readable-gold) !important;
  color: var(--kx-readable-gold) !important;
}

.settings-route-shell[data-theme="white-gold"] .settings-route-header button,
.settings-route-shell[data-theme="white-gold"] .persona-back-button,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-back,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-reading-header > button,
.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-title button,
.cottage-chat-shell[data-theme="white-gold"] .cottage-chat-actions button,
.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-toggle,
.cottage-chat-shell[data-theme="white-gold"] .cottage-session-search button,
.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-actions button,
.cottage-chat-shell[data-theme="white-gold"] .cottage-session-actions button,
.cottage-chat-shell[data-theme="white-gold"] .cottage-session-section-toggle,
.cottage-route-switcher[data-theme="white-gold"] button:hover,
.cottage-route-switcher[data-theme="white-gold"] button.active {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 26%, transparent) !important;
  color: var(--kx-readable-gold) !important;
  background: color-mix(in srgb, var(--kx-readable-gold) 8%, white) !important;
}

.settings-route-shell[data-theme="white-gold"] .settings-route-header button:hover,
.settings-route-shell[data-theme="white-gold"] .persona-back-button:hover,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-back:hover,
.chronicle-route-shell[data-theme="white-gold"] .chronicle-reading-header > button:hover,
.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-title button:hover,
.cottage-chat-shell[data-theme="white-gold"] .cottage-chat-actions button:hover,
.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-toggle:hover,
.cottage-chat-shell[data-theme="white-gold"] .cottage-session-search button:hover,
.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-actions button:hover,
.cottage-chat-shell[data-theme="white-gold"] .cottage-session-actions button:hover,
.cottage-chat-shell[data-theme="white-gold"] .cottage-session-section-toggle:hover {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 42%, transparent) !important;
  color: #5f4a32 !important;
  background: color-mix(in srgb, var(--kx-readable-gold) 14%, white) !important;
}

.chronicle-route-shell[data-theme] .chronicle-toolbar .chronicle-continuity-button {
  border-color: color-mix(in srgb, var(--kx-primary) 36%, var(--kx-border)) !important;
  color: color-mix(in srgb, var(--kx-text-main) 86%, var(--kx-primary) 14%) !important;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--kx-primary) 16%, transparent), transparent 42%),
    color-mix(in srgb, var(--kx-primary) 10%, var(--kx-panel-soft)) !important;
}

.chronicle-route-shell[data-theme] .chronicle-toolbar .chronicle-continuity-button:hover {
  border-color: color-mix(in srgb, var(--kx-primary) 52%, var(--kx-border)) !important;
  color: var(--kx-text-main) !important;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--kx-primary) 22%, transparent), transparent 44%),
    color-mix(in srgb, var(--kx-primary) 15%, var(--kx-panel-soft)) !important;
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-session-section-toggle em,
.cottage-chat-shell[data-theme="white-gold"] .cottage-search-summary strong,
.cottage-chat-shell[data-theme="white-gold"] .cottage-search-hit > span strong,
.cottage-chat-shell[data-theme="white-gold"] .cottage-markdown a {
  color: var(--kx-readable-gold) !important;
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-markdown blockquote,
.cinema-shell[data-theme="white-gold"] .cinema-companion-markdown blockquote {
  border-left-color: color-mix(in srgb, var(--kx-text-main) 20%, transparent) !important;
  color: color-mix(in srgb, var(--kx-text-main) 86%, transparent) !important;
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-markdown code,
.cottage-chat-shell[data-theme="white-gold"] .cottage-markdown pre,
.cinema-shell[data-theme="white-gold"] .cinema-companion-markdown code,
.cinema-shell[data-theme="white-gold"] .cinema-companion-markdown pre {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 24%, transparent) !important;
  background: color-mix(in srgb, var(--kx-readable-gold) 7%, white) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-markdown a,
.cinema-shell[data-theme="custom"] .cinema-companion-markdown a {
  color: color-mix(in srgb, #4f4365 82%, var(--kx-readable-gold) 18%) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-markdown blockquote,
.cinema-shell[data-theme="custom"] .cinema-companion-markdown blockquote {
  border-left-color: color-mix(in srgb, #4f4365 20%, transparent) !important;
  color: color-mix(in srgb, #4f4365 86%, transparent) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-markdown hr,
.cinema-shell[data-theme="custom"] .cinema-companion-markdown hr {
  border-top-color: color-mix(in srgb, #4f4365 16%, transparent) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-markdown code,
.cottage-chat-shell[data-theme="custom"] .cottage-markdown pre,
.cinema-shell[data-theme="custom"] .cinema-companion-markdown code,
.cinema-shell[data-theme="custom"] .cinema-companion-markdown pre {
  border-color: color-mix(in srgb, #4f4365 20%, transparent) !important;
  color: #4f4365 !important;
  background: color-mix(in srgb, #4f4365 6%, white) !important;
}

/* Chronos / time awareness: dynamic context only, kept visually light. */
.chronos-settings-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--kx-primary-rgb), 0.10), transparent 34%),
    color-mix(in srgb, var(--kx-panel-soft) 86%, transparent);
  padding: 12px 14px;
}

.chronos-copy {
  display: grid;
  gap: 4px;
}

.chronos-copy strong {
  color: var(--kx-text-main);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.chronos-copy small,
.chronos-settings-card p {
  margin: 0;
  color: var(--kx-muted);
  font-size: 0.64rem;
  line-height: 1.58;
}

.chronos-mode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.chronos-mode-row button {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--kx-border);
  border-radius: 999px;
  color: var(--kx-muted);
  background: color-mix(in srgb, var(--kx-input-bg) 82%, transparent);
  font-size: 0.68rem;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.chronos-mode-row button:hover,
.chronos-mode-row button.active {
  border-color: color-mix(in srgb, var(--kx-primary) 48%, var(--kx-border));
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-primary) 13%, var(--kx-panel-soft));
}

.chronos-mode-row button:hover {
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .chronos-mode-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .chronos-mode-row button {
    min-height: 29px;
    padding: 0 8px;
    font-size: 0.65rem;
  }
}

/* Contrast pass for pale themes: preserve softness without losing text. */
.settings-route-shell[data-theme="custom"],
.chronicle-route-shell[data-theme="custom"],
.cinema-shell[data-theme="custom"],
.cottage-chat-shell[data-theme="custom"] {
  --kx-readable-gold: #a28576;
  --interactive-accent: #a28576;
  --kx-primary: #a28576;
  --kx-primary-rgb: 162, 133, 118;
  --kx-text-main: #4f4365;
}

.cottage-chat-shell[data-theme="custom"] .cottage-thinking,
.cottage-chat-shell[data-theme="custom"] .cottage-load-older {
  color: color-mix(in srgb, var(--kx-text-main) 86%, #746f80 14%) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-reasoning-chip {
  color: color-mix(in srgb, var(--kx-text-main) 66%, #746f80 34%) !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--kx-text-main) 4.5%, transparent),
    color-mix(in srgb, var(--kx-text-main) 1.5%, transparent) 72%,
    transparent
  ) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-reasoning-chip.is-open {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--kx-text-main) 6%, white 94%),
      color-mix(in srgb, var(--kx-text-main) 2.5%, white 97.5%) 68%,
      transparent
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 54%) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-reasoning-icon {
  --interactive-accent: color-mix(in srgb, var(--kx-text-main) 58%, #746f80 42%);
  --text-accent: color-mix(in srgb, var(--kx-text-main) 48%, #a694bc 52%);
}

.cottage-chat-shell[data-theme="custom"] .cottage-reasoning-chip pre {
  color: color-mix(in srgb, var(--kx-text-main) 66%, transparent) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-reasoning-chip pre.raw {
  color: color-mix(in srgb, var(--kx-text-main) 52%, transparent) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-sidebar-actions button,
.cottage-chat-shell[data-theme="custom"] .cottage-session-section-toggle,
.cottage-chat-shell[data-theme="custom"] .cottage-message-file,
.cottage-chat-shell[data-theme="custom"] .cottage-message-card > button {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 28%, transparent) !important;
  color: color-mix(in srgb, var(--kx-readable-gold) 82%, var(--kx-text-main) 18%) !important;
  background: color-mix(in srgb, var(--kx-readable-gold) 8%, var(--kx-panel-soft) 92%) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-sidebar-actions button:hover,
.cottage-chat-shell[data-theme="custom"] .cottage-session-section-toggle:hover,
.cottage-chat-shell[data-theme="custom"] .cottage-message-card > button:hover {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 44%, var(--kx-border)) !important;
  color: var(--kx-text-main) !important;
  background: color-mix(in srgb, var(--kx-readable-gold) 16%, var(--kx-panel-soft) 84%) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-session-section-toggle em {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 30%, transparent) !important;
  color: color-mix(in srgb, var(--kx-readable-gold) 86%, var(--kx-text-main) 14%) !important;
  background: color-mix(in srgb, var(--kx-readable-gold) 7%, transparent) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-session-actions button {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 18%, transparent) !important;
  color: color-mix(in srgb, var(--kx-readable-gold) 68%, var(--kx-text-main) 32%) !important;
  background: color-mix(in srgb, var(--kx-readable-gold) 5%, transparent) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-session-actions button:hover {
  border-color: color-mix(in srgb, var(--kx-readable-gold) 38%, var(--kx-border)) !important;
  color: var(--kx-text-main) !important;
  background: color-mix(in srgb, var(--kx-readable-gold) 13%, transparent) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-session-actions button:last-child,
.cottage-chat-shell[data-theme="custom"] .cottage-session-actions button:last-child:hover {
  color: #8b4f5a !important;
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-toggle,
.cottage-chat-shell[data-theme="custom"] .cottage-sidebar-toggle {
  border-color: color-mix(in srgb, var(--kx-primary) 28%, var(--kx-border));
  color: color-mix(in srgb, var(--kx-text-main) 82%, var(--kx-primary));
  background: color-mix(in srgb, var(--kx-panel-soft) 72%, transparent);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-toggle:hover,
.cottage-chat-shell[data-theme="custom"] .cottage-sidebar-toggle:hover {
  border-color: color-mix(in srgb, var(--kx-primary) 42%, var(--kx-border));
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-primary) 11%, var(--kx-panel-soft));
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-sidebar-toggle.is-open,
.cottage-chat-shell[data-theme="custom"] .cottage-sidebar-toggle.is-open {
  border-color: color-mix(in srgb, var(--kx-primary) 16%, var(--kx-border));
  color: color-mix(in srgb, var(--kx-text-main) 58%, var(--kx-primary));
  background: color-mix(in srgb, var(--kx-panel-soft) 86%, transparent);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-empty-chat,
.cottage-chat-shell[data-theme="custom"] .cottage-empty-chat {
  color: var(--kx-muted);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-empty-chat strong,
.cottage-chat-shell[data-theme="custom"] .cottage-empty-chat strong {
  color: var(--kx-text-main);
}

.cottage-chat-shell[data-theme="white-gold"] .cottage-empty-chat span {
  color: rgba(70, 55, 41, 0.66);
}

.cottage-chat-shell[data-theme="custom"] .cottage-empty-chat span {
  color: rgba(79, 67, 101, 0.66);
}

.cottage-chat-shell[data-theme="custom"] .cottage-chat-hud {
  border-bottom-color: rgba(79, 67, 101, 0.08) !important;
  background:
    radial-gradient(circle at 50% -32%, rgba(166, 148, 188, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(251, 249, 252, 0.26), rgba(251, 249, 252, 0)) !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-chat-title {
  color: rgba(79, 67, 101, 0.72) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-chat-title input {
  color: #4f4365 !important;
  background: transparent !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-chat-actions button,
.cottage-chat-shell[data-theme="custom"] .cottage-sidebar-toggle {
  border-color: rgba(79, 67, 101, 0.12) !important;
  color: rgba(79, 67, 101, 0.70) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

.cottage-chat-shell[data-theme="custom"] .cottage-chat-actions button:hover,
.cottage-chat-shell[data-theme="custom"] .cottage-sidebar-toggle:hover,
.cottage-chat-shell[data-theme="custom"] .cottage-sidebar-toggle.is-open {
  border-color: rgba(79, 67, 101, 0.22) !important;
  color: #4f4365 !important;
  background: rgba(255, 255, 255, 0.36) !important;
}

/* Chat reading parity with the original cottage: avatar scale, bubble width and
   markdown rhythm should feel calm in long conversations. */
.cottage-message-scroll {
  gap: 0;
}

.cottage-message-row {
  gap: 12px;
  margin-bottom: 24px;
}

.cottage-message-row.companion {
  margin-bottom: 40px;
}

.cottage-message-row:last-child {
  margin-bottom: 0;
}

.cottage-message-avatar {
  width: 40px;
  height: 40px;
  margin-top: 0;
  opacity: 0.94;
}

.cottage-message-stack {
  min-width: 0;
  max-width: calc(100% - 90px);
}

.cottage-message-row:not(:has(.cottage-message-avatar)) .cottage-message-stack {
  max-width: 98%;
}

.cottage-message-row.companion.is-streaming .cottage-message-stack {
  width: min(76ch, calc(100% - 90px));
  min-width: min(360px, calc(100vw - 132px));
}

.cottage-message-card {
  border-radius: 24px;
  padding: 14px 16px 15px;
  font-size: var(--cottage-chat-text-size, 15px);
  line-height: 3.05;
}

.cottage-chat-shell[data-font-size="small"] {
  --cottage-chat-text-size: 15px;
}

.cottage-chat-shell[data-font-size="standard"] {
  --cottage-chat-text-size: 16px;
}

.cottage-chat-shell[data-font-size="large"] {
  --cottage-chat-text-size: 18px;
}

.cottage-message-row.companion .cottage-message-card {
  border-radius: 24px 24px 24px 7px;
}

.cottage-message-row.user .cottage-message-card {
  border-radius: 24px 24px 7px 24px;
  padding: 7px 13px 8px;
  line-height: 1.75;
}

.cottage-markdown,
.cinema-companion-markdown {
  gap: 1.05em;
  line-height: 3.05;
}

.cottage-markdown p,
.cinema-companion-markdown p,
.cottage-message-card p {
  line-height: 3.05;
}

.cottage-message-row.user .cottage-markdown {
  gap: 0.35em;
  line-height: 1.75;
}

.cottage-message-row.user .cottage-markdown p {
  line-height: 1.75;
}

.cottage-markdown strong,
.cinema-companion-markdown strong {
  font-weight: 650;
}

.cottage-markdown blockquote,
.cinema-companion-markdown blockquote {
  margin: 0.35rem 0;
  padding: 0 0 0 10px;
  line-height: 1.58;
  color: color-mix(in srgb, currentColor 84%, transparent);
}

.cottage-markdown blockquote p,
.cinema-companion-markdown blockquote p {
  line-height: 1.58;
}

.cottage-chat-shell[data-theme] .cottage-markdown blockquote,
.cinema-shell[data-theme] .cinema-companion-markdown blockquote {
  border-left-color: color-mix(in srgb, var(--kx-text-main) 20%, transparent);
  color: color-mix(in srgb, var(--kx-text-main) 86%, transparent);
}

.cottage-chat-shell[data-theme] .cottage-markdown hr,
.cinema-shell[data-theme] .cinema-companion-markdown hr {
  border-top-color: color-mix(in srgb, var(--kx-text-main) 12%, transparent);
}

@media (min-width: 768px) {
  .cottage-message-avatar {
    width: 48px;
    height: 48px;
  }

  .cottage-message-stack {
    max-width: calc(100% - 130px);
  }

  .cottage-message-row:not(:has(.cottage-message-avatar)) .cottage-message-stack {
    max-width: 98%;
  }

  .cottage-message-row.companion.is-streaming .cottage-message-stack {
    width: min(76ch, calc(100% - 130px));
  }
}

@media (max-width: 620px), (pointer: coarse) {
  .cottage-markdown strong,
  .cinema-companion-markdown strong {
    font-weight: 600;
  }
}

@media (max-width: 520px) {
  .cottage-message-row {
    gap: 10px;
    margin-bottom: 20px;
  }

  .cottage-message-row.companion {
    margin-bottom: 30px;
  }

  .cottage-message-stack {
    max-width: calc(100% - 66px);
  }

  .cottage-message-row:not(:has(.cottage-message-avatar)) .cottage-message-stack {
    max-width: 92%;
  }

  .cottage-message-card {
    padding: 13px 14px 14px;
  }
}

.settings-route-shell[data-theme="white-gold"] .persona-memory-gate strong,
.settings-route-shell[data-theme="custom"] .persona-memory-gate strong {
  color: var(--kx-text-main);
}

.settings-route-shell[data-theme="white-gold"] .persona-memory-gate small {
  color: rgba(70, 55, 41, 0.62);
  opacity: 1;
}

.settings-route-shell[data-theme="custom"] .persona-memory-gate small {
  color: rgba(79, 67, 101, 0.62);
  opacity: 1;
}

/* Settings density pass: smaller theme swatches and compact model presets. */
.theme-orb-row {
  gap: 10px !important;
}

.theme-orb-row button {
  gap: 5px !important;
  font-size: 0.66rem !important;
}

.theme-orb-row button > span {
  width: 26px !important;
  height: 26px !important;
  border-width: 1.5px !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12) !important;
}

.theme-orb-row button.active > span,
.theme-orb-row button:hover > span {
  box-shadow: 0 0 10px rgba(var(--kx-primary-rgb), 0.18) !important;
  transform: scale(1.05) !important;
}

.theme-orb-row button svg {
  right: -3px !important;
  top: 17px !important;
  width: 13px !important;
  height: 13px !important;
}

.settings-grid .model-preset-field {
  grid-column: 1 / -1;
}

.model-preset-row {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 6px !important;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.model-preset-row::-webkit-scrollbar {
  display: none;
}

.model-preset-row button {
  min-height: 26px !important;
  flex: 0 0 auto;
  padding: 0 9px !important;
  font-size: 0.67rem !important;
}

.model-preset-row.provider-openrouter {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: visible;
}

.model-preset-row.provider-openrouter button {
  min-width: 0;
  width: 100%;
  padding: 0 7px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .model-preset-row.provider-openrouter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.persona-deck-heading {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.persona-deck-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.persona-add-inline {
  min-height: 22px;
  border: 1px solid var(--kx-border);
  border-radius: 999px;
  color: var(--kx-primary);
  background: color-mix(in srgb, var(--kx-primary) 8%, transparent);
  padding: 0 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.persona-add-inline:hover {
  border-color: color-mix(in srgb, var(--kx-primary) 42%, var(--kx-border));
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-primary) 14%, transparent);
}

.persona-delete-inline {
  display: inline-flex;
  width: 24px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--kx-border) 78%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--kx-muted) 62%, transparent);
  background: transparent;
  padding: 0;
  opacity: 0.48;
}

.persona-delete-inline:hover:not(:disabled) {
  border-color: color-mix(in srgb, #c97777 45%, var(--kx-border));
  color: #c97777;
  background: color-mix(in srgb, #c97777 8%, transparent);
  opacity: 1;
}

.persona-delete-inline:disabled {
  cursor: not-allowed;
  opacity: 0.22;
}

.persona-deck-heading .persona-deck-actions {
  display: flex !important;
  width: auto !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.persona-deck-heading .persona-add-inline,
.persona-deck-heading .persona-delete-inline {
  flex: 0 0 auto !important;
}

.persona-deck-heading .persona-delete-inline {
  width: 22px !important;
  min-width: 22px !important;
}

.vector-route-shell .vector-index-actions {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr) minmax(48px, 0.66fr) !important;
}

.vector-route-shell .vector-test-actions.vector-index-actions > button,
.vector-route-shell .vector-test-actions.vector-index-actions > label.vector-clear-button {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  padding-inline: 6px !important;
}

.vector-route-shell .vector-test-actions.vector-index-actions > :nth-child(2),
.vector-route-shell .vector-test-actions.vector-index-actions > :nth-child(3) {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
}

.vector-route-shell .vector-index-actions .ghost {
  padding-inline: 5px !important;
}

@media (max-width: 760px) {
  .vector-route-shell .vector-index-actions {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 1fr) minmax(42px, 0.62fr) !important;
  }

  .vector-route-shell .vector-index-actions .ghost {
    padding-inline: 3px !important;
  }
}

@media (max-width: 900px) {
  .settings-route-shell[data-theme] .visual-cortex-card {
    gap: 12px !important;
  }

  .settings-route-shell[data-theme] .visual-inline-row.background-inline-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.54fr) !important;
    gap: 7px !important;
    align-items: stretch !important;
  }

  .settings-route-shell[data-theme] .visual-inline-row.background-inline-row .visual-compact-title {
    grid-column: 1 / -1;
    min-width: 0 !important;
  }

  .settings-route-shell[data-theme] .visual-inline-row.background-inline-row .background-upload-card,
  .settings-route-shell[data-theme] .visual-inline-row.background-inline-row .cinema-layout-control {
    min-width: 0 !important;
    width: 100% !important;
  }

  .settings-route-shell[data-theme] .visual-inline-row.background-inline-row .background-upload-card {
    padding-inline: 9px !important;
  }

  .settings-route-shell[data-theme] .visual-inline-row.background-inline-row .cinema-layout-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px !important;
    justify-items: stretch !important;
  }

  .settings-route-shell[data-theme] .visual-inline-row.background-inline-row .cinema-layout-control > span {
    display: none !important;
  }

  .settings-route-shell[data-theme] .cinema-layout-cycle {
    width: 100% !important;
    padding-inline: 7px !important;
  }

  .settings-route-shell[data-theme] .visual-inline-pair {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .settings-route-shell[data-theme] .visual-compact-setting {
    grid-template-columns: minmax(54px, 0.34fr) minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .settings-route-shell[data-theme] .visual-compact-title {
    min-width: 0 !important;
    font-size: 0.68rem !important;
  }

  .settings-route-shell[data-theme] .font-style-row,
  .settings-route-shell[data-theme] .font-size-row {
    display: grid !important;
    gap: 4px !important;
    min-height: 30px !important;
    padding: 4px !important;
  }

  .settings-route-shell[data-theme] .font-style-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .settings-route-shell[data-theme] .font-size-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .settings-route-shell[data-theme] .font-style-row button,
  .settings-route-shell[data-theme] .font-size-row button {
    min-height: 24px !important;
    padding-inline: 4px !important;
    font-size: 0.64rem !important;
    white-space: nowrap;
  }

  .settings-route-shell[data-theme] .hud-toggle-card {
    gap: 7px !important;
    padding-top: 10px !important;
  }

  .settings-route-shell[data-theme] .hud-toggle-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px !important;
  }

  .settings-route-shell[data-theme] .hud-toggle-row button {
    justify-content: center !important;
    min-height: 30px !important;
    gap: 2px !important;
    padding-inline: 2px !important;
    font-size: 0.58rem !important;
    white-space: nowrap;
  }

  .settings-route-shell[data-theme] .hud-toggle-row button svg {
    width: 11px !important;
    height: 11px !important;
  }
}

@media (max-width: 380px) {
  .settings-route-shell[data-theme] .visual-inline-row.background-inline-row {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 0.48fr) !important;
  }

  .settings-route-shell[data-theme] .background-upload-card strong,
  .settings-route-shell[data-theme] .cinema-layout-cycle strong {
    font-size: 0.62rem !important;
  }

  .settings-route-shell[data-theme] .visual-compact-setting {
    grid-template-columns: minmax(46px, 0.28fr) minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .settings-route-shell[data-theme] .visual-compact-title {
    font-size: 0.62rem !important;
  }

  .settings-route-shell[data-theme] .hud-toggle-row button {
    font-size: 0.52rem !important;
  }

  .settings-route-shell[data-theme] .hud-toggle-row button svg {
    display: none !important;
  }
}

.journal-channel-card {
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--kx-border) 82%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--kx-primary) 10%, transparent), transparent 44%),
    color-mix(in srgb, var(--kx-panel-soft) 72%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--kx-shadow) 10%, transparent);
  padding: 14px;
}

.claude-cache-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--kx-border) 76%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--kx-panel-soft) 70%, transparent);
  padding: 11px 12px;
}

.claude-cache-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.claude-cache-head svg {
  flex: 0 0 auto;
  color: var(--kx-readable-gold, var(--kx-primary));
}

.claude-cache-head strong {
  display: block;
  color: var(--kx-text-main);
  font-size: 0.78rem;
  font-weight: 600;
}

.claude-cache-head small,
.claude-cache-card p {
  margin: 0;
  color: color-mix(in srgb, var(--kx-text-muted) 82%, transparent);
  font-size: 0.64rem;
  line-height: 1.45;
}

.claude-cache-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.claude-cache-options button {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--kx-border) 82%, transparent);
  border-radius: 999px;
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-panel-bg) 72%, transparent);
  font-size: 0.68rem;
}

.claude-cache-options button.active {
  border-color: color-mix(in srgb, var(--kx-primary) 42%, transparent);
  color: var(--kx-readable-gold, var(--kx-primary));
  background: color-mix(in srgb, var(--kx-primary) 12%, transparent);
}

.journal-channel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.journal-channel-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--kx-primary) 26%, transparent);
  border-radius: 999px;
  color: var(--kx-readable-gold, var(--kx-primary));
  background: color-mix(in srgb, var(--kx-primary) 8%, transparent);
}

.journal-channel-glyph {
  display: block;
  width: 19px;
  height: 19px;
}

.journal-channel-head strong {
  display: block;
  color: var(--kx-text-main);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.journal-channel-head small {
  display: block;
  margin-top: 2px;
  color: var(--kx-text-muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.reasoning-settings-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.reasoning-toggle-row {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  min-width: 0;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--kx-border) 82%, transparent);
  border-radius: 14px;
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-panel) 70%, transparent);
  padding: 8px 10px;
  text-align: left;
}

.reasoning-toggle-row.active {
  border-color: color-mix(in srgb, var(--kx-primary) 42%, transparent);
  background: color-mix(in srgb, var(--kx-primary) 10%, var(--kx-panel) 76%);
}

.reasoning-toggle-row.disabled {
  cursor: help;
  opacity: 0.54;
}

.reasoning-toggle-dot {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--kx-primary) 34%, transparent);
  border-radius: 999px;
  color: var(--kx-readable-gold, var(--kx-primary));
  background: color-mix(in srgb, var(--kx-primary) 8%, transparent);
}

.reasoning-toggle-row strong {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.reasoning-toggle-row > span:last-child {
  min-width: 0;
}

.reasoning-toggle-row small {
  display: none;
}

.reasoning-toggle-row[data-hint]::after {
  position: absolute;
  z-index: 40;
  right: 8px;
  bottom: calc(100% + 7px);
  width: min(230px, 72vw);
  border: 1px solid color-mix(in srgb, var(--kx-border) 72%, transparent);
  border-radius: 12px;
  color: color-mix(in srgb, var(--kx-text-main) 82%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--kx-panel) 95%, white 4%), color-mix(in srgb, var(--kx-panel) 82%, transparent));
  box-shadow: 0 14px 34px rgba(20, 15, 30, 0.16);
  content: attr(data-hint);
  font-size: 0.68rem;
  line-height: 1.55;
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.reasoning-toggle-row[data-hint]:hover::after,
.reasoning-toggle-row[data-hint]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.reasoning-help-popover {
  position: relative;
  margin: -3px 0 12px;
  border: 1px solid color-mix(in srgb, var(--kx-border) 70%, transparent);
  border-radius: 15px;
  color: color-mix(in srgb, var(--kx-text-main) 84%, transparent);
  background:
    radial-gradient(circle at 9% 12%, color-mix(in srgb, var(--kx-primary) 11%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--kx-panel) 96%, white 3%), color-mix(in srgb, var(--kx-panel) 82%, transparent));
  box-shadow: 0 15px 36px rgba(20, 15, 30, 0.13);
  padding: 12px 38px 12px 38px;
}

.reasoning-help-popover::before {
  position: absolute;
  top: 11px;
  left: 14px;
  width: 15px;
  height: 15px;
  background: var(--kx-readable-gold, var(--kx-primary));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cline x1='2.5' y1='7' x2='11.5' y2='7' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cline x1='7' y1='0.5' x2='7' y2='13.5' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cpath d='M7 0.8 C7 4.2 9.0 6.5 10.8 7 C9.0 7.5 7 9.8 7 13.2 C7 9.8 5.0 7.5 3.2 7 C5.0 6.5 7 4.2 7 0.8 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cline x1='2.5' y1='7' x2='11.5' y2='7' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cline x1='7' y1='0.5' x2='7' y2='13.5' stroke='black' stroke-width='0.65' opacity='0.6'/%3E%3Cpath d='M7 0.8 C7 4.2 9.0 6.5 10.8 7 C9.0 7.5 7 9.8 7 13.2 C7 9.8 5.0 7.5 3.2 7 C5.0 6.5 7 4.2 7 0.8 Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
  opacity: 0.62;
}

.reasoning-help-popover > button {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  color: color-mix(in srgb, var(--kx-text-main) 55%, transparent);
  background: transparent;
  font-size: 1rem;
  line-height: 1;
}

.reasoning-help-popover > button:hover {
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-primary) 9%, transparent);
}

.reasoning-help-popover strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.76rem;
  font-weight: 600;
}

.reasoning-help-popover p {
  margin: 0;
  color: color-mix(in srgb, var(--kx-text-main) 67%, transparent);
  font-size: 0.7rem;
  line-height: 1.65;
}

.journal-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.journal-channel-grid label {
  display: grid;
  gap: 6px;
  color: var(--kx-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.journal-channel-grid input,
.journal-channel-grid select {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--kx-border) 90%, transparent);
  border-radius: 12px;
  color: var(--kx-text-main);
  background: color-mix(in srgb, var(--kx-panel) 88%, transparent);
  padding: 0 10px;
  outline: none;
}

.journal-channel-grid input:focus,
.journal-channel-grid select:focus {
  border-color: color-mix(in srgb, var(--kx-primary) 44%, var(--kx-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kx-primary) 10%, transparent);
}

.journal-model-field {
  grid-column: 1 / -1;
}

.journal-model-field > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.journal-model-field small {
  color: color-mix(in srgb, var(--kx-text-muted) 72%, transparent);
  font-size: 0.64rem;
}

.journal-model-presets {
  margin-top: 2px;
}

.journal-model-presets.provider-openrouter {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 760px) {
  .reasoning-settings-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .reasoning-toggle-row {
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 4px;
    min-height: 36px;
    border-radius: 11px;
    padding: 6px 5px;
  }

  .reasoning-toggle-dot {
    width: 16px;
    height: 16px;
  }

  .reasoning-toggle-row strong {
    font-size: 0.66rem;
  }

  .journal-channel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .reasoning-settings-card {
    gap: 4px;
  }

  .reasoning-toggle-row {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 3px;
    min-height: 34px;
    padding: 5px 4px;
  }

  .reasoning-toggle-dot {
    width: 14px;
    height: 14px;
  }

  .reasoning-toggle-row strong {
    font-size: 0.6rem;
  }
}

/* Provider/model density: give OpenRouter enough room, keep short providers compact. */
.settings-route-shell[data-theme] .provider-tabs,
.cinema-shell[data-theme] .provider-tabs {
  grid-template-columns: minmax(168px, 1.55fr) repeat(4, minmax(74px, 0.78fr)) !important;
  gap: 7px !important;
}

.settings-route-shell[data-theme] .provider-tabs button,
.cinema-shell[data-theme] .provider-tabs button {
  min-height: 30px !important;
  padding: 0 7px !important;
  font-size: 0.68rem !important;
}

.settings-route-shell[data-theme] .provider-tabs button:first-child,
.cinema-shell[data-theme] .provider-tabs button:first-child {
  padding: 0 11px !important;
  font-size: 0.66rem !important;
}

.model-preset-row.provider-openrouter:not(.journal-model-presets) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.model-preset-row.provider-openrouter:not(.journal-model-presets) button {
  min-height: 25px !important;
  padding: 0 6px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .settings-route-shell[data-theme] .provider-tabs,
  .cinema-shell[data-theme] .provider-tabs {
    grid-template-columns: minmax(158px, max-content) repeat(4, max-content) !important;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings-route-shell[data-theme] .provider-tabs::-webkit-scrollbar,
  .cinema-shell[data-theme] .provider-tabs::-webkit-scrollbar {
    display: none;
  }

  .model-preset-row.provider-openrouter:not(.journal-model-presets) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .model-preset-row.provider-openrouter:not(.journal-model-presets) button {
    min-height: 23px !important;
    padding: 0 3px !important;
    font-size: 0.52rem !important;
  }
}

/* Vector controls: active labels stay readable and technical actions use a
   compact capsule language across desktop and portrait layouts. */
.vector-route-shell .vector-compact-control.toggle.active > span {
  color: var(--vector-primary-text) !important;
}

.vector-route-shell .vector-index-actions button,
.vector-route-shell .vector-index-actions label.vector-clear-button,
.vector-route-shell .vector-test-row .vector-test-actions button {
  border-radius: 999px !important;
}

.vector-route-shell .vector-cache-turn-card.hit {
  --vector-cache-hit: var(--kx-readable-gold, var(--kx-primary));
  border-color: color-mix(in srgb, var(--vector-cache-hit) 24%, var(--kx-border)) !important;
  background: color-mix(in srgb, var(--vector-cache-hit) 5%, var(--kx-panel-soft) 95%) !important;
  box-shadow: none !important;
}

.vector-route-shell .vector-cache-turn-card.hit-low {
  border-color: color-mix(in srgb, var(--vector-cache-hit) 18%, var(--kx-border)) !important;
  background: color-mix(in srgb, var(--vector-cache-hit) 3%, var(--kx-panel-soft) 97%) !important;
}

.vector-route-shell .vector-cache-turn-card.hit-mid {
  border-color: color-mix(in srgb, var(--vector-cache-hit) 30%, var(--kx-border)) !important;
  background: color-mix(in srgb, var(--vector-cache-hit) 9%, var(--kx-panel-soft) 91%) !important;
}

.vector-route-shell .vector-cache-turn-card.hit-high {
  border-color: color-mix(in srgb, var(--vector-cache-hit) 54%, var(--kx-border)) !important;
  background: color-mix(in srgb, var(--vector-cache-hit) 24%, var(--kx-panel-soft) 76%) !important;
  box-shadow: none !important;
}

.vector-route-shell .vector-cache-turn-card.hit .vector-cache-card-head i {
  border-color: color-mix(in srgb, var(--vector-cache-hit) 42%, transparent);
  color: color-mix(in srgb, var(--vector-cache-hit) 82%, var(--kx-text-main));
  background: color-mix(in srgb, var(--vector-cache-hit) 13%, transparent);
}

.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-card-head i {
  color: color-mix(in srgb, var(--vector-cache-hit) 92%, var(--kx-text-main));
  background: color-mix(in srgb, var(--vector-cache-hit) 18%, transparent);
}

.vector-route-shell .vector-cache-turn-card.hit .vector-cache-token-strip div:nth-child(2),
.vector-route-shell .vector-cache-turn-card.hit .vector-cache-token-strip div:nth-child(3) {
  border-color: color-mix(in srgb, var(--vector-cache-hit) 26%, var(--kx-border));
  background: color-mix(in srgb, var(--vector-cache-hit) 8%, var(--kx-surface));
}

.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-token-strip div:nth-child(2),
.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-token-strip div:nth-child(3) {
  border-color: color-mix(in srgb, var(--vector-cache-hit) 36%, var(--kx-border));
  background: color-mix(in srgb, var(--vector-cache-hit) 13%, var(--kx-surface));
}

.vector-route-shell .vector-cache-turn-card.hit .vector-cache-token-strip div:nth-child(2) strong,
.vector-route-shell .vector-cache-turn-card.hit .vector-cache-token-strip div:nth-child(3) strong {
  color: color-mix(in srgb, var(--vector-cache-hit) 78%, var(--kx-text-main));
}

.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-token-strip div:nth-child(3) strong {
  color: color-mix(in srgb, var(--vector-cache-hit) 92%, var(--kx-text-main));
  font-size: 0.78rem;
}

.vector-route-shell .vector-cache-window-line {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 6%, transparent);
  padding: 3px 9px;
  color: color-mix(in srgb, var(--kx-text-main) 62%, transparent);
  font-size: 0.6rem;
  line-height: 1.25;
}

.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide {
  gap: 7px;
}

.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--kx-border) 72%, transparent);
  background: color-mix(in srgb, var(--kx-panel-soft) 88%, var(--kx-surface) 12%);
  box-shadow: none;
}

.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div::before {
  content: none;
}

.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div:nth-child(2),
.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div:nth-child(5) {
  border-color: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 30%, var(--kx-border));
  background: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 12%, var(--kx-panel-soft) 88%);
}

.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div:nth-child(3),
.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div:nth-child(6) {
  border-color: color-mix(in srgb, var(--kx-primary-soft, var(--kx-readable-gold, var(--kx-primary))) 34%, var(--kx-border));
  background: color-mix(in srgb, var(--kx-primary-soft, var(--kx-readable-gold, var(--kx-primary))) 13%, var(--kx-panel-soft) 87%);
}

.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div:nth-child(2) strong,
.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div:nth-child(5) strong {
  color: color-mix(in srgb, var(--kx-readable-gold, var(--kx-primary)) 86%, var(--kx-text-main));
}

.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div:nth-child(3) strong,
.vector-route-shell .vector-cache-window-line + .vector-stat-grid-wide > div:nth-child(6) strong {
  color: color-mix(in srgb, var(--kx-primary-soft, var(--kx-readable-gold, var(--kx-primary))) 82%, var(--kx-text-main));
}

.vector-route-shell .vector-cache-footnote {
  border-top: 1px solid color-mix(in srgb, var(--kx-border) 58%, transparent);
  padding-top: 7px;
  color: color-mix(in srgb, var(--kx-muted) 72%, transparent);
}

.vector-route-shell .vector-section-panel .vector-cache-turns {
  gap: 8px;
}

.vector-route-shell .vector-section-panel .vector-cache-turn-card {
  position: relative;
  gap: 7px;
  border-radius: 10px;
  padding: 8px 9px;
  box-shadow: none;
}

.vector-route-shell .vector-cache-turn-card.miss {
  border-color: color-mix(in srgb, var(--kx-border) 54%, transparent);
  background: color-mix(in srgb, var(--kx-panel-soft) 70%, transparent);
  opacity: 0.78;
}

.vector-route-shell .vector-cache-turn-card.hit-low {
  border-color: color-mix(in srgb, var(--vector-cache-hit) 18%, var(--kx-border)) !important;
  opacity: 0.88;
}

.vector-route-shell .vector-cache-turn-card.hit-mid {
  border-color: color-mix(in srgb, var(--vector-cache-hit) 30%, var(--kx-border)) !important;
  box-shadow: none !important;
}

.vector-route-shell .vector-cache-turn-card.hit-high::after {
  content: none;
}

.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-card-head,
.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-token-strip,
.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-debug-chips {
  position: relative;
  z-index: 1;
}

.vector-route-shell .vector-cache-turn-card.hit-mid .vector-cache-card-head i,
.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-card-head i {
  font-weight: 600;
}

.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-card-head i {
  min-width: 3.2em;
  text-align: center;
}

.vector-route-shell .vector-cache-turn-card.hit-high .vector-cache-token-strip div:nth-child(3) {
  transform: none;
}
