:root {
  --dm-canvas: #f4f7fb;
  --dm-canvas-alt: #edf5fd;
  --dm-surface: #ffffff;
  --dm-surface-strong: #ffffff;
  --dm-text: #182a3d;
  --dm-text-muted: #66788c;
  --dm-border: #dbe6f1;
  --dm-primary: #347fc4;
  --dm-primary-strong: #175d9c;
  --dm-on-primary: #ffffff;
  --dm-accent: #e9b949;
  --dm-success: #2f8f62;
  --dm-warning: #b56a18;
  --dm-danger: #c64242;
  --dm-focus: #126ab8;
  --dm-overlay: rgba(16, 36, 58, 0.46);
  --dm-shadow: rgba(28, 62, 94, 0.12);
  --dm-texture: rgba(52, 127, 196, 0.08);

  /* 兼容旧页面：颜色逐步迁移时仍由当前主题接管。 */
  --blue: var(--dm-primary);
  --blue-deep: var(--dm-primary-strong);
  --gold: var(--dm-accent);
  --bg: var(--dm-canvas);
  --surface: var(--dm-surface);
  --text: var(--dm-text);
  --muted: var(--dm-text-muted);
  --border: var(--dm-border);
  --danger: var(--dm-danger);
  --success: var(--dm-success);
  --warning: var(--dm-warning);
  --domi-control-height: 44px;
  --domi-radius-sm: 8px;
  --domi-radius-md: 12px;
  --domi-radius-lg: 18px;
  --domi-space-1: 4px;
  --domi-space-2: 8px;
  --domi-space-3: 12px;
  --domi-space-4: 16px;
  --domi-space-5: 24px;
}

html,
body,
#app {
  background-color: var(--dm-canvas);
  color: var(--dm-text);
}

body {
  transition: background-color 180ms ease, color 180ms ease;
}

html[data-domi-scene='immersive'] body {
  background-image:
    radial-gradient(circle at 10% 5%, var(--dm-texture) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 22%, var(--dm-texture) 0 3px, transparent 4px),
    linear-gradient(145deg, var(--dm-canvas), var(--dm-canvas-alt));
  background-size: 72px 72px, 108px 108px, 100% 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role='button'],
input,
select {
  min-height: var(--domi-control-height);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--dm-focus) 55%, transparent);
  outline-offset: 2px;
}

html[data-domi-motion='off'] *,
html[data-domi-motion='off'] *::before,
html[data-domi-motion='off'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.domi-surface {
  color: var(--dm-text);
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: var(--domi-radius-md);
  box-shadow: 0 8px 24px var(--dm-shadow);
}

.domi-primary-action {
  color: var(--dm-on-primary);
  background: var(--dm-primary);
  border-color: var(--dm-primary);
}

/* ══════ 咪咪乐园：角色化组件皮肤（不是换色） ══════ */
/* 背景爪印只负责氛围，不接收点击，也不改变任何业务布局。 */
html[data-domi-theme='mimi-playground'] body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='%23d95f74' fill-opacity='.075' transform='rotate(-18 66 66)'%3E%3Cellipse cx='53' cy='53' rx='6' ry='8'/%3E%3Cellipse cx='67' cy='47' rx='6' ry='8'/%3E%3Cellipse cx='81' cy='53' rx='6' ry='8'/%3E%3Cellipse cx='44' cy='66' rx='5' ry='7'/%3E%3Cpath d='M66 59c-12 0-19 10-16 19 2 7 10 10 16 6 7 4 15 1 17-6 3-9-5-19-17-19z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(145deg, var(--dm-canvas), var(--dm-canvas-alt));
  background-attachment: fixed;
  background-size: 132px 132px, 100% 100%;
}

/* 猫耳卡片由页面显式选择，避免所有信息卡都长成玩具。 */
.dm-mimi-card {
  position: relative;
}

html[data-domi-theme='mimi-playground'] .dm-mimi-card {
  border-color: color-mix(in srgb, var(--dm-primary) 28%, var(--dm-border));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--dm-primary) 14%, transparent);
}

html[data-domi-theme='mimi-playground'] .dm-mimi-card::before {
  content: '';
  position: absolute;
  top: -15px;
  right: 24px;
  width: 76px;
  height: 17px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 49%, var(--dm-surface) 50%) left bottom / 30px 17px no-repeat,
    linear-gradient(225deg, transparent 49%, var(--dm-surface) 50%) right bottom / 30px 17px no-repeat;
  filter: drop-shadow(0 -1px 0 color-mix(in srgb, var(--dm-primary) 28%, var(--dm-border)));
}

/* 关键主操作变成“爪垫按钮”：点击区仍保持原尺寸，避免主题影响操作肌肉记忆。 */
html[data-domi-theme='mimi-playground'] .dm-theme-paw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 22px 22px 16px 16px / 24px 24px 15px 15px !important;
  box-shadow:
    inset 0 -3px 0 color-mix(in srgb, var(--dm-primary-strong) 48%, transparent),
    0 6px 14px color-mix(in srgb, var(--dm-primary) 20%, transparent);
}

html[data-domi-theme='mimi-playground'] .dm-theme-paw-button::before {
  content: '';
  width: 20px;
  height: 18px;
  flex: 0 0 20px;
  background:
    radial-gradient(circle at 14% 31%, currentColor 0 2.4px, transparent 2.8px),
    radial-gradient(circle at 39% 16%, currentColor 0 2.6px, transparent 3px),
    radial-gradient(circle at 65% 16%, currentColor 0 2.6px, transparent 3px),
    radial-gradient(circle at 88% 31%, currentColor 0 2.4px, transparent 2.8px),
    radial-gradient(ellipse at 51% 72%, currentColor 0 6.4px, transparent 6.9px);
  opacity: .92;
}

html[data-domi-theme='mimi-playground'] .dm-theme-paw-button:active {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--dm-primary-strong) 42%, transparent);
}

/* 同屏已有活咪咪时，其他位置只使用这枚抽象爪印，不复制全身角色。 */
.dm-mimi-paw-mark {
  --dm-mark-color: var(--dm-primary);
  width: 42px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--dm-mark-color) 28%, transparent);
  border-radius: 52% 52% 44% 44% / 60% 60% 40% 40%;
  color: var(--dm-mark-color);
  background: color-mix(in srgb, var(--dm-mark-color) 10%, var(--dm-surface));
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--dm-mark-color) 10%, transparent);
}

.dm-mimi-paw-mark::before {
  content: '';
  width: 25px;
  height: 23px;
  background:
    radial-gradient(circle at 13% 31%, currentColor 0 3px, transparent 3.5px),
    radial-gradient(circle at 39% 15%, currentColor 0 3.2px, transparent 3.7px),
    radial-gradient(circle at 65% 15%, currentColor 0 3.2px, transparent 3.7px),
    radial-gradient(circle at 89% 31%, currentColor 0 3px, transparent 3.5px),
    radial-gradient(ellipse at 51% 73%, currentColor 0 7.5px, transparent 8px);
}