:root {
  --persona-canvas: #eef4f0;
  --persona-canvas-strong: #e7efea;
  --persona-surface: #ffffff;
  --persona-surface-soft: #f7faf8;
  --persona-ink: #193229;
  --persona-muted: #60766b;
  --persona-border: #d2dfd7;
  --persona-border-strong: #b9cec1;
  --persona-brand: #1f6a46;
  --persona-brand-strong: #174a32;
  --persona-brand-soft: #e5f2ea;
  --persona-accent: #a66a18;
  --persona-accent-soft: #fff1d8;
  --persona-info: #315f78;
  --persona-info-soft: #e8f1f5;
  --persona-danger: #a13e3b;
  --persona-danger-soft: #fbe9e7;
  --persona-radius: 8px;
  --persona-radius-sm: 5px;
  --persona-shadow: 0 8px 24px rgba(26, 54, 41, 0.07);
  --persona-shadow-soft: 0 2px 8px rgba(31, 53, 41, 0.045);
  --persona-page-max: 1320px;
  --persona-control-height: 36px;
  --persona-touch-height: 44px;
  --persona-font: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --persona-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

body[data-persona-ui] {
  --bg: var(--persona-canvas);
  --bg-strong: var(--persona-canvas-strong);
  --paper: var(--persona-canvas);
  --panel: var(--persona-surface);
  --surface: var(--persona-surface);
  --panel-soft: var(--persona-surface-soft);
  --ink: var(--persona-ink);
  --text: var(--persona-ink);
  --muted: var(--persona-muted);
  --sub: var(--persona-muted);
  --line: var(--persona-border);
  --line-strong: var(--persona-border-strong);
  --green: var(--persona-brand);
  --brand: var(--persona-brand);
  --primary: var(--persona-brand);
  --accent: var(--persona-brand);
  --primary-strong: var(--persona-brand-strong);
  --green-soft: var(--persona-brand-soft);
  --accent-soft: var(--persona-brand-soft);
  --amber: var(--persona-accent);
  --warn: var(--persona-accent);
  --amber-soft: var(--persona-accent-soft);
  --blue: var(--persona-info);
  --blue-soft: var(--persona-info-soft);
  --red: var(--persona-danger);
  --err: var(--persona-danger);
  --danger: var(--persona-danger);
  --red-soft: var(--persona-danger-soft);
  --radius: var(--persona-radius);
  --shadow: var(--persona-shadow);
  --sans: var(--persona-font);
  --mono: var(--persona-mono);
  --btn-radius: 6px;
  --btn-border: var(--persona-border-strong);
  --btn-bg: var(--persona-surface);
  --btn-text: var(--persona-brand-strong);
  --btn-hover-border: #91ad9d;
  --btn-hover-bg: var(--persona-brand-soft);
  --btn-primary-border: var(--persona-brand);
  --btn-primary-bg: var(--persona-brand);
  --btn-primary-text: #ffffff;
  --btn-primary-hover-bg: var(--persona-brand-strong);
  margin: 0;
  color: var(--persona-ink);
  background: var(--persona-canvas);
  font-family: var(--persona-font);
  letter-spacing: 0;
}

body[data-persona-ui] :where(button, input, select, textarea) {
  font-family: inherit;
  letter-spacing: 0;
}

body[data-persona-ui] :where(button, a, input, select, textarea) {
  touch-action: manipulation;
}

body[data-persona-ui] :where(input, select, textarea) {
  border-color: var(--persona-border-strong);
  border-radius: var(--persona-radius-sm);
  background: var(--persona-surface);
  color: var(--persona-ink);
}

body[data-persona-ui] :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid rgba(31, 106, 70, 0.36);
  outline-offset: 2px;
}

body[data-persona-ui] [role="dialog"] {
  overscroll-behavior: contain;
}

body[data-persona-ui] .btn.icon-only.btn-ghost:not(.icon-with-text) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body[data-persona-ui] .btn.icon-only.btn-ghost:not(.icon-with-text):hover {
  border-color: transparent;
  background: var(--persona-brand-soft);
  transform: none;
}

body[data-persona-ui] :where(
  .top,
  .card,
  .panel,
  .session-top,
  .session-panel,
  .session-summary-card,
  .blocked-top,
  .blocked-panel,
  .workspace,
  .report-head
) {
  border-color: var(--persona-border);
  border-radius: var(--persona-radius);
  box-shadow: var(--persona-shadow);
}

body[data-persona-ui] :where(
  .stat-card,
  .guide-card,
  .example-card,
  .runtime-card,
  .explain-card,
  .io-card,
  .summary-item
) {
  border-color: var(--persona-border);
  border-radius: var(--persona-radius);
  box-shadow: none;
}

body[data-persona-ui] :where(h1, h2, h3, .title) {
  color: var(--persona-ink);
  letter-spacing: 0;
  text-wrap: balance;
}

body[data-persona-ui] :where(
  .session-title,
  .blocked-title,
  .title-wrap h1,
  .report-title h1,
  .head .title
) {
  font-size: 24px;
  font-weight: 750;
  line-height: 1.15;
}

body[data-persona-ui] :where(
  .session-subtitle,
  .blocked-subtitle,
  .title-wrap p,
  .head .sub
) {
  color: var(--persona-muted);
  font-size: 12px;
}

body[data-persona-ui="knowledge"] .topbar,
body[data-persona-ui="group-operations"] .topbar,
body[data-persona-ui="chain"] .head,
body[data-persona-ui="trace"] .head {
  padding: 14px 16px;
  border: 1px solid var(--persona-border);
  border-radius: var(--persona-radius);
  background: var(--persona-surface);
  box-shadow: var(--persona-shadow);
}

body[data-persona-ui="group-operations"] .report-head {
  color: #f4fbf6;
  background: var(--persona-brand-strong);
}

body[data-persona-ui="group-operations"] .report-head h1 {
  color: #ffffff;
  font-size: 24px;
}

body[data-persona-ui="group-operations"] :where(.range-preset, .icon-button, .primary-button, .group-pagination button) {
  border-radius: var(--persona-radius-sm);
}

body[data-persona-ui="knowledge"] .overview {
  background: var(--persona-surface-soft);
}

body[data-persona-ui="knowledge"] :where(.overview-kicker, .persona-secondary-nav .btn[aria-current="page"]),
body[data-persona-ui="admin"] .persona-secondary-nav .btn[aria-current="page"] {
  border-color: var(--persona-border-strong);
  background: var(--persona-brand-soft);
  color: var(--persona-brand-strong);
}

body[data-persona-ui="account-sessions"] .session-kicker,
body[data-persona-ui="group-operations"] :where(.brand, .back-link),
body[data-persona-ui="chain"] a,
body[data-persona-ui="trace"] a {
  color: var(--persona-brand);
}

body[data-persona-ui="workspace"] :where(.top-right .btn, .top-right .auth-panel) {
  border-color: var(--persona-border);
  background: var(--persona-surface);
  box-shadow: none;
}

body[data-persona-ui="workspace"] :where(.top, .panel) {
  box-shadow: 0 2px 8px rgba(31, 53, 41, 0.045);
}

body[data-persona-ui="workspace"] :where(.top-right .auth-panel button, .top-right .auth-panel a) {
  border-color: var(--persona-border);
  background: var(--persona-surface-soft);
  color: var(--persona-brand-strong);
}

body[data-persona-ui] .debug-brand {
  display: inline-flex;
  margin-bottom: 3px;
  color: var(--persona-brand);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

body[data-persona-ui="chain"] .wrap,
body[data-persona-ui="trace"] .wrap {
  max-width: var(--persona-page-max);
}

body[data-persona-ui="chain"] :where(.card, .io-card, .summary-item),
body[data-persona-ui="trace"] .card {
  background: var(--persona-surface);
}

body[data-persona-ui="chain"] :where(.block.mono, .log-entry .block.mono),
body[data-persona-ui="trace"] .block.mono {
  border-color: #27453a;
  background: #14271f;
  color: #e7f2ec;
}

body[data-persona-ui="chain"] .section-title::before,
body[data-persona-ui="trace"] .section-title::before {
  background: var(--persona-brand);
}

body[data-persona-ui] :where(.page, .session-page, .blocked-page) {
  max-width: var(--persona-page-max);
}

body[data-persona-ui] :where(.persona-secondary-nav, .session-top-actions) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-persona-ui] :where(.btn, button, input, select, textarea) {
  min-height: var(--persona-control-height);
}

body[data-persona-ui="chain"],
body[data-persona-ui="trace"] {
  background: var(--persona-canvas);
}

body[data-persona-ui="chain"] :where(.card, .io-card, .summary-item, .block, .table-wrap, .log-entry),
body[data-persona-ui="trace"] :where(.card, .block) {
  border-color: var(--persona-border);
  border-radius: var(--persona-radius);
  box-shadow: var(--persona-shadow-soft);
}

body[data-persona-ui="chain"] .section-title,
body[data-persona-ui="trace"] .section-title {
  color: var(--persona-brand-strong);
  letter-spacing: 0;
  text-transform: none;
}

body[data-persona-ui="knowledge"] :where(.panel, .stat-card, .guide-card, .example-card, .runtime-card, .explain-card),
body[data-persona-ui="account-sessions"] :where(.session-top, .session-panel, .session-summary-card),
body[data-persona-ui="admin"] :where(.blocked-top, .blocked-panel) {
  border-radius: var(--persona-radius);
  box-shadow: var(--persona-shadow-soft);
}

@media (max-width: 760px) {
  body[data-persona-ui] :where(.btn, button, input, select, textarea, [role="button"], [role="tab"]) {
    min-height: var(--persona-touch-height) !important;
  }

  body[data-persona-ui] :where(.icon-only, .icon-button) {
    min-width: var(--persona-touch-height) !important;
  }

  body[data-persona-ui] .btn-compact {
    min-width: var(--persona-touch-height) !important;
  }

  body[data-persona-ui] :where(
    .persona-secondary-nav a,
    .brand,
    .back-link,
    .debug-brand,
    .mobile-status-link,
    .foot a
  ) {
    min-height: var(--persona-touch-height) !important;
    display: inline-flex;
    align-items: center;
  }

  body[data-persona-ui] :where(.persona-secondary-nav, .session-top-actions) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  body[data-persona-ui] :where(.persona-secondary-nav, .session-top-actions) .btn {
    width: 100%;
    justify-content: center;
  }

  body[data-persona-ui] :where(.page, .session-page, .blocked-page, .wrap) {
    width: calc(100% - 12px);
    margin: 6px auto 18px;
    padding-right: 0;
    padding-left: 0;
  }
}

body[data-persona-ui] :where(table th, .table-head, .response-chart-head) {
  color: var(--persona-muted);
  background: #f3f7f4;
}

body[data-persona-ui] :where(table td, table th) {
  border-color: var(--persona-border);
}

body[data-persona-ui="login"] .card {
  border: 1px solid var(--persona-border);
  background: var(--persona-surface);
}

body[data-persona-ui="login"] .card h1 {
  font-size: 26px;
  font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
  body[data-persona-ui] *,
  body[data-persona-ui] *::before,
  body[data-persona-ui] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}