/* Donna identity v1. Shared by the protected app, local demo and sign-in shell. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #100d13;
  --bg2: #171119;
  --panel: #1b151d;
  --panel2: #241a24;
  --panel3: #30212e;
  --edge: #493440;
  --edge2: #745060;
  --text: #f9f0f2;
  --muted: #beaeb9;
  --muted2: #aa94a3;
  --purple: #e8adbb;
  --purple2: #9e3d59;
  --mint: #9bd6bd;
  --gold: #d8bd9e;
  --blue: #c8b4d9;
  --red: #f39aad;
  --wine: #8a314b;
  --soft: #3d2332;
  --button: #e8adbb;
  --button-text: #2b1722;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: var(--font);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f0f1;
  --bg2: #f0e5e9;
  --panel: #fffcfd;
  --panel2: #f0e5e9;
  --panel3: #e9d6de;
  --edge: #d5bdc6;
  --edge2: #a47b8b;
  --text: #30202b;
  --muted: #705965;
  --muted2: #705965;
  --purple: #842e4a;
  --purple2: #842e4a;
  --mint: #28634c;
  --gold: #79583e;
  --blue: #6d497e;
  --red: #a12e4a;
  --soft: #f1dce3;
  --button: #842e4a;
  --button-text: #fffcfd;
}
html[data-theme] body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}
html[data-theme] :is(.app-frame, .workarea) {
  background: var(--bg);
  color: var(--text);
}
html[data-theme] :is(button, input, select, textarea) {
  font: inherit;
  accent-color: var(--purple);
}
html[data-theme] :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
}
html[data-theme] a {
  color: var(--purple);
}
html[data-theme] :is(.sidebar, .context-rail, .topbar, .mobile-bottom) {
  background: var(--bg2);
  border-color: var(--edge);
  color: var(--text);
}
html[data-theme] :is(.brand-text small, .sidebar-section-label, .eyebrow) {
  color: var(--gold);
}
html[data-theme]
  :is(
    .panel,
    .metric-card,
    .agent-card,
    .connector-card,
    .note-card,
    .stat-feature,
    .release-row,
    .thread-row,
    .settings-card
  ) {
  background: var(--panel);
  border-color: var(--edge);
  color: var(--text);
}
html[data-theme] :is(.panel, .metric-card, .agent-card, .connector-card):hover {
  border-color: var(--edge2);
}
html[data-theme]
  :is(
    .nav-link,
    .subtle-pill,
    .secondary-btn,
    .choice,
    .admin-agent-item,
    .story-topic,
    .mood-button
  ) {
  background: var(--panel2);
  border-color: var(--edge);
  color: var(--text);
}
html[data-theme]
  :is(
    .nav-link.active,
    .subtle-pill.selected,
    .choice.active,
    .admin-agent-item.active,
    .agent-card.active,
    .story-topic.active,
    .mood-button.active
  ) {
  background: var(--soft);
  border-color: var(--purple);
  color: var(--text);
  box-shadow: none;
}
html[data-theme]
  :is(
    .nav-link:hover,
    .secondary-btn:hover,
    .subtle-pill:hover,
    .choice:hover
  ) {
  background: var(--soft);
  color: var(--text);
}
html[data-theme] :is(.primary-btn, .auth-button) {
  background: var(--button);
  color: var(--button-text);
  border: 1px solid var(--button);
  box-shadow: 0 8px 24px #8a314b25;
}
html[data-theme] :is(.primary-btn, .auth-button):hover {
  filter: brightness(1.08);
}
html[data-theme]
  :is(
    .primary-btn,
    .secondary-btn,
    .tiny-btn,
    .choice,
    .subtle-pill,
    .nav-link,
    .admin-agent-item
  ) {
  min-height: 42px;
}
html[data-theme] .control-pill {
  background: var(--panel2) !important;
  border-color: var(--edge) !important;
  color: var(--text) !important;
  min-height: 36px;
  min-width: 36px;
}
html[data-theme]
  :is(
    .muted,
    .screen-heading p,
    .panel-subtitle,
    .metric-foot,
    .metric-top,
    .task-info small,
    .integration-prompt,
    .agent-card p,
    .agent-card small,
    .agent-detail p,
    .story-topic span,
    .story-topic small,
    .rail-greeting p,
    .timeline-time,
    .timeline-item small,
    .source-health,
    .source-unavailable,
    .form-label,
    .form-hint,
    .page-note,
    .footer-quiet,
    .release-row p,
    .note-card p,
    .settings-description,
    .simple-table th,
    .simple-table td,
    .chat-footnote,
    .dialog-header small
  ) {
  color: var(--muted);
}
html[data-theme]
  :is(
    .section-row span,
    .text-action,
    .release-version,
    .rail-sign,
    .metric-icon
  ) {
  color: var(--purple) !important;
}
html[data-theme]
  :is(
    .form-control,
    .story-textarea,
    .chat-form textarea,
    .capture-form textarea,
    .choice,
    .settings-select
  ) {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--edge2);
}
html[data-theme]
  :is(
    .form-control,
    .story-textarea,
    .chat-form textarea,
    .capture-form textarea
  ):focus {
  border-color: var(--purple);
}
html[data-theme]
  :is(
    .notice,
    .summary-box,
    .persona-preview,
    .agent-detail,
    .connection-chip,
    .profile-chip,
    .code-chip
  ) {
  background: var(--panel2);
  border-color: var(--edge);
  color: var(--text);
}
html[data-theme] :is(.zero-pill, .status-tag, .nav-count) {
  background: var(--soft);
  color: var(--purple);
  border-color: var(--edge2);
}
html[data-theme] .status-tag.green {
  background: var(--panel2);
  color: var(--mint);
  border-color: var(--mint);
}
html[data-theme] .status-tag.blue {
  background: var(--panel2);
  color: var(--blue);
  border-color: var(--blue);
}
html[data-theme]
  :is(
    .task-check,
    .icon-circle,
    .mini-icon,
    .source-icon,
    .profile-avatar,
    .dialog-avatar
  ) {
  background: var(--soft);
  color: var(--purple);
  border-color: var(--edge);
}
html[data-theme]
  :is(
    .permission-row,
    .task-item,
    .checklist-item,
    .dialog-header,
    .chat-form,
    .simple-table td,
    .simple-table th
  ) {
  border-color: var(--edge);
}
html[data-theme] :is(.trait > div, .permission-row span, .big-panel-quote) {
  color: var(--text);
}
html[data-theme]
  :is(.home-hero, .admin-intro, .rail-greeting, .motto-panel, .moments-hero) {
  background:
    radial-gradient(ellipse at 90% 10%, #8a314b35, transparent 60%),
    var(--panel);
  border-color: var(--edge2);
  color: var(--text);
  box-shadow: 0 18px 60px #0002;
}
html[data-theme]
  :is(.home-hero p, .home-hero .eyebrow, .admin-intro p, .hero-principle) {
  color: var(--muted);
}
html[data-theme] :is(.home-hero:before, .home-hero:after) {
  background: none;
}
html[data-theme] .home-hero .eyebrow {
  color: var(--gold);
}
html[data-theme] .hero-text {
  max-width: 64%;
}
html[data-theme] .hero-orbit {
  right: 5%;
  width: 220px;
  height: 240px;
}
html[data-theme] .portrait-halo {
  width: 170px;
  height: 214px;
  border-radius: 90px 90px 65px 65px;
  border-color: #e8adbb66;
  background: #241a24;
  box-shadow: 0 0 60px #8a314b44;
  animation: none;
}
html[data-theme] .donna-avatar {
  object-position: 50% 22%;
  opacity: 1;
  filter: none;
}
html[data-theme] .admin-aura {
  width: 126px;
  height: 140px;
  min-width: 126px;
  border-radius: 70px 70px 48px 48px;
  border-color: #e8adbb66;
  box-shadow: 0 0 45px #8a314b33;
}
html[data-theme] .admin-aura img {
  object-position: 50% 21%;
}
html[data-theme] .orb-ring {
  border-color: #e8adbb66;
  box-shadow: 0 0 20px #8a314b22;
}
html[data-theme] .orb-particle {
  background: #d8bd9e;
  box-shadow: 0 0 13px #e8adbb;
}
html[data-theme] :is(.brand-mark, .donnavatar-small, .rail-orb) {
  background: radial-gradient(
    circle at 35% 25%,
    #f8d4d9,
    #9e3d59 44%,
    #301523 78%
  );
  color: #fff0e3;
  border-color: #d8bd9e66;
  box-shadow: 0 0 26px #8a314b50;
  animation: none;
}
html[data-theme] .brand-mark {
  border-radius: 50%;
  font-size: 25px;
}
html[data-theme] .rail-action {
  background: var(--soft);
  color: var(--purple);
  border-color: var(--edge2);
}
html[data-theme] .agent-orb.purple {
  background: radial-gradient(circle at 35% 30%, #f8d4d9, #9e3d59 50%, #301523);
  box-shadow: 0 0 25px #8a314b40;
}
html[data-theme] dialog {
  background: var(--panel);
  color: var(--text);
  border-color: var(--edge2);
}
html[data-theme] .chat-msg.assistant {
  background: var(--soft);
  color: var(--text);
}
html[data-theme] .chat-msg.user {
  background: var(--panel3);
  color: var(--text);
}
html[data-theme] .toast {
  background: var(--soft);
  border-color: var(--purple);
  color: var(--text);
}
html[data-theme] .mobile-bottom button {
  color: var(--muted);
  min-height: 44px;
}
html[data-theme] .mobile-bottom :is(.mobile-active, .active) {
  color: var(--purple);
  background: var(--soft);
  border-radius: 10px;
}
html[data-theme] .mobile-bottom .nav-link {
  white-space: normal;
}
html[data-theme] .notice {
  font-size: 12px;
  line-height: 1.7;
}
html[data-theme] .notice a {
  display: inline-block;
  margin: 4px 7px 4px 0;
}
html[data-theme] .notice button {
  margin: 4px 0;
}
html[data-mode="server"] #screen > h1 {
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.04em;
}
html[data-mode="server"] .admin-intro h1 {
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin: 12px 0;
}
html[data-mode="server"] .admin-layout {
  margin-top: 22px;
}
html[data-mode="server"] .trait {
  margin: 18px 0;
}
html[data-mode="server"] .trait input {
  width: 100%;
  margin-top: 10px;
}
html[data-mode="server"] .panel > h2 {
  margin-top: 32px;
  font-size: 19px;
}
html[data-mode="server"] .connector-card h2 {
  font-size: 20px;
  text-transform: capitalize;
}
html[data-mode="server"] .connector-card p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}
html[data-mode="server"] .connector-card strong {
  color: var(--text);
}
.donna-emblem {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.donna-emblem .donna-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 33% 25%,
    #f8d4d9,
    #9e3d59 42%,
    #321322 78%
  );
  box-shadow: 0 0 24px #9e3d5966;
  animation: donna-breathe 5.5s ease-in-out infinite;
}
.donna-emblem .donna-core:after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff0e3;
  font-size: 28px;
  text-shadow: 0 0 15px #f8d4d9;
}
.donna-emblem .donna-orbit {
  position: absolute;
  inset: 4%;
  border: 1px solid #d8bd9e88;
  border-radius: 50%;
  transform: rotate(-25deg) scaleY(0.66);
  animation: donna-orbit 22s linear infinite;
}
.donna-emblem .donna-orbit:nth-child(2) {
  inset: 11%;
  border-color: #e8adbb77;
  transform: rotate(55deg) scaleY(0.75);
  animation-direction: reverse;
  animation-duration: 16s;
}
.donna-emblem .donna-orbit:nth-child(3) {
  inset: 0;
  border-color: #e8adbb33;
  animation-duration: 30s;
}
@keyframes donna-breathe {
  50% {
    transform: scale(1.07);
    box-shadow: 0 0 36px #9e3d5988;
  }
}
@keyframes donna-orbit {
  to {
    rotate: 360deg;
  }
}
html[data-cinematic="minimal"] *,
html[data-cinematic="minimal"] *:before,
html[data-cinematic="minimal"] *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 750px) {
  html[data-theme] .home-hero {
    min-height: 340px;
    align-items: flex-start;
    padding: 24px 20px;
  }
  html[data-theme] .hero-text {
    max-width: 100%;
    position: relative;
  }
  html[data-theme] .hero-text h2,
  html[data-theme] .hero-text > p {
    max-width: 66%;
  }
  html[data-theme] .hero-principle {
    max-width: 100%;
    font-size: 11px;
    margin: 18px 0;
  }
  html[data-theme] .hero-buttons {
    max-width: 100%;
  }
  html[data-theme] .hero-orbit {
    right: -5px;
    top: 30px;
    transform: scale(0.65);
    transform-origin: top right;
    opacity: 0.9;
  }
  html[data-theme] .admin-intro {
    padding: 22px 18px;
    gap: 14px;
  }
  html[data-theme] .admin-aura {
    width: 78px;
    height: 102px;
    min-width: 78px;
  }
  html[data-theme] .topbar-right {
    gap: 4px;
  }
  html[data-theme] .topbar .eyebrow {
    font-size: 8px;
  }
  html[data-theme] .topbar {
    padding-inline: 10px;
    gap: 4px;
  }
  html[data-theme] .control-pill {
    min-width: 30px;
    padding: 4px !important;
  }
  html[data-theme] .live-indicator {
    font-size: 7px;
  }
  html[data-mode="server"] .admin-intro h1 {
    font-size: 25px;
  }
}
/* Public sign-in includes only Donna branding; owner data remains behind login. */
.auth-page {
  margin: 0;
  font: 16px/1.65 var(--font);
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 80% 0, #8a314b20, transparent 52%), var(--bg) !important;
}
.auth-page * {
  box-sizing: border-box;
}
.auth-wrap {
  max-width: 1120px;
  margin: auto;
  padding: 30px 30px 50px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
  color: var(--text);
  text-decoration: none;
  width: fit-content;
}
.auth-brand strong {
  font-size: 23px;
  letter-spacing: 0.22em;
  display: block;
  font-weight: 600;
}
.auth-brand small {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  display: block;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
  border: 1px solid var(--edge);
  border-radius: 30px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 22px 85px #0003;
}
.auth-card {
  padding: clamp(26px, 4vw, 54px);
  align-self: center;
  min-width: 0;
}
.auth-card h1 {
  font-size: clamp(29px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.14;
  margin: 18px 0 22px;
}
.auth-card p {
  font-size: 15px;
  color: var(--muted);
  margin: 18px 0;
}
.auth-card strong {
  color: var(--text);
  overflow-wrap: anywhere;
}
.auth-card label {
  display: block;
  margin: 24px 0;
  color: var(--text);
}
.auth-card input {
  background: var(--panel2);
  border: 1px solid var(--edge2);
  color: var(--text);
  padding: 12px;
  border-radius: 10px;
  width: 85px;
  margin: 7px 4px;
}
.auth-card button,
.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 12px;
  font-weight: 650;
  cursor: pointer;
  min-height: 48px;
  text-decoration: none;
}
.auth-card button {
  background: var(--button);
  color: var(--button-text);
  border: 1px solid var(--button);
}
.auth-card #logout {
  background: transparent;
  color: var(--muted);
  border-color: var(--edge2);
}
.auth-card .auth-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
}
.auth-card #result {
  color: var(--purple);
}
.auth-portrait {
  position: relative;
  min-height: 540px;
  background: #171119;
  overflow: hidden;
}
.auth-portrait img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: 52% 25%;
}
.auth-portrait:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #100d13 0, transparent 60%);
}
.auth-caption {
  position: absolute;
  z-index: 1;
  bottom: 32px;
  left: 30px;
  right: 30px;
  color: #f9f0f2;
}
.auth-caption strong {
  font-size: 25px;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.auth-caption p {
  font-size: 13px;
  line-height: 1.7;
  color: #d8bd9e;
  max-width: 260px;
}
.auth-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 11px;
}
.motion-control {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 9px;
  color: var(--muted);
  padding: 9px 12px;
  cursor: pointer;
  min-height: 38px;
}
@media (max-width: 680px) {
  .auth-wrap {
    padding: 22px 18px 30px;
  }
  .auth-brand {
    margin-bottom: 24px;
  }
  .auth-layout {
    grid-template-columns: 1fr;
    border-radius: 23px;
  }
  .auth-card {
    padding: 28px 24px;
  }
  .auth-card h1 {
    font-size: 32px;
  }
  .auth-portrait {
    min-height: 230px;
    order: -1;
  }
  .auth-portrait img {
    object-position: 50% 26%;
  }
  .auth-portrait:after {
    background: linear-gradient(90deg, #100d13dd, transparent 80%);
  }
  .auth-caption {
    bottom: 22px;
    left: 24px;
    max-width: 44%;
  }
  .auth-caption strong {
    font-size: 19px;
  }
  .auth-caption p {
    font-size: 11px;
  }
  .auth-footer {
    align-items: flex-start;
  }
  .auth-card label {
    font-size: 14px;
  }
}