/**
 * ============================================================
 *  os.css - iOS SpringBoard system shell
 * ============================================================
 *  Focus:
 *    1. Explicit pt-based layout tokens
 *    2. Native-like 4x6 SpringBoard grid
 *    3. SVG-mask squircle icons instead of border-radius
 *    4. Floating glass Dock and fixed home indicator
 *    5. Full-screen app viewport that can animate from icon origin
 * ============================================================
 */

:root {
  --vvw: 100vw;
  --vvh: 100lvh;

  --safe-top-env: env(safe-area-inset-top, 0px);
  --safe-bottom-env: env(safe-area-inset-bottom, 0px);
  --safe-left-env: env(safe-area-inset-left, 0px);
  --safe-right-env: env(safe-area-inset-right, 0px);

  --native-safe-top: 0px;
  --native-safe-bottom: 0px;
  --native-safe-left: 0px;
  --native-safe-right: 0px;

  --safe-top: max(var(--safe-top-env), var(--native-safe-top));
  --safe-bottom: max(var(--safe-bottom-env), var(--native-safe-bottom));
  --safe-left: max(var(--safe-left-env), var(--native-safe-left));
  --safe-right: max(var(--safe-right-env), var(--native-safe-right));

  --safe-area-top: var(--safe-top);
  --safe-area-bottom: var(--safe-bottom);
  --safe-area-left: var(--safe-left);
  --safe-area-right: var(--safe-right);
  --springboard-top-safe-reserve: max(var(--safe-top), calc(52 * var(--pt)));

  --header-base-height: 44px;
  --header-total-height: calc(var(--header-base-height) + var(--safe-top));
  --total-header-height: var(--header-total-height);

  --bottom-bar-base-height: 56px;
  --bottom-bar-total-height: calc(var(--bottom-bar-base-height) + var(--safe-bottom));
  --total-bottom-bar-height: var(--bottom-bar-total-height);

  --device-width-pt: 390;
  --device-height-pt: 844;
  --ios-scale: 1;
  --pt: calc(var(--ios-scale) * 1px);

  --color-primary: #0a84ff;
  --color-primary-light: #64d2ff;
  --color-text: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);

  --color-cyan-fluid: #a8f0e3;
  --color-peach-fluid: #ffd1c4;
  --color-violet-fluid: #e2c2f6;
  --color-sky-blue-fluid: #b5d8f6;

  --bg-gradient-start: #08111f;
  --bg-gradient-mid: #132340;
  --bg-gradient-end: #27436a;

  --glass-bg: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.4);
  --glass-blur: calc(28 * var(--pt));

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --springboard-side-margin: calc(20 * var(--pt));
  --springboard-top-offset: calc(var(--springboard-top-safe-reserve) + (12 * var(--pt)));
  --springboard-row-height: calc(80 * var(--pt));
  --springboard-row-gap: calc(22 * var(--pt));
  --springboard-label-reserve: 0px;
  /* Keep pages contiguous while swiping to avoid exposing a hard gutter between pages. */
  --springboard-page-gap: 0px;

  --icon-size: calc(64 * var(--pt));
  --icon-label-gap: calc(6 * var(--pt));
  --icon-label-size: calc(12 * var(--pt));
  --icon-label-line-height: calc(18 * var(--pt));
  --icon-hit-width: calc(78 * var(--pt));
  --icon-corner-radius-px: calc(18 * var(--pt));
  --edit-hud-top: calc(var(--springboard-top-safe-reserve) + (8 * var(--pt)));
  --edit-hud-right: calc(14 * var(--pt));

  --dock-height: calc(92 * var(--pt));
  --dock-horizontal-inset: calc(17 * var(--pt));
  --dock-bottom-offset: calc(8 * var(--pt));
  --dock-padding-inline: calc(16 * var(--pt));
  --dock-padding-block: calc(10 * var(--pt));
  --dock-radius: calc(30 * var(--pt));
  --springboard-page-indicator-bottom: calc(var(--dock-bottom-offset) + var(--dock-height) + (18 * var(--pt)));

  --home-indicator-bottom: calc(6 * var(--pt));
  --home-indicator-width: calc(138 * var(--pt));
  --home-indicator-height: calc(5 * var(--pt));

  --desktop-depth-scale: 1;
  --desktop-scrim-opacity: 0;
  --os-app-transition-duration: 420ms;
  --os-app-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --os-app-fade-duration: 300ms;
  --os-desktop-transition-duration: 360ms;
  --os-desktop-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --app-opacity: 0;
  --app-scale: 1;
  --app-translate-x: 0px;
  --app-translate-y: 0px;
  --app-clip-top: 0px;
  --app-clip-right: 0px;
  --app-clip-bottom: 0px;
  --app-clip-left: 0px;
  --app-radius: 0px;
  --app-content-opacity: 1;
  --app-shadow-opacity: 0;
  --app-depth-scale: 1;
  --app-depth-translate-y: 0px;
  --app-depth-brightness: 1;

  --ios-squircle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='30' ry='30' fill='black'/%3E%3C/svg%3E");
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100lvh;
  min-height: 100lvh;
  overflow: hidden;
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
  color: var(--color-text);
  background: linear-gradient(180deg, #dfe6f4 0%, #cad5e8 46%, #b2c4dc 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

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

#os-root {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100lvh;
  min-height: 100lvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: transparent;
  isolation: isolate;
}

#springboard-wallpaper,
#desktop-scrim {
  position: fixed;
  inset: -2px;
  pointer-events: none;
}

#springboard-wallpaper {
  z-index: 0;
  background: linear-gradient(180deg, #dfe6f4 0%, #cad5e8 46%, #b2c4dc 100%);
  transform: none;
}

.springboard-wallpaper__default,
.springboard-wallpaper__image {
  position: absolute;
  inset: 0;
  transition: opacity 220ms ease;
}

.springboard-wallpaper__default {
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.34) 18%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 82% 12%, rgba(255, 244, 233, 0.84) 0%, rgba(247, 219, 196, 0.24) 20%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #edf1f9 0%, #d6dfef 34%, #c1d1e5 70%, #a5bed9 100%);
}

.springboard-wallpaper__default::before,
.springboard-wallpaper__default::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
  filter: blur(0px);
  opacity: 0.95;
}

.springboard-wallpaper__default::before {
  width: 52vw;
  height: 52vw;
  max-width: 420px;
  max-height: 420px;
  left: -8vw;
  bottom: 9vh;
  background: radial-gradient(circle at 32% 32%, rgba(206, 224, 250, 0.98) 0%, rgba(185, 205, 233, 0.84) 45%, rgba(176, 196, 222, 0) 76%);
}

.springboard-wallpaper__default::after {
  width: 58vw;
  height: 58vw;
  max-width: 460px;
  max-height: 460px;
  right: -10vw;
  top: 18vh;
  background: radial-gradient(circle at 50% 50%, rgba(199, 214, 235, 0.92) 0%, rgba(176, 197, 224, 0.82) 44%, rgba(176, 197, 224, 0) 78%);
}

.springboard-wallpaper__default.is-hidden {
  opacity: 0;
}

.springboard-wallpaper__image {
  opacity: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.springboard-wallpaper__image-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 220ms ease;
}

.springboard-wallpaper__image.is-visible {
  opacity: 1;
}

#desktop-scrim {
  background: linear-gradient(180deg, rgba(3, 7, 18, 0.08) 0%, rgba(5, 9, 20, 0.48) 100%);
  opacity: var(--desktop-scrim-opacity);
  transition: opacity var(--os-desktop-transition-duration) linear;
  will-change: opacity;
}

#desktop {
  position: relative;
  width: 100%;
  height: 100lvh;
  min-height: 100lvh;
  z-index: 1;
  transform: scale(var(--desktop-depth-scale));
  transform-origin: center center;
  transition: transform var(--os-desktop-transition-duration) var(--os-desktop-transition-easing);
  will-change: transform;
}

#desktop-shell {
  position: relative;
  width: min(calc(100% - var(--safe-left) - var(--safe-right)), calc(var(--device-width-pt) * var(--pt)));
  height: 100%;
  padding-top: 0;
  margin: 0 auto;
}

#desktop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--springboard-top-safe-reserve);
  pointer-events: none;
  z-index: 2;
}

#springboard-edit-layer {
  position: absolute;
  top: var(--springboard-top-offset);
  left: 0;
  width: 100%;
  padding-inline: var(--springboard-side-margin);
  box-sizing: border-box;
  height: calc((6 * var(--springboard-row-height)) + (5 * var(--springboard-row-gap)));
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transition: opacity 180ms ease;
}

#desktop-drag-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

#desktop-edit-hud {
  position: absolute;
  bottom: calc(var(--dock-bottom-offset) + var(--dock-height) + (12 * var(--pt)));
  left: var(--springboard-side-margin);
  right: var(--springboard-side-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--pt));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  transform: translateY(calc(12 * var(--pt)));
  pointer-events: none;
  z-index: 5;
  transition: opacity 180ms ease, transform 220ms ease;
}

#desktop-edit-done,
#desktop-edit-widgets {
  border: 0;
  min-width: calc(54 * var(--pt));
  padding: calc(9 * var(--pt)) calc(16 * var(--pt));
  border-radius: 999px;
  background: rgba(108, 129, 161, 0.32);
  color: #ffffff;
  font-size: calc(13 * var(--pt));
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
    0 calc(10 * var(--pt)) calc(22 * var(--pt)) rgba(6, 12, 26, 0.18),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.14) inset;
  backdrop-filter: blur(calc(12 * var(--pt))) saturate(1.18);
  -webkit-backdrop-filter: blur(calc(12 * var(--pt))) saturate(1.18);
  transition: background-color 140ms ease, transform 140ms ease, opacity 140ms ease;
}

#desktop-edit-done:active,
#desktop-edit-widgets:active {
  transform: scale(0.97);
  background: rgba(126, 147, 180, 0.42);
}

#desktop-edit-widgets[hidden] {
  display: none;
}

#os-root.is-edit-mode #springboard-edit-layer {
  opacity: 1;
  pointer-events: none;
}

#os-root.is-edit-mode #desktop-edit-hud {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#springboard-grid {
  position: absolute;
  top: var(--springboard-top-offset);
  left: 0;
  width: 100%;
  height: calc((6 * var(--springboard-row-height)) + (5 * var(--springboard-row-gap)) + var(--springboard-label-reserve));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
  z-index: 2;
}

#springboard-grid::-webkit-scrollbar {
  display: none;
}

.springboard-pages {
  display: flex;
  width: 100%;
  height: calc(100% - var(--springboard-label-reserve));
  gap: var(--springboard-page-gap);
}

.springboard-page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  padding-inline: var(--springboard-side-margin);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, var(--springboard-row-height));
  row-gap: var(--springboard-row-gap);
  position: relative;
  scroll-snap-align: start;
}

.spring-icon {
  grid-column: var(--grid-column, auto);
  grid-row: var(--grid-row, auto);
  position: relative;
  z-index: 1;
  width: var(--icon-hit-width);
  justify-self: center;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--icon-label-gap);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 140ms ease, opacity 140ms ease, filter 140ms ease;
}

.spring-icon:active {
  transform: scale(0.93);
  opacity: 0.82;
}

.spring-icon__tile {
  width: var(--icon-size);
  height: var(--icon-size);
  position: relative;
  flex: 0 0 auto;
}

.spring-icon__shape {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--icon-corner-radius-px);
  box-shadow:
    0 calc(12 * var(--pt)) calc(24 * var(--pt)) rgba(2, 6, 20, 0.28),
    0 calc(1 * var(--pt)) calc(1.5 * var(--pt)) rgba(255, 255, 255, 0.22) inset,
    0 calc(-1 * var(--pt)) calc(1.5 * var(--pt)) rgba(7, 17, 34, 0.2) inset;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .spring-icon__shape {
    border-radius: 0;
    -webkit-mask-image: var(--ios-squircle-mask);
    mask-image: var(--ios-squircle-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.spring-icon__shape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 38%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
}

.spring-icon__art {
  width: 100%;
  height: 100%;
  display: block;
}

.spring-icon__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.spring-icon__tile--quest {
  background: transparent;
}

.spring-icon__quest-glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "Lora", "Noto Serif SC", serif;
  font-size: calc(32 * var(--pt));
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #21402e;
  text-shadow: 0 calc(1 * var(--pt)) calc(3 * var(--pt)) rgba(255, 255, 255, 0.26);
}

.spring-icon__label {
  width: 100%;
  font-size: var(--icon-label-size);
  line-height: var(--icon-label-line-height);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 calc(1 * var(--pt)) calc(3 * var(--pt)) rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  min-height: var(--icon-label-line-height);
  padding-top: calc(1 * var(--pt));
  padding-inline: calc(2 * var(--pt));
  overflow: hidden;
  text-overflow: ellipsis;
}

.spring-widget {
  grid-column: var(--grid-column, auto) / span var(--grid-column-span, 1);
  grid-row: var(--grid-row, auto) / span var(--grid-row-span, 1);
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 160ms ease;
}

.spring-widget__content {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.spring-widget__content-scale {
  position: absolute;
  inset: 0;
  transform: scale(var(--widget-content-scale, 0.93));
  transform-origin: center center;
}

.spring-widget__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(26 * var(--pt));
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.22), transparent 32%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
    rgba(15, 24, 42, 0.56);
  border: calc(0.5 * var(--pt)) solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 calc(18 * var(--pt)) calc(36 * var(--pt)) rgba(5, 10, 22, 0.24),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.1) inset;
  backdrop-filter: blur(calc(20 * var(--pt))) saturate(1.28);
  -webkit-backdrop-filter: blur(calc(20 * var(--pt))) saturate(1.28);
}

.spring-widget__surface[data-accent="aurora"] {
  background:
    radial-gradient(circle at 20% 24%, rgba(255, 196, 128, 0.34), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(113, 177, 255, 0.24), transparent 34%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
    rgba(19, 31, 56, 0.6);
}

.spring-widget__surface[data-accent="pearl"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.28), transparent 26%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
    rgba(22, 30, 46, 0.58);
}

.spring-widget__surface[data-accent="candy"] {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 167, 168, 0.24), transparent 26%),
    radial-gradient(circle at 84% 26%, rgba(169, 130, 255, 0.24), transparent 34%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)),
    rgba(34, 25, 58, 0.62);
}

.spring-widget__surface[data-accent="glass"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(155, 224, 255, 0.22), transparent 28%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)),
    rgba(12, 26, 42, 0.62);
}

.spring-widget__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(16 * var(--pt));
}

.spring-widget__eyebrow {
  font-size: calc(11 * var(--pt));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.spring-widget__title {
  font-size: calc(18 * var(--pt));
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.98);
}

.spring-widget__subtitle {
  font-size: calc(12 * var(--pt));
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.76);
}

.spring-widget__editable-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease;
}

.spring-widget__editable-button:active {
  opacity: 0.76;
  transform: scale(0.985);
}

#os-root.is-edit-mode .spring-widget__editable-button {
  cursor: inherit;
}

.widget-y2k-music {
  --widget-frame-opacity: 1;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(26 * var(--pt));
  color: #6f6b6a;
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.widget-y2k-music.is-glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-overlay-top-alpha) * 0.28)) 0%, rgba(243, 245, 248, calc(var(--widget-glass-overlay-bottom-alpha) * 0.24)) 100%);
  backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.92)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
  -webkit-backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.92)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
}

.widget-y2k-music__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--widget-frame-opacity);
  background: linear-gradient(180deg, rgba(251, 251, 248, 0.99) 0%, rgba(244, 243, 238, 0.995) 100%);
  border: calc(0.75 * var(--pt)) solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 calc(18 * var(--pt)) calc(34 * var(--pt)) rgba(20, 20, 24, 0.14),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.86) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(170, 167, 160, 0.12) inset;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-y2k-music.is-transparent-frame .widget-y2k-music__frame {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-y2k-music.has-solid-background .widget-y2k-music__frame {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.16) 100%);
  border-color: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 calc(18 * var(--pt)) calc(34 * var(--pt)) rgba(20, 20, 24, 0.12),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.52) inset;
}

.widget-y2k-music.is-clean-frame::before,
.widget-y2k-music.is-clean-frame::after,
.widget-y2k-music.is-clean-frame .widget-y2k-music__ornaments {
  opacity: 0;
}

.widget-y2k-music::before,
.widget-y2k-music::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.widget-y2k-music::before {
  background:
    radial-gradient(circle at 16% 15%, rgba(255, 255, 255, 0.94), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(228, 226, 221, 0.42), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 34%, transparent 78%, rgba(212, 207, 199, 0.16) 100%);
}

.widget-y2k-music.has-solid-background::before {
  background:
    radial-gradient(circle at 16% 15%, rgba(255, 255, 255, 0.42), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%, transparent 78%, rgba(255, 255, 255, 0.08) 100%);
}

.widget-y2k-music::after {
  opacity: 0.52;
  background-image:
    radial-gradient(circle, rgba(164, 162, 158, 0.36) 0 calc(1.2 * var(--pt)), transparent calc(1.2 * var(--pt))),
    radial-gradient(circle, rgba(185, 182, 176, 0.22) 0 calc(0.8 * var(--pt)), transparent calc(0.8 * var(--pt)));
  background-size: calc(19 * var(--pt)) calc(19 * var(--pt)), calc(36 * var(--pt)) calc(36 * var(--pt));
  background-position: 0 0, calc(8 * var(--pt)) calc(11 * var(--pt));
}

.widget-y2k-music.has-solid-background::after {
  opacity: 0.2;
}

.widget-y2k-music.is-glass::before,
.widget-y2k-music.is-glass::after {
  opacity: 0;
}


.widget-y2k-music__ornaments {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  filter: grayscale(1);
}

.widget-y2k-music__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
}

.widget-y2k-music__backdrop-image,
.widget-y2k-music__backdrop-solid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  opacity: 1;
  transform: none;
}

.widget-y2k-music__ornament {
  position: absolute;
  line-height: 1;
  color: rgba(140, 138, 136, 0.66);
  text-shadow: 0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.3);
}

.widget-y2k-music__ornament--star-a {
  top: calc(14 * var(--pt));
  left: calc(12 * var(--pt));
  font-size: calc(11 * var(--pt));
}

.widget-y2k-music__ornament--star-b {
  top: calc(44 * var(--pt));
  right: calc(18 * var(--pt));
  font-size: calc(13 * var(--pt));
}

.widget-y2k-music__ornament--star-c {
  bottom: calc(26 * var(--pt));
  right: calc(28 * var(--pt));
  font-size: calc(10 * var(--pt));
}

.widget-y2k-music__ornament--paw-a {
  top: calc(18 * var(--pt));
  right: calc(18 * var(--pt));
  font-size: calc(23 * var(--pt));
  opacity: 0.48;
}

.widget-y2k-music__ornament--paw-b {
  bottom: calc(18 * var(--pt));
  left: calc(12 * var(--pt));
  font-size: calc(18 * var(--pt));
  opacity: 0.34;
}

.widget-y2k-music__hero {
  position: absolute;
  top: calc(24 * var(--pt));
  left: 50%;
  z-index: 3;
  width: calc(94 * var(--pt));
  height: calc(94 * var(--pt));
  overflow: hidden;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.84);
  border: calc(1 * var(--pt)) solid rgba(153, 151, 148, 0.48);
  box-shadow:
    0 calc(8 * var(--pt)) calc(16 * var(--pt)) rgba(17, 17, 18, 0.08),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.88) inset;
}

.widget-y2k-music__hero-image,
.widget-y2k-music__thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.widget-y2k-music__panel {
  position: absolute;
  left: calc(14 * var(--pt));
  right: calc(14 * var(--pt));
  bottom: calc(13 * var(--pt));
  z-index: 4;
  display: grid;
  grid-template-columns: calc(36 * var(--pt)) minmax(0, 1fr);
  align-items: center;
  gap: calc(8 * var(--pt));
  min-height: calc(54 * var(--pt));
  padding: calc(8 * var(--pt)) calc(10 * var(--pt));
  border-radius: calc(19 * var(--pt));
  background: rgba(255, 255, 255, 0.8);
  border: calc(1 * var(--pt)) solid rgba(154, 151, 145, 0.48);
  backdrop-filter: blur(calc(12 * var(--pt)));
  -webkit-backdrop-filter: blur(calc(12 * var(--pt)));
  box-shadow:
    0 calc(8 * var(--pt)) calc(20 * var(--pt)) rgba(23, 22, 20, 0.08),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.78) inset;
}

.widget-y2k-music__thumb {
  width: calc(32 * var(--pt));
  height: calc(32 * var(--pt));
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: calc(1 * var(--pt)) solid rgba(159, 156, 150, 0.38);
}

.widget-y2k-music__meta {
  display: grid;
  gap: calc(3 * var(--pt));
  min-width: 0;
}

.widget-y2k-music__controls {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  min-width: 0;
  color: #6c6866;
}

.widget-y2k-music__control,
.widget-y2k-music__play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: currentColor;
}

.widget-y2k-music__control svg,
.widget-y2k-music__play-button svg {
  display: block;
  width: calc(10 * var(--pt));
  height: calc(10 * var(--pt));
  fill: currentColor;
}

.widget-y2k-music__control--pause svg {
  width: calc(9 * var(--pt));
  height: calc(9 * var(--pt));
}

.widget-y2k-music__flourish {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  font-size: calc(6.8 * var(--pt));
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: rgba(124, 121, 119, 0.82);
}

.widget-y2k-music__title {
  overflow: hidden;
  font-size: calc(10.8 * var(--pt));
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #555252;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.widget-y2k-music__progress-row {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
}

.widget-y2k-music__play-button {
  width: calc(15 * var(--pt));
  height: calc(15 * var(--pt));
  border-radius: 999px;
  border: calc(1 * var(--pt)) solid rgba(133, 130, 126, 0.6);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.9) inset;
}

.widget-y2k-music__play-button svg {
  width: calc(8 * var(--pt));
  height: calc(8 * var(--pt));
  margin-left: calc(1 * var(--pt));
}

.widget-y2k-music__track {
  position: relative;
  flex: 1 1 auto;
  height: calc(4.2 * var(--pt));
  overflow: hidden;
  border-radius: 999px;
  border: calc(0.85 * var(--pt)) solid rgba(166, 163, 157, 0.6);
  background: rgba(255, 255, 255, 0.48);
}

.widget-y2k-music__fill {
  position: absolute;
  left: calc(1.2 * var(--pt));
  top: 50%;
  height: calc(1.7 * var(--pt));
  border-radius: 999px;
  transform: translateY(-50%);
  background: #7e7a77;
}

.widget-y2k-music__artist {
  overflow: hidden;
  font-size: calc(7.6 * var(--pt));
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(112, 109, 106, 0.9);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.widget-preview-widget .widget-y2k-music {
  border-radius: calc(26 * var(--pt));
}

.widget-music-pair {
  --widget-frame-opacity: 1;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(36 * var(--pt));
  color: #131316;
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.widget-music-pair.is-glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-overlay-top-alpha) * 0.28)) 0%, rgba(243, 245, 248, calc(var(--widget-glass-overlay-bottom-alpha) * 0.24)) 100%);
  backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.92)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
  -webkit-backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.92)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
}

.widget-music-pair__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--widget-frame-opacity);
  background: linear-gradient(180deg, rgba(252, 252, 250, 0.995) 0%, rgba(246, 245, 243, 0.995) 100%);
  border: calc(0.8 * var(--pt)) solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 calc(16 * var(--pt)) calc(40 * var(--pt)) rgba(18, 18, 24, 0.16),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-music-pair.is-transparent-frame .widget-music-pair__frame {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-music-pair.has-solid-background .widget-music-pair__frame {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.14) 100%);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 calc(16 * var(--pt)) calc(40 * var(--pt)) rgba(18, 18, 24, 0.14),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.5) inset;
}

.widget-music-pair.is-clean-frame::before,
.widget-music-pair.is-clean-frame .widget-music-pair__grain,
.widget-music-pair.is-clean-frame .widget-music-pair__star {
  opacity: 0;
}

.widget-music-pair::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.74), transparent 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 34%, transparent 76%, rgba(214, 214, 217, 0.18) 100%);
  pointer-events: none;
}

.widget-music-pair.has-solid-background::before {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.4), transparent 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%, transparent 76%, rgba(255, 255, 255, 0.08) 100%);
}

.widget-music-pair.is-glass::before {
  background: none;
}


.widget-music-pair__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.widget-music-pair__grain--outer {
  opacity: 0.14;
  background-image:
    radial-gradient(circle, rgba(95, 95, 99, 0.38) 0 calc(0.85 * var(--pt)), transparent calc(0.85 * var(--pt))),
    radial-gradient(circle, rgba(132, 132, 136, 0.18) 0 calc(0.62 * var(--pt)), transparent calc(0.62 * var(--pt)));
  background-size: calc(7 * var(--pt)) calc(7 * var(--pt)), calc(11 * var(--pt)) calc(11 * var(--pt));
  background-position: 0 0, calc(4 * var(--pt)) calc(3 * var(--pt));
  mix-blend-mode: multiply;
}

.widget-music-pair.has-solid-background .widget-music-pair__grain--outer {
  opacity: 0.06;
}

.widget-music-pair__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
}

.widget-music-pair__background-image,
.widget-music-pair__background-solid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-music-pair__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(calc(168 * var(--pt)), 1fr) auto calc(132 * var(--pt));
  row-gap: calc(8 * var(--pt));
  height: 100%;
  padding: calc(18 * var(--pt)) calc(18 * var(--pt)) calc(16 * var(--pt));
}

.widget-music-pair__star {
  position: absolute;
  color: #c5c5c8;
  pointer-events: none;
}

.widget-music-pair__star--tl {
  top: calc(-4 * var(--pt));
  left: calc(44 * var(--pt));
  width: calc(46 * var(--pt));
  height: calc(46 * var(--pt));
  opacity: 0.8;
}

.widget-music-pair__star--tr {
  top: calc(28 * var(--pt));
  right: calc(42 * var(--pt));
  width: calc(34 * var(--pt));
  height: calc(34 * var(--pt));
  opacity: 0.56;
}

.widget-music-pair__star--ml {
  top: calc(122 * var(--pt));
  left: calc(12 * var(--pt));
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  opacity: 0.62;
}

.widget-music-pair__star--center {
  top: calc(214 * var(--pt));
  left: 50%;
  width: calc(72 * var(--pt));
  height: calc(72 * var(--pt));
  transform: translateX(-50%);
  opacity: 0.42;
}

.widget-music-pair__star--bl {
  bottom: calc(22 * var(--pt));
  left: calc(30 * var(--pt));
  width: calc(42 * var(--pt));
  height: calc(42 * var(--pt));
  opacity: 0.58;
}

.widget-music-pair__star--br {
  bottom: calc(96 * var(--pt));
  right: calc(12 * var(--pt));
  width: calc(34 * var(--pt));
  height: calc(34 * var(--pt));
  opacity: 0.46;
}

.widget-music-pair__avatars {
  grid-row: 1;
  position: relative;
  z-index: 1;
}

.widget-music-pair__avatar-column {
  position: absolute;
  top: 0;
  width: calc(126 * var(--pt));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--pt));
}

.widget-music-pair__avatar-column--left {
  left: calc(28 * var(--pt));
}

.widget-music-pair__avatar-column--right {
  right: calc(28 * var(--pt));
}

.widget-music-pair__bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(124 * var(--pt));
  min-height: calc(54 * var(--pt));
  padding: calc(8 * var(--pt)) calc(20 * var(--pt));
  border-radius: calc(18 * var(--pt));
  background: #ffffff;
  box-shadow: 0 calc(3 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.13);
}

.widget-music-pair__bubble-tail {
  position: absolute;
  left: 50%;
  bottom: calc(-8 * var(--pt));
  width: calc(16 * var(--pt));
  height: calc(10 * var(--pt));
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
  filter: drop-shadow(0 calc(2 * var(--pt)) calc(2 * var(--pt)) rgba(0, 0, 0, 0.06));
}

.widget-music-pair__bubble-text {
  font-size: calc(15 * var(--pt));
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111111;
  white-space: nowrap;
}

.widget-music-pair__avatar-shell {
  width: calc(88 * var(--pt));
  height: calc(88 * var(--pt));
  overflow: hidden;
  border-radius: 999px;
  border: calc(3 * var(--pt)) solid #000000;
  background: #ffffff;
}

.widget-music-pair__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.widget-music-pair__cable {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}

.widget-music-pair__cable path,
.widget-music-pair__cable circle {
  stroke: #000000;
  fill: #000000;
}

.widget-music-pair__cable path {
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
}

.widget-music-pair__lyric {
  grid-row: 2;
  align-self: center;
  position: relative;
  z-index: 1;
  min-height: calc(30 * var(--pt));
  padding: 0 calc(24 * var(--pt));
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(12.6 * var(--pt));
  line-height: 1.56;
  letter-spacing: 0.05em;
  color: #7e7e84;
}

.widget-music-pair__player {
  grid-row: 3;
  position: relative;
  z-index: 2;
  align-self: end;
  margin: 0 calc(6 * var(--pt)) 0;
  padding: calc(16 * var(--pt)) calc(20 * var(--pt)) calc(18 * var(--pt));
  border-radius: calc(28 * var(--pt));
  background: #b9b9bc;
  box-shadow:
    0 calc(8 * var(--pt)) calc(18 * var(--pt)) rgba(66, 66, 72, 0.08),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.26) inset;
}

.widget-music-pair__player-header {
  display: grid;
  grid-template-columns: calc(34 * var(--pt)) 1fr calc(34 * var(--pt));
  align-items: center;
  margin-bottom: calc(8 * var(--pt));
}

.widget-music-pair__player-spacer {
  width: calc(34 * var(--pt));
}

.widget-music-pair__track-title {
  text-align: center;
  font-size: calc(15 * var(--pt));
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #1c1c1e;
}

.widget-music-pair__waveform {
  display: flex;
  justify-content: flex-end;
  color: #3a3a3c;
}

.widget-music-pair__waveform svg {
  width: calc(34 * var(--pt));
  height: calc(22 * var(--pt));
}

.widget-music-pair__waveform rect {
  fill: currentColor;
}

.widget-music-pair__track-decor {
  margin-bottom: calc(10 * var(--pt));
  text-align: center;
  font-size: calc(11 * var(--pt));
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #56565b;
  white-space: nowrap;
}

.widget-music-pair__progress {
  position: relative;
  height: calc(3 * var(--pt));
  margin-bottom: calc(3 * var(--pt));
  overflow: hidden;
  border-radius: 999px;
  background: #8a8a8c;
}

.widget-music-pair__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #1c1c1e;
}

.widget-music-pair__times {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(14 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: 1;
  color: #444447;
}

.widget-music-pair__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(32 * var(--pt));
}

.widget-music-pair__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1c1c1e;
}

.widget-music-pair__control svg {
  display: block;
  width: calc(24 * var(--pt));
  height: calc(24 * var(--pt));
  fill: currentColor;
}

.widget-music-pair__control--pause svg {
  width: calc(24 * var(--pt));
  height: calc(24 * var(--pt));
}

.widget-preview-widget .widget-music-pair {
  border-radius: calc(32 * var(--pt));
}

.widget-mood-board {
  --widget-frame-opacity: 1;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(28 * var(--pt));
  color: #575250;
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
  pointer-events: auto;
}

.widget-mood-board__background {
  position: absolute;
  inset: 0;
  opacity: 1;
}

.widget-mood-board__background-image,
.widget-mood-board__background-solid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-mood-board__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.96), transparent 24%),
    radial-gradient(circle at 82% 86%, rgba(233, 231, 224, 0.7), transparent 26%),
    linear-gradient(180deg, rgba(252, 252, 250, 0.995) 0%, rgba(245, 243, 238, 0.995) 100%);
  border: calc(0.75 * var(--pt)) solid rgba(255, 255, 255, 0.92);
  opacity: var(--widget-frame-opacity);
  box-shadow:
    0 calc(16 * var(--pt)) calc(30 * var(--pt)) rgba(21, 19, 24, 0.12),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.88) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(188, 183, 174, 0.1) inset;
}

.widget-mood-board.has-background .widget-mood-board__frame {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.46), transparent 24%),
    radial-gradient(circle at 82% 86%, rgba(233, 231, 224, 0.24), transparent 26%),
    linear-gradient(180deg, rgba(252, 252, 250, 0.36) 0%, rgba(245, 243, 238, 0.54) 100%);
  border-color: rgba(255, 255, 255, 0.62);
}

.widget-mood-board.has-solid-background .widget-mood-board__frame {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.34), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.14) 100%);
  border-color: rgba(255, 255, 255, 0.7);
}

.widget-mood-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 32%, transparent 72%, rgba(213, 208, 198, 0.14) 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3), transparent 46%);
  opacity: var(--widget-frame-opacity);
  pointer-events: none;
  z-index: 0;
}

.widget-mood-board.is-transparent-frame::before {
  opacity: calc(var(--widget-frame-opacity) * 0.92);
}

.widget-mood-board.has-background::before {
  opacity: calc(var(--widget-frame-opacity) * 0.48);
}

.widget-mood-board.has-solid-background::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 32%, transparent 72%, rgba(255, 255, 255, 0.08) 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 46%);
  opacity: calc(var(--widget-frame-opacity) * 0.28);
}

.widget-mood-board__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(84 * var(--pt)) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr auto;
  align-items: center;
  gap: calc(6 * var(--pt)) calc(6 * var(--pt));
  height: 100%;
  padding: calc(16 * var(--pt)) calc(12 * var(--pt)) calc(14 * var(--pt));
}

.widget-mood-board__column {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--pt));
}

.widget-mood-board__column--left {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-items: flex-start;
  padding-left: 0;
}

.widget-mood-board__column--right {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-items: flex-end;
  padding-right: 0;
}

.widget-mood-board__pill {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  width: calc(102 * var(--pt));
  max-width: 100%;
  height: calc(38 * var(--pt));
  padding: 0 calc(10 * var(--pt));
  border: calc(0.75 * var(--pt)) solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(236, 235, 231, 0.96) 0%, rgba(228, 226, 220, 0.98) 100%);
  box-shadow:
    0 calc(7 * var(--pt)) calc(14 * var(--pt)) rgba(101, 97, 92, 0.1),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.76) inset;
  color: #5c5857;
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
}

.widget-mood-board.has-background .widget-mood-board__pill {
  background: linear-gradient(180deg, rgba(239, 236, 231, 0.84) 0%, rgba(228, 224, 217, 0.88) 100%);
}

.widget-mood-board__pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
  color: #4e4948;
  flex: 0 0 auto;
  font-size: calc(13.5 * var(--pt));
  line-height: 1;
}

.widget-mood-board__pill-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(9.6 * var(--pt));
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
}

.widget-mood-board__pill-emoji,
.widget-mood-board__pill-text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.widget-mood-board__pill-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.widget-mood-board__pill-text-button {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.widget-mood-board__avatar-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.widget-mood-board__avatar-shell {
  position: relative;
  display: block;
  width: calc(82 * var(--pt));
  height: calc(82 * var(--pt));
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, #d8d5d8 0%, #b7b2b8 100%);
  box-shadow:
    0 calc(8 * var(--pt)) calc(14 * var(--pt)) rgba(24, 22, 28, 0.12),
    0 calc(1.25 * var(--pt)) calc(1.25 * var(--pt)) rgba(255, 255, 255, 0.92) inset,
    0 0 0 calc(3 * var(--pt)) rgba(255, 255, 255, 0.62);
}

.widget-mood-board__avatar-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-mood-board__avatar-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(244, 239, 241, 0.94) 0 14%, transparent 15%),
    radial-gradient(circle at 52% 33%, rgba(35, 33, 40, 0.82) 0 21%, transparent 22%),
    linear-gradient(180deg, rgba(44, 41, 48, 0.92) 0 38%, rgba(242, 236, 238, 0.96) 38% 70%, rgba(212, 204, 208, 0.88) 70% 100%);
  transform: scale(1.02);
}

.widget-mood-board.has-avatar-image .widget-mood-board__avatar-fallback {
  display: none;
}

.widget-mood-board__ornament {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #575250;
  font-size: calc(15.5 * var(--pt));
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.widget-mood-board__editable,
.widget-mood-board__avatar-button {
  transition: opacity 140ms ease, transform 140ms ease;
}

.widget-mood-board__editable:active,
.widget-mood-board__avatar-button:active {
  opacity: 0.74;
  transform: scale(0.986);
}

#os-root.is-edit-mode .widget-mood-board__editable,
#os-root.is-edit-mode .widget-mood-board__avatar-button {
  cursor: inherit;
}

.widget-preview-widget .widget-mood-board {
  border-radius: calc(32 * var(--pt));
}

.widget-ins-profile {
  --widget-frame-opacity: 1;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(34 * var(--pt));
  background: transparent;
  color: #181620;
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
}

.widget-ins-profile__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: scale(1.12);
  transform-origin: center center;
}

.widget-ins-profile__cover {
  position: absolute;
  left: calc(16 * var(--pt));
  right: calc(16 * var(--pt));
  top: calc(20 * var(--pt));
  height: calc(176 * var(--pt));
  overflow: hidden;
  border-radius: calc(32 * var(--pt));
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(112, 95, 77, 0.18) 0 53%, rgba(78, 67, 56, 0.28) 53% 56%, rgba(176, 161, 139, 0.2) 56% 100%),
    linear-gradient(180deg, #cbb499 0%, #ab987f 46%, #90806d 100%);
  box-shadow:
    0 calc(10 * var(--pt)) calc(16 * var(--pt)) rgba(68, 56, 43, 0.08),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.44) inset;
}

.widget-ins-profile__cover-image,
.widget-ins-profile__avatar-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-ins-profile__cover-fallback {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(80, 66, 52, 0.28) 48% 51%, transparent 51% 100%),
    linear-gradient(115deg, transparent 0 18%, rgba(255, 233, 195, 0.5) 18% 24%, rgba(213, 188, 149, 0.22) 24% 34%, transparent 34% 100%),
    radial-gradient(circle at 22% 96%, rgba(72, 56, 40, 0.34) 0 18%, transparent 19%),
    linear-gradient(180deg, rgba(255, 242, 217, 0.26), transparent 38%),
    repeating-linear-gradient(180deg, rgba(106, 87, 67, 0.36) 0 calc(8 * var(--pt)), transparent calc(8 * var(--pt)) calc(20 * var(--pt)));
  background-position: center;
  transform: scale(1.02);
}

.widget-ins-profile.has-cover-image .widget-ins-profile__cover-fallback {
  display: none;
}

.widget-ins-profile:not(.has-cover-image) .widget-ins-profile__cover::before {
  content: "";
  position: absolute;
  left: calc(8 * var(--pt));
  bottom: calc(-8 * var(--pt));
  width: calc(128 * var(--pt));
  height: calc(86 * var(--pt));
  border-radius: 50%;
  background: radial-gradient(circle at 52% 48%, rgba(72, 58, 41, 0.34) 0, rgba(72, 58, 41, 0.24) 52%, transparent 72%);
  filter: blur(calc(1.2 * var(--pt)));
  z-index: 1;
  pointer-events: none;
}

.widget-ins-profile__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28%, rgba(51, 35, 16, 0.12) 100%),
    linear-gradient(90deg, rgba(110, 91, 69, 0.1), transparent 18%, transparent 72%, rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
}

.widget-ins-profile.has-cover-image .widget-ins-profile__cover::after {
  display: none;
}

.widget-ins-profile__card {
  position: absolute;
  left: calc(16 * var(--pt));
  right: calc(16 * var(--pt));
  bottom: calc(50 * var(--pt));
  height: calc(198 * var(--pt));
  overflow: visible;
  z-index: 3;
  isolation: isolate;
  border-radius: calc(32 * var(--pt));
  background: transparent;
  border: 0;
  box-shadow:
    0 calc(12 * var(--pt)) calc(22 * var(--pt)) rgba(23, 22, 29, 0.07),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.72) inset;
}

.widget-ins-profile__card-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 1;
}

.widget-ins-profile__card-background-image,
.widget-ins-profile__card-background-solid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-ins-profile__card-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: var(--widget-frame-opacity);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.94), transparent 24%),
    radial-gradient(circle at 84% 82%, rgba(230, 225, 219, 0.68), transparent 24%),
    linear-gradient(180deg, rgba(251, 251, 251, 0.995) 0%, rgba(246, 245, 245, 0.995) 100%);
  border: calc(0.5 * var(--pt)) solid rgba(255, 255, 255, 0.84);
  box-shadow:
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.84) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(188, 180, 172, 0.1) inset;
}

.widget-ins-profile.has-background:not(.has-solid-background) .widget-ins-profile__card {
  box-shadow: 0 calc(12 * var(--pt)) calc(22 * var(--pt)) rgba(23, 22, 29, 0.08);
}

.widget-ins-profile.has-background:not(.has-solid-background) .widget-ins-profile__card-frame {
  opacity: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-ins-profile.has-background .widget-ins-profile__card-frame {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.38), transparent 24%),
    radial-gradient(circle at 84% 82%, rgba(230, 225, 219, 0.2), transparent 24%),
    linear-gradient(180deg, rgba(251, 251, 251, 0.28) 0%, rgba(246, 245, 245, 0.42) 100%);
  border-color: rgba(255, 255, 255, 0.54);
}

.widget-ins-profile.has-solid-background .widget-ins-profile__card-frame {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.3), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.12) 100%);
  border-color: rgba(255, 255, 255, 0.68);
}

.widget-ins-profile__avatar-wrap {
  position: absolute;
  left: 50%;
  top: calc(-66 * var(--pt));
  z-index: 4;
  transform: translateX(-50%);
}

.widget-ins-profile__avatar-shell {
  position: relative;
  width: calc(96 * var(--pt));
  height: calc(96 * var(--pt));
  overflow: hidden;
  border-radius: 999px;
  border: calc(3.5 * var(--pt)) solid rgba(255, 255, 255, 0.96);
  background: linear-gradient(180deg, #d3b18d 0%, #a68367 100%);
  box-shadow:
    0 calc(10 * var(--pt)) calc(18 * var(--pt)) rgba(69, 52, 36, 0.14),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.68) inset;
}

.widget-ins-profile.has-avatar-image .widget-ins-profile__avatar-shell {
  border: 0;
  background: transparent;
  box-shadow: 0 calc(8 * var(--pt)) calc(18 * var(--pt)) rgba(44, 34, 24, 0.16);
}

.widget-ins-profile__avatar-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 51% 26%, rgba(204, 162, 126, 0.84) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 39%, rgba(191, 149, 113, 0.72) 0 17%, transparent 18%),
    linear-gradient(180deg, transparent 0 22%, rgba(249, 242, 229, 0.94) 22% 58%, rgba(215, 198, 174, 0.9) 58% 100%),
    linear-gradient(112deg, rgba(141, 110, 83, 0.18) 0 48%, rgba(255, 255, 255, 0.54) 48% 55%, rgba(226, 214, 196, 0.18) 55% 100%);
  transform: scale(1.05);
}

.widget-ins-profile.has-avatar-image .widget-ins-profile__avatar-fallback {
  display: none;
}

.widget-ins-profile__identity {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: calc(54 * var(--pt)) calc(22 * var(--pt)) calc(20 * var(--pt));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.widget-ins-profile__name {
  font-size: calc(21.2 * var(--pt));
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111017;
}

.widget-ins-profile__handle {
  margin-top: calc(5 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #cecccf;
}

.widget-ins-profile__bio {
  margin-top: calc(14 * var(--pt));
  font-size: calc(12.8 * var(--pt));
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #36333b;
  text-align: center;
}

.widget-ins-profile__location {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  font-size: calc(12.2 * var(--pt));
  line-height: 1;
  font-weight: 700;
  color: #49444c;
}

.widget-ins-profile__location-icon {
  display: inline-flex;
  width: calc(15 * var(--pt));
  height: calc(15 * var(--pt));
  color: #d5d2d6;
}

.widget-ins-profile__location-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.widget-preview-widget .widget-ins-profile {
  border-radius: calc(32 * var(--pt));
}

.widget-ins-note {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(28 * var(--pt));
  background: linear-gradient(180deg, rgba(248, 247, 243, 0.99) 0%, rgba(242, 240, 234, 0.99) 100%);
  border: calc(0.7 * var(--pt)) solid rgba(255, 255, 255, 0.84);
  box-shadow:
    0 calc(16 * var(--pt)) calc(30 * var(--pt)) rgba(11, 16, 26, 0.18),
    0 calc(1 * var(--pt)) calc(0.8 * var(--pt)) rgba(255, 255, 255, 0.86) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(171, 161, 143, 0.15) inset;
  color: #3d3c42;
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
  pointer-events: auto;
}

.widget-ins-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 24%, transparent 72%, rgba(216, 208, 195, 0.12) 100%);
  pointer-events: none;
}

.widget-ins-note__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(84 * var(--pt)) minmax(0, 1fr);
  gap: calc(16 * var(--pt));
  height: 100%;
  padding: calc(15 * var(--pt)) calc(18 * var(--pt)) calc(15 * var(--pt)) calc(16 * var(--pt));
}

.widget-ins-note__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-top: calc(2 * var(--pt));
}

.widget-ins-note__avatar {
  width: calc(56 * var(--pt));
  height: calc(56 * var(--pt));
  border-radius: 999px;
  overflow: hidden;
  background: #b39a74;
  box-shadow:
    0 calc(1 * var(--pt)) calc(0.8 * var(--pt)) rgba(255, 255, 255, 0.34) inset,
    0 calc(8 * var(--pt)) calc(14 * var(--pt)) rgba(110, 94, 71, 0.2);
}

.widget-ins-note__avatar-button {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.widget-ins-note__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.widget-ins-note__date {
  margin-top: calc(28 * var(--pt));
  display: grid;
  gap: calc(4 * var(--pt));
}

.widget-ins-note__day {
  font-size: calc(41 * var(--pt));
  line-height: 0.92;
  font-weight: 500;
  letter-spacing: -0.055em;
  color: #39383f;
}

.widget-ins-note__mood {
  font-size: calc(9.6 * var(--pt));
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #a19782;
  white-space: nowrap;
}

.widget-ins-note__content {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  min-width: 0;
  height: 100%;
  padding: calc(1 * var(--pt)) 0;
}

.widget-ins-note__row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.widget-ins-note__row:not(:last-child) {
  border-bottom: calc(1 * var(--pt)) dashed rgba(111, 107, 100, 0.48);
}

.widget-ins-note__headline {
  display: flex;
  align-items: baseline;
  gap: calc(5 * var(--pt));
  min-width: 0;
  color: #45434a;
  white-space: nowrap;
}

.widget-ins-note__headline-spark {
  font-size: calc(11 * var(--pt));
  line-height: 1;
  letter-spacing: -0.02em;
}

.widget-ins-note__headline-text {
  font-family: "Inter", "SF Pro Display", sans-serif;
  font-size: calc(11.6 * var(--pt));
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.widget-ins-note__headline-row {
  font-family: "Inter", "SF Pro Display", sans-serif;
  font-size: calc(11.6 * var(--pt));
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.widget-ins-note__headline-cloud {
  font-size: calc(13 * var(--pt));
  line-height: 1;
  color: #c3c6cc;
}

.widget-ins-note__headline-temp {
  font-family: "Inter", "SF Pro Display", sans-serif;
  font-size: calc(11 * var(--pt));
  line-height: 1;
  letter-spacing: 0.01em;
}

.widget-ins-note__quote {
  font-size: calc(17 * var(--pt));
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #48464e;
  white-space: nowrap;
}

.widget-ins-note__icons {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--pt));
  min-width: 0;
  color: #4d4b52;
  white-space: nowrap;
}

.widget-ins-note__icons-row {
  font-size: calc(17 * var(--pt));
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.widget-ins-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.widget-ins-note__icon--salt,
.widget-ins-note__icon--cat {
  font-size: calc(17 * var(--pt));
}

.widget-ins-note__icon--dust {
  font-size: calc(12 * var(--pt));
  color: #7d7c83;
}

.widget-ins-note__icon--heart,
.widget-ins-note__icon--star {
  font-size: calc(20 * var(--pt));
}

.widget-ins-note__icon--paw {
  font-size: calc(17 * var(--pt));
}

.widget-ins-note__footer {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  min-width: 0;
  white-space: nowrap;
}

.widget-ins-note__footer-item {
  font-size: calc(9.6 * var(--pt));
  line-height: 1;
  letter-spacing: 0.02em;
  color: #5a5960;
  opacity: 0.96;
}

.widget-ins-note__editable,
.widget-ins-note__avatar-button {
  transition: opacity 140ms ease, transform 140ms ease;
}

.widget-ins-note__editable {
  cursor: pointer;
}

.widget-ins-note__editable:active,
.widget-ins-note__avatar-button:active {
  opacity: 0.72;
  transform: scale(0.985);
}

#os-root.is-edit-mode .widget-ins-note__editable,
#os-root.is-edit-mode .widget-ins-note__avatar-button {
  cursor: inherit;
}

.widget-ins-note-sheet-preview {
  position: absolute;
  inset: 0;
  background: transparent;
}

.widget-ins-note-sheet-preview__card {
  position: absolute;
  inset: calc(8 * var(--pt)) calc(6 * var(--pt)) calc(10 * var(--pt));
  padding: calc(14 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(26 * var(--pt));
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.92), transparent 26%),
    linear-gradient(180deg, rgba(250, 248, 243, 0.98) 0%, rgba(244, 240, 232, 0.98) 100%);
  border: calc(0.7 * var(--pt)) solid rgba(255, 255, 255, 0.84);
  box-shadow:
    0 calc(10 * var(--pt)) calc(24 * var(--pt)) rgba(15, 23, 42, 0.08),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.82) inset;
  color: #4b4750;
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
}

.widget-ins-note-sheet-preview__layout {
  display: grid;
  grid-template-columns: calc(42 * var(--pt)) minmax(0, 1fr);
  gap: calc(14 * var(--pt));
  align-items: stretch;
  height: 100%;
}

.widget-ins-note-sheet-preview__avatar {
  width: calc(42 * var(--pt));
  height: calc(42 * var(--pt));
  border-radius: 999px;
  overflow: hidden;
  background: #d5b28b;
  box-shadow:
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.42) inset,
    0 calc(8 * var(--pt)) calc(14 * var(--pt)) rgba(145, 119, 88, 0.16);
}

.widget-ins-note-sheet-preview__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-ins-note-sheet-preview__main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(10 * var(--pt));
  min-width: 0;
  height: 100%;
}

.widget-ins-note-sheet-preview__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10 * var(--pt));
  min-width: 0;
}

.widget-ins-note-sheet-preview__eyebrow {
  font-size: calc(9.5 * var(--pt));
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(82, 77, 74, 0.72);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-ins-note-sheet-preview__quote {
  align-self: center;
  padding-right: calc(4 * var(--pt));
  font-size: calc(16 * var(--pt));
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #454149;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.widget-ins-note-sheet-preview__day {
  flex: 0 0 auto;
  min-width: calc(18 * var(--pt));
  text-align: right;
  font-size: calc(22 * var(--pt));
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: rgba(70, 67, 75, 0.72);
}

.widget-ins-note-sheet-preview__footer {
  align-self: end;
  padding-top: calc(9 * var(--pt));
  border-top: calc(1 * var(--pt)) solid rgba(168, 158, 147, 0.16);
  font-size: calc(13 * var(--pt));
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(83, 80, 88, 0.86);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-ins-diary {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(30 * var(--pt));
  color: #7b746f;
  font-family:
    "Inter",
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
  pointer-events: auto;
}

.widget-ins-diary__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.widget-ins-diary__card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(253, 252, 249, 0.99), rgba(249, 247, 242, 0.99));
  border: calc(0.7 * var(--pt)) solid rgba(201, 193, 183, 0.74);
  box-shadow:
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.74) inset,
    0 calc(10 * var(--pt)) calc(20 * var(--pt)) rgba(122, 110, 96, 0.08);
  display: grid;
  grid-template-rows: calc(40 * var(--pt)) minmax(0, 1fr) calc(1 * var(--pt)) calc(38 * var(--pt));
}

.widget-ins-diary__topbar {
  position: relative;
  display: grid;
  grid-template-columns: calc(28 * var(--pt)) 1fr calc(28 * var(--pt));
  align-items: center;
  padding: 0 calc(12 * var(--pt));
  border-bottom: calc(0.7 * var(--pt)) solid rgba(218, 212, 205, 0.72);
  background: linear-gradient(180deg, rgba(252, 251, 248, 0.98), rgba(245, 242, 237, 0.96));
}

.widget-ins-diary__back {
  width: calc(20 * var(--pt));
  height: calc(20 * var(--pt));
  color: #9f9892;
}

.widget-ins-diary__back svg {
  display: block;
  width: 100%;
  height: 100%;
}

.widget-ins-diary__top-title {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  color: #252321;
  appearance: none;
  -webkit-appearance: none;
}

.widget-ins-diary__top-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(12.8 * var(--pt));
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.widget-ins-diary__content {
  padding: calc(12 * var(--pt)) calc(14 * var(--pt)) calc(8 * var(--pt));
}

.widget-ins-diary__row {
  display: grid;
  grid-template-columns: calc(42 * var(--pt)) minmax(0, 1fr);
  gap: calc(10 * var(--pt));
}

.widget-ins-diary__avatar-button {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.widget-ins-diary__avatar-shell {
  display: block;
  width: calc(42 * var(--pt));
  height: calc(42 * var(--pt));
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, #efe0d4, #fbf6f0);
  box-shadow:
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.74) inset,
    0 calc(8 * var(--pt)) calc(16 * var(--pt)) rgba(123, 104, 88, 0.12);
}

.widget-ins-diary__avatar-shell.is-empty {
  background: linear-gradient(180deg, #eadccf, #f9f4ed);
}

.widget-ins-diary__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-ins-diary__content-main {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: calc(8 * var(--pt));
  padding-top: calc(2 * var(--pt));
}

.widget-ins-diary__handle,
.widget-ins-diary__body,
.widget-ins-diary__time,
.widget-ins-diary__action-label {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
}

.widget-ins-diary__handle span,
.widget-ins-diary__body span,
.widget-ins-diary__time span,
.widget-ins-diary__action-label span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-ins-diary__handle {
  color: #8d8782;
}

.widget-ins-diary__handle span {
  font-size: calc(9.8 * var(--pt));
  line-height: 1;
  font-weight: 700;
}

.widget-ins-diary__body {
  color: #2a2826;
}

.widget-ins-diary__body span {
  font-size: calc(11.6 * var(--pt));
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.widget-ins-diary__time-row {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--pt));
  margin-top: calc(2 * var(--pt));
  color: #a39d97;
}

.widget-ins-diary__time-icon {
  width: calc(12 * var(--pt));
  height: calc(12 * var(--pt));
  flex: 0 0 auto;
}

.widget-ins-diary__time-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.widget-ins-diary__time span {
  font-size: calc(8.7 * var(--pt));
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.widget-ins-diary__divider {
  margin: 0 calc(12 * var(--pt));
  background: rgba(225, 220, 214, 0.9);
}

.widget-ins-diary__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(1 * var(--pt)) minmax(0, 1fr) calc(1 * var(--pt)) calc(52 * var(--pt));
  align-items: center;
  gap: calc(8 * var(--pt));
  padding: 0 calc(12 * var(--pt));
}

.widget-ins-diary__action,
.widget-ins-diary__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--pt));
  min-width: 0;
  color: #8f8983;
}

.widget-ins-diary__action svg {
  width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
  flex: 0 0 auto;
}

.widget-ins-diary__action-label span {
  font-size: calc(9.8 * var(--pt));
  line-height: 1;
  font-weight: 500;
}

.widget-ins-diary__footer-separator {
  width: 100%;
  height: calc(16 * var(--pt));
  background: rgba(226, 220, 213, 0.9);
}

.widget-ins-diary__dots {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--pt));
}

.widget-ins-diary__dots span {
  width: calc(5 * var(--pt));
  height: calc(5 * var(--pt));
  border-radius: 999px;
  background: #9b9590;
}

.widget-ins-diary__editable,
.widget-ins-diary__avatar-button {
  transition: opacity 140ms ease, transform 140ms ease;
}

.widget-ins-diary__editable {
  cursor: pointer;
}

.widget-ins-diary__editable:active,
.widget-ins-diary__avatar-button:active {
  opacity: 0.74;
  transform: scale(0.985);
}

#os-root.is-edit-mode .widget-ins-diary__editable,
#os-root.is-edit-mode .widget-ins-diary__avatar-button {
  cursor: inherit;
}

.widget-turntable {
  --widget-frame-opacity: 1;
  --turntable-rotation: 0deg;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(28 * var(--pt));
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;
  background: transparent;
}

.widget-turntable__base {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: var(--widget-frame-opacity);
  background: linear-gradient(180deg, #efefef 0%, #e6e5e4 100%);
  box-shadow:
    0 calc(18 * var(--pt)) calc(36 * var(--pt)) rgba(22, 24, 28, 0.13),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.78) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(174, 173, 171, 0.12) inset;
}

.widget-turntable__background {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
}

.widget-turntable__background-image,
.widget-turntable__background-solid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.widget-turntable__background-image {
  object-fit: cover;
}

.widget-turntable.has-background .widget-turntable__base {
  background: linear-gradient(180deg, #f6f5f4 0%, #ebe9e7 100%);
}

.widget-turntable__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.58), transparent 20%),
    radial-gradient(circle at 80% 86%, rgba(199, 198, 196, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 28%, transparent 78%, rgba(161, 160, 157, 0.08) 100%);
  border: calc(0.8 * var(--pt)) solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.56) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(174, 173, 171, 0.1) inset;
  pointer-events: none;
}

.widget-turntable.is-transparent-frame .widget-turntable__frame {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.58), transparent 20%),
    radial-gradient(circle at 80% 86%, rgba(199, 198, 196, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 28%, transparent 78%, rgba(161, 160, 157, 0.08) 100%);
}

.widget-turntable__power {
  position: absolute;
  top: calc(12 * var(--pt));
  left: calc(12 * var(--pt));
  z-index: 4;
  min-width: calc(36 * var(--pt));
  height: calc(24 * var(--pt));
  padding: 0 calc(10 * var(--pt));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(107, 106, 112, 0.96), rgba(83, 82, 88, 0.98));
  box-shadow:
    0 calc(6 * var(--pt)) calc(14 * var(--pt)) rgba(38, 39, 43, 0.16),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.12) inset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8f7f4;
  font-size: calc(8.8 * var(--pt));
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.03em;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.widget-turntable__power-text {
  display: block;
  min-width: calc(18 * var(--pt));
  text-align: center;
}

.widget-turntable__power.is-on {
  background: linear-gradient(180deg, rgba(94, 94, 99, 0.98), rgba(68, 68, 73, 1));
}

.widget-turntable__platter {
  position: absolute;
  left: 50%;
  top: calc(28 * var(--pt));
  z-index: 1;
  width: calc(140 * var(--pt));
  height: calc(140 * var(--pt));
  transform: translate3d(-50%, 0, 0) rotate(var(--turntable-rotation));
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 999px;
  filter: drop-shadow(0 calc(10 * var(--pt)) calc(18 * var(--pt)) rgba(12, 13, 16, 0.22));
}

.widget-turntable__vinyl-surface,
.widget-turntable__vinyl-reflection,
.widget-turntable__vinyl-highlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.widget-turntable__vinyl-surface {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 calc(46 * var(--pt)), rgba(255, 255, 255, 0.08) calc(46.7 * var(--pt)), transparent calc(47.5 * var(--pt))),
    radial-gradient(circle at 50% 50%, transparent 0 calc(51 * var(--pt)), rgba(255, 255, 255, 0.03) calc(51.6 * var(--pt)), transparent calc(52.2 * var(--pt))),
    radial-gradient(circle at 50% 50%, transparent 0 calc(56 * var(--pt)), rgba(255, 255, 255, 0.028) calc(56.6 * var(--pt)), transparent calc(57.2 * var(--pt))),
    radial-gradient(circle at 50% 50%, transparent 0 calc(60.5 * var(--pt)), rgba(255, 255, 255, 0.026) calc(61.1 * var(--pt)), transparent calc(61.7 * var(--pt))),
    radial-gradient(circle at 50% 50%, transparent 0 calc(64.5 * var(--pt)), rgba(255, 255, 255, 0.022) calc(65 * var(--pt)), transparent calc(65.6 * var(--pt))),
    radial-gradient(circle at 50% 50%, transparent 0 calc(68 * var(--pt)), rgba(255, 255, 255, 0.018) calc(68.4 * var(--pt)), transparent calc(69 * var(--pt))),
    radial-gradient(circle at 31% 26%, rgba(255, 255, 255, 0.095), transparent 24%),
    radial-gradient(circle at 70% 76%, rgba(255, 255, 255, 0.04), transparent 26%),
    conic-gradient(from 188deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.07)),
    radial-gradient(circle at 50% 50%, #2b292a 0%, #131214 56%, #030303 78%, #1c1b1d 100%);
  box-shadow:
    0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(255, 255, 255, 0.08) inset,
    0 calc(-3 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, 0.3) inset,
    0 0 calc(1 * var(--pt)) rgba(255, 255, 255, 0.04);
}

.widget-turntable__vinyl-reflection {
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.14) 0 16%, transparent 24% 54%, rgba(255, 255, 255, 0.05) 63% 69%, transparent 77% 100%),
    radial-gradient(circle at 64% 24%, rgba(255, 255, 255, 0.11), transparent 18%);
  mix-blend-mode: screen;
  opacity: 0.62;
}

.widget-turntable__vinyl-highlight {
  background:
    linear-gradient(118deg, transparent 0 48%, rgba(255, 255, 255, 0.22) 52%, rgba(255, 255, 255, 0.05) 57%, transparent 63% 100%);
  opacity: 0.9;
  mix-blend-mode: screen;
  transform: rotate(-10deg) scale(1.02);
}

.widget-turntable__record {
  position: absolute;
  left: 50%;
  top: calc(51 * var(--pt));
  z-index: 2;
  width: calc(94 * var(--pt));
  height: calc(94 * var(--pt));
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  transform: translate3d(-50%, 0, 0) rotate(var(--turntable-rotation));
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 999px;
  background: #0f0f10;
  box-shadow:
    0 0 0 calc(2.2 * var(--pt)) rgba(24, 24, 25, 0.84),
    0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(255, 255, 255, 0.08) inset;
}

.widget-turntable__cover-button {
  position: absolute;
  inset: calc(3 * var(--pt));
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  border: 0;
  padding: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(180deg, #b2b0c7 0%, #a4a2bf 100%);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow:
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.26) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(47, 46, 54, 0.18) inset;
}

.widget-turntable__cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: auto;
}

.widget-turntable__cover-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #b7b4cb 0%, #a9a7c3 100%);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.widget-turntable__spindle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: calc(7 * var(--pt));
  height: calc(7 * var(--pt));
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #cfcbc6 34%, #9a948c 100%);
  box-shadow: 0 0 0 calc(1.5 * var(--pt)) rgba(255, 255, 255, 0.22);
}

.widget-turntable__tonearm {
  position: absolute;
  top: calc(16 * var(--pt));
  right: calc(10 * var(--pt));
  z-index: 3;
  width: calc(64 * var(--pt));
  height: calc(112 * var(--pt));
  pointer-events: none;
}

.widget-turntable__tonearm-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(3 * var(--pt)) calc(7 * var(--pt)) rgba(41, 40, 42, 0.14));
}

.widget-turntable__cover-button,
.widget-turntable__cover-image,
.widget-turntable__cover-placeholder {
  transition: transform 160ms ease, opacity 160ms ease;
}

.widget-turntable__power {
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.widget-turntable__power.is-on {
  box-shadow:
    0 calc(6 * var(--pt)) calc(14 * var(--pt)) rgba(38, 39, 43, 0.16),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.12) inset,
    0 0 calc(12 * var(--pt)) rgba(255, 255, 255, 0.18);
}

.widget-turntable__cover-button:active {
  opacity: 0.9;
}

.widget-turntable__power:active {
  transform: scale(0.97);
}

.widget-turntable__cover-button:active .widget-turntable__cover-image,
.widget-turntable__cover-button:active .widget-turntable__cover-placeholder {
  transform: translateZ(0) scale(0.985);
}

#os-root.is-edit-mode .widget-turntable__cover-button {
  cursor: inherit;
}

.widget-acrylic-record-small {
  --widget-frame-opacity: 1;
  --acrylic-record-rotation: 0deg;
  --acrylic-record-sleeve: #c6e6f5;
  --acrylic-record-cover: #b4dcef;
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(28 * var(--pt));
  background: transparent;
  box-shadow: none;
}

.widget-acrylic-record-small__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.widget-acrylic-record-small__background-image,
.widget-acrylic-record-small__background-solid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-acrylic-record-small__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: var(--widget-frame-opacity);
  background: linear-gradient(180deg, rgba(247, 247, 246, 0.99) 0%, rgba(238, 236, 233, 0.995) 100%);
  border: calc(0.75 * var(--pt)) solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 calc(18 * var(--pt)) calc(36 * var(--pt)) rgba(18, 19, 22, 0.1),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.86) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(173, 171, 167, 0.1) inset;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.92), transparent 18%),
    radial-gradient(circle at 80% 82%, rgba(198, 202, 208, 0.2), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%, transparent 78%, rgba(168, 168, 166, 0.06)),
    linear-gradient(180deg, rgba(247, 247, 246, 0.99) 0%, rgba(238, 236, 233, 0.995) 100%);
  pointer-events: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-acrylic-record-small.has-solid-background .widget-acrylic-record-small__frame {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.48), transparent 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.14) 100%);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 calc(18 * var(--pt)) calc(36 * var(--pt)) rgba(18, 19, 22, 0.1),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.54) inset;
}

.widget-acrylic-record-small__panel {
  position: absolute;
  inset: calc(1 * var(--pt));
  z-index: 2;
  border-radius: inherit;
  transform: translateY(calc(9 * var(--pt)));
}

.widget-acrylic-record-small__sleeve {
  position: absolute;
  left: calc(6 * var(--pt));
  top: calc(4 * var(--pt));
  z-index: 1;
  width: calc(100 * var(--pt));
  height: calc(146 * var(--pt));
  border-radius: calc(6 * var(--pt));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.18);
  border: calc(1.7 * var(--pt)) solid rgba(255, 255, 255, 0.76);
  box-shadow:
    0 calc(12 * var(--pt)) calc(20 * var(--pt)) rgba(58, 67, 80, 0.12),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.8) inset,
    0 0 0 calc(1 * var(--pt)) rgba(192, 208, 218, 0.28);
}

.widget-acrylic-record-small__sleeve::before {
  content: "";
  position: absolute;
  inset: calc(2 * var(--pt));
  border-radius: calc(3.5 * var(--pt));
  border: calc(1 * var(--pt)) solid rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.widget-acrylic-record-small__sleeve::after {
  content: "";
  position: absolute;
  top: calc(4 * var(--pt));
  right: calc(4 * var(--pt));
  bottom: calc(4 * var(--pt));
  width: calc(18 * var(--pt));
  border-radius: calc(9 * var(--pt));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent 56%);
  opacity: 0.86;
  pointer-events: none;
}

.widget-acrylic-record-small__sleeve-art {
  position: absolute;
  inset: calc(5 * var(--pt));
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(3 * var(--pt));
  box-shadow:
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.18) inset,
    0 calc(-1 * var(--pt)) calc(2 * var(--pt)) rgba(50, 74, 92, 0.08) inset;
}

.widget-acrylic-record-small__sleeve-image,
.widget-acrylic-record-small__cover-image,
.widget-acrylic-record-small__sleeve-fill,
.widget-acrylic-record-small__cover-fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-acrylic-record-small__sleeve-fill {
  background: var(--acrylic-record-sleeve);
}

.widget-acrylic-record-small__stud {
  position: absolute;
  left: calc(7 * var(--pt));
  width: calc(7.5 * var(--pt));
  height: calc(7.5 * var(--pt));
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 1) 0 18%, rgba(248, 250, 252, 0.98) 24%, rgba(217, 223, 229, 0.96) 46%, rgba(168, 175, 183, 0.96) 72%, rgba(118, 124, 132, 0.98) 100%);
  box-shadow:
    0 0 0 calc(0.9 * var(--pt)) rgba(255, 255, 255, 0.5),
    0 calc(0.6 * var(--pt)) calc(1.4 * var(--pt)) rgba(58, 64, 74, 0.24),
    0 calc(0.5 * var(--pt)) calc(0.8 * var(--pt)) rgba(255, 255, 255, 0.72) inset,
    0 calc(-0.6 * var(--pt)) calc(0.9 * var(--pt)) rgba(88, 94, 103, 0.28) inset;
}

.widget-acrylic-record-small__stud--top {
  top: calc(6 * var(--pt));
}

.widget-acrylic-record-small__stud--bottom {
  bottom: calc(6 * var(--pt));
}

.widget-acrylic-record-small__vinyl {
  position: absolute;
  right: calc(5 * var(--pt));
  top: calc(40 * var(--pt));
  z-index: 2;
  width: calc(102 * var(--pt));
  height: calc(102 * var(--pt));
  transform: rotate(var(--acrylic-record-rotation));
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 999px;
  filter: drop-shadow(0 calc(10 * var(--pt)) calc(14 * var(--pt)) rgba(10, 11, 14, 0.2));
}

.widget-acrylic-record-small__vinyl::before {
  content: "";
  position: absolute;
  inset: calc(-6 * var(--pt));
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 59%, rgba(255, 255, 255, 0.36) 64%, rgba(255, 255, 255, 0.1) 71%, transparent 80%),
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.22), transparent 28%);
  opacity: 0.94;
  pointer-events: none;
}

.widget-acrylic-record-small__vinyl::after {
  content: "";
  position: absolute;
  inset: calc(-6 * var(--pt));
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 61.5%, rgba(255, 255, 255, 0.86) 65.2%, rgba(255, 255, 255, 0.48) 66.8%, rgba(108, 122, 136, 0.16) 68.8%, transparent 71.5%),
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, 0.34), transparent 18%);
  opacity: 0.98;
  pointer-events: none;
}

.widget-acrylic-record-small__vinyl-surface,
.widget-acrylic-record-small__vinyl-reflection,
.widget-acrylic-record-small__vinyl-highlight,
.widget-acrylic-record-small__cover {
  position: absolute;
  border-radius: inherit;
}

.widget-acrylic-record-small__vinyl-surface {
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 calc(27.2 * var(--pt)), rgba(255, 255, 255, 0.085) calc(27.8 * var(--pt)), transparent calc(28.4 * var(--pt))),
    radial-gradient(circle at 50% 50%, transparent 0 calc(31.4 * var(--pt)), rgba(255, 255, 255, 0.048) calc(32 * var(--pt)), transparent calc(32.6 * var(--pt))),
    radial-gradient(circle at 50% 50%, transparent 0 calc(35.2 * var(--pt)), rgba(255, 255, 255, 0.04) calc(35.8 * var(--pt)), transparent calc(36.4 * var(--pt))),
    radial-gradient(circle at 50% 50%, transparent 0 calc(38.8 * var(--pt)), rgba(255, 255, 255, 0.03) calc(39.4 * var(--pt)), transparent calc(40 * var(--pt))),
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.11), transparent 24%),
    radial-gradient(circle at 70% 78%, rgba(255, 255, 255, 0.03), transparent 28%),
    conic-gradient(from 190deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.07)),
    radial-gradient(circle at 50% 50%, #2a292a 0%, #121214 58%, #030303 78%, #1c1b1d 100%);
  box-shadow:
    0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(255, 255, 255, 0.08) inset,
    0 calc(-3 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, 0.3) inset;
}

.widget-acrylic-record-small__vinyl-reflection {
  inset: 0;
  background:
    linear-gradient(126deg, rgba(255, 255, 255, 0.16) 0 18%, transparent 26% 55%, rgba(255, 255, 255, 0.05) 64% 70%, transparent 78% 100%),
    radial-gradient(circle at 65% 25%, rgba(255, 255, 255, 0.12), transparent 18%);
  opacity: 0.62;
  mix-blend-mode: screen;
}

.widget-acrylic-record-small__vinyl-highlight {
  inset: 0;
  background: linear-gradient(116deg, transparent 0 49%, rgba(255, 255, 255, 0.22) 53%, rgba(255, 255, 255, 0.04) 58%, transparent 64% 100%);
  opacity: 0.88;
  transform: rotate(-10deg) scale(1.02);
  mix-blend-mode: screen;
}

.widget-acrylic-record-small__cover {
  inset: calc(16 * var(--pt));
  overflow: hidden;
  isolation: isolate;
  background: var(--acrylic-record-cover);
  box-shadow:
    0 0 0 calc(2.4 * var(--pt)) rgba(25, 25, 27, 0.84),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.14) inset;
}

.widget-acrylic-record-small__cover-fill {
  background: var(--acrylic-record-cover);
}

.widget-acrylic-record-small__spindle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(7 * var(--pt));
  height: calc(7 * var(--pt));
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #d0ccc7 36%, #9a948c 100%);
  box-shadow: 0 0 0 calc(1.5 * var(--pt)) rgba(255, 255, 255, 0.22);
}

.widget-preview-widget .widget-acrylic-record-small {
  box-shadow:
    0 calc(10 * var(--pt)) calc(18 * var(--pt)) rgba(18, 19, 22, 0.09),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.84) inset;
}

/* Shared widget surface normalization */

.widget-y2k-music.is-transparent-frame .widget-y2k-music__frame,
.widget-music-pair.is-transparent-frame .widget-music-pair__frame,
.widget-mood-board.is-transparent-frame .widget-mood-board__frame,
.widget-ins-profile.is-transparent-frame .widget-ins-profile__card-frame,
.widget-turntable.is-transparent-frame .widget-turntable__frame,
.widget-acrylic-record-small.is-transparent-frame .widget-acrylic-record-small__frame {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(246, 244, 241, 0.76) 100%);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 calc(10 * var(--pt)) calc(24 * var(--pt)) rgba(20, 20, 24, 0.08),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.54) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(165, 160, 154, 0.04) inset;
  opacity: var(--widget-frame-opacity);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-y2k-music.has-background:not(.has-solid-background) .widget-y2k-music__frame,
.widget-music-pair.has-background:not(.has-solid-background) .widget-music-pair__frame,
.widget-mood-board.has-background:not(.has-solid-background) .widget-mood-board__frame,
.widget-ins-profile.has-background:not(.has-solid-background) .widget-ins-profile__card-frame,
.widget-turntable.has-background:not(.has-solid-background) .widget-turntable__frame,
.widget-acrylic-record-small.has-background:not(.has-solid-background) .widget-acrylic-record-small__frame {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(245, 243, 240, 0.05) 100%);
  border-color: rgba(255, 255, 255, 0.46);
  box-shadow:
    0 calc(10 * var(--pt)) calc(24 * var(--pt)) rgba(20, 20, 24, 0.08),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.18) inset;
  opacity: var(--widget-frame-opacity);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-y2k-music.has-solid-background .widget-y2k-music__frame,
.widget-music-pair.has-solid-background .widget-music-pair__frame,
.widget-mood-board.has-solid-background .widget-mood-board__frame,
.widget-ins-profile.has-solid-background .widget-ins-profile__card-frame,
.widget-turntable.has-solid-background .widget-turntable__frame,
.widget-acrylic-record-small.has-solid-background .widget-acrylic-record-small__frame {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(250, 249, 247, 0.14) 100%);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 calc(10 * var(--pt)) calc(24 * var(--pt)) rgba(20, 20, 24, 0.09),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.28) inset;
  opacity: var(--widget-frame-opacity);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-y2k-music.is-glass .widget-y2k-music__frame,
.widget-music-pair.is-glass .widget-music-pair__frame,
.widget-mood-board.is-glass .widget-mood-board__frame,
.widget-ins-profile.is-glass .widget-ins-profile__card-frame,
.widget-turntable.is-glass .widget-turntable__frame,
.widget-acrylic-record-small.is-glass .widget-acrylic-record-small__frame {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-overlay-top-alpha) * var(--widget-glass-shell-strength))) 0%, rgba(243, 245, 248, calc(var(--widget-glass-overlay-bottom-alpha) * var(--widget-glass-shell-strength))) 100%);
  border-color: rgba(255, 255, 255, calc(var(--widget-glass-border-alpha) * var(--widget-glass-shell-strength)));
  box-shadow:
    0 calc(12 * var(--pt)) calc(26 * var(--pt)) rgba(20, 20, 24, calc(var(--widget-glass-shadow-alpha) * var(--widget-glass-shell-strength))),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, calc(var(--widget-glass-inset-alpha) * var(--widget-glass-shell-strength))) inset;
  opacity: 1;
  backdrop-filter: blur(var(--widget-glass-blur)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
  -webkit-backdrop-filter: blur(var(--widget-glass-blur)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
}

.widget-y2k-music.is-glass .widget-y2k-music__frame::before,
.widget-music-pair.is-glass .widget-music-pair__frame::before,
.widget-mood-board.is-glass .widget-mood-board__frame::before,
.widget-ins-profile.is-glass .widget-ins-profile__card-frame::before,
.widget-turntable.is-glass .widget-turntable__frame::before,
.widget-acrylic-record-small.is-glass .widget-acrylic-record-small__frame::before,
.widget-y2k-music.is-glass .widget-y2k-music__frame::after,
.widget-music-pair.is-glass .widget-music-pair__frame::after,
.widget-mood-board.is-glass .widget-mood-board__frame::after,
.widget-ins-profile.is-glass .widget-ins-profile__card-frame::after,
.widget-turntable.is-glass .widget-turntable__frame::after,
.widget-acrylic-record-small.is-glass .widget-acrylic-record-small__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.widget-y2k-music.is-glass .widget-y2k-music__frame::before,
.widget-music-pair.is-glass .widget-music-pair__frame::before,
.widget-mood-board.is-glass .widget-mood-board__frame::before,
.widget-ins-profile.is-glass .widget-ins-profile__card-frame::before,
.widget-turntable.is-glass .widget-turntable__frame::before,
.widget-acrylic-record-small.is-glass .widget-acrylic-record-small__frame::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, var(--widget-glass-specular-alpha)) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-specular-alpha) * 0.58)) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, calc(var(--widget-glass-specular-alpha) * 0.24)) 100%);
  opacity: calc(0.92 * var(--widget-glass-shell-strength));
}

.widget-y2k-music.is-glass .widget-y2k-music__frame::after,
.widget-music-pair.is-glass .widget-music-pair__frame::after,
.widget-mood-board.is-glass .widget-mood-board__frame::after,
.widget-ins-profile.is-glass .widget-ins-profile__card-frame::after,
.widget-turntable.is-glass .widget-turntable__frame::after,
.widget-acrylic-record-small.is-glass .widget-acrylic-record-small__frame::after {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.86) 0 calc(0.45 * var(--pt)), transparent calc(0.75 * var(--pt))),
    radial-gradient(circle, rgba(196, 204, 214, 0.72) 0 calc(0.55 * var(--pt)), transparent calc(0.9 * var(--pt)));
  background-size: calc(14 * var(--pt)) calc(14 * var(--pt)), calc(21 * var(--pt)) calc(21 * var(--pt));
  background-position: 0 0, calc(7 * var(--pt)) calc(11 * var(--pt));
  mix-blend-mode: soft-light;
  opacity: calc(var(--widget-glass-grain-opacity) * var(--widget-glass-shell-strength));
}

.widget-y2k-music.is-glass.has-background .widget-y2k-music__frame,
.widget-y2k-music.is-glass.has-solid-background .widget-y2k-music__frame,
.widget-music-pair.is-glass.has-background .widget-music-pair__frame,
.widget-music-pair.is-glass.has-solid-background .widget-music-pair__frame,
.widget-mood-board.is-glass.has-background .widget-mood-board__frame,
.widget-mood-board.is-glass.has-solid-background .widget-mood-board__frame,
.widget-ins-profile.is-glass.has-background .widget-ins-profile__card-frame,
.widget-ins-profile.is-glass.has-solid-background .widget-ins-profile__card-frame,
.widget-turntable.is-glass.has-background .widget-turntable__frame,
.widget-turntable.is-glass.has-solid-background .widget-turntable__frame,
.widget-acrylic-record-small.is-glass.has-background .widget-acrylic-record-small__frame,
.widget-acrylic-record-small.is-glass.has-solid-background .widget-acrylic-record-small__frame {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-overlay-top-alpha) * 0.72 * var(--widget-glass-shell-strength))) 0%, rgba(243, 245, 248, calc(var(--widget-glass-overlay-bottom-alpha) * 0.72 * var(--widget-glass-shell-strength))) 100%);
  border-color: rgba(255, 255, 255, calc(var(--widget-glass-border-alpha) * 0.86 * var(--widget-glass-shell-strength)));
  box-shadow:
    0 calc(12 * var(--pt)) calc(26 * var(--pt)) rgba(20, 20, 24, calc(var(--widget-glass-shadow-alpha) * 0.88 * var(--widget-glass-shell-strength))),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, calc(var(--widget-glass-inset-alpha) * 0.82 * var(--widget-glass-shell-strength))) inset;
  opacity: 1;
}

.widget-turntable.has-background:not(.has-solid-background) .widget-turntable__base,
.widget-turntable.is-glass .widget-turntable__base {
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.widget-y2k-music.is-clean-frame::before,
.widget-music-pair.is-clean-frame::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 32%, transparent 76%, rgba(214, 214, 217, 0.08) 100%);
  opacity: calc(var(--widget-frame-opacity) * 0.18);
}

.widget-y2k-music.is-glass.is-clean-frame::before,
.widget-music-pair.is-glass.is-clean-frame::before {
  background: none;
  opacity: 0;
}

.widget-y2k-music.is-clean-frame::after {
  opacity: 0.08;
}

.widget-y2k-music.is-glass.is-clean-frame::after {
  opacity: 0;
}

.widget-music-pair.is-clean-frame .widget-music-pair__grain--outer {
  opacity: 0.03;
}

.widget-music-pair.is-glass .widget-music-pair__grain--outer {
  opacity: 0;
}

.widget-y2k-music.is-glass .widget-y2k-music__panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-overlay-top-alpha) * 1.08)) 0%, rgba(243, 245, 248, calc(var(--widget-glass-overlay-bottom-alpha) * 1.08)) 100%);
  border-color: rgba(255, 255, 255, calc(var(--widget-glass-border-alpha) * 1.02));
  box-shadow:
    0 calc(8 * var(--pt)) calc(20 * var(--pt)) rgba(23, 22, 20, calc(var(--widget-glass-shadow-alpha) * 0.86)),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, calc(var(--widget-glass-inset-alpha) * 1.12)) inset;
  backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.72)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
  -webkit-backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.72)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
}

.widget-y2k-music.is-glass .widget-y2k-music__frame,
.widget-music-pair.is-glass .widget-music-pair__frame {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-overlay-top-alpha) * 0.3)) 0%, rgba(243, 245, 248, calc(var(--widget-glass-overlay-bottom-alpha) * 0.28)) 100%);
  border-color: rgba(255, 255, 255, calc(var(--widget-glass-border-alpha) * 1.04));
  box-shadow:
    0 calc(12 * var(--pt)) calc(26 * var(--pt)) rgba(20, 20, 24, calc(var(--widget-glass-shadow-alpha) * 0.54)),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, calc(var(--widget-glass-inset-alpha) * 0.96)) inset;
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.widget-y2k-music.is-glass .widget-y2k-music__backdrop,
.widget-music-pair.is-glass .widget-music-pair__background {
  isolation: isolate;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-overlay-top-alpha) * 0.94)) 0%, rgba(243, 245, 248, calc(var(--widget-glass-overlay-bottom-alpha) * 0.92)) 100%);
  box-shadow: 0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, calc(var(--widget-glass-inset-alpha) * 0.72)) inset;
  backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.84)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
  -webkit-backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.84)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
}

.widget-y2k-music.is-glass .widget-y2k-music__backdrop::before,
.widget-music-pair.is-glass .widget-music-pair__background::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 calc(0.45 * var(--pt)), transparent calc(0.75 * var(--pt))),
    radial-gradient(circle, rgba(196, 204, 214, 0.74) 0 calc(0.55 * var(--pt)), transparent calc(0.9 * var(--pt)));
  background-size: calc(14 * var(--pt)) calc(14 * var(--pt)), calc(21 * var(--pt)) calc(21 * var(--pt));
  background-position: 0 0, calc(7 * var(--pt)) calc(11 * var(--pt));
  mix-blend-mode: soft-light;
  opacity: calc(var(--widget-glass-grain-opacity) * 0.92);
}

.widget-y2k-music.is-glass .widget-y2k-music__backdrop::after,
.widget-music-pair.is-glass .widget-music-pair__background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-overlay-top-alpha) * 1.18)) 0%, rgba(243, 245, 248, calc(var(--widget-glass-overlay-bottom-alpha) * 1.18)) 100%);
  opacity: calc(0.46 + (var(--widget-glass-shell-strength) * 0.18));
}

.widget-turntable.is-glass .widget-turntable__base {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--widget-glass-overlay-top-alpha) * 0.94)) 0%, rgba(243, 245, 248, calc(var(--widget-glass-overlay-bottom-alpha) * 0.9)) 100%);
  box-shadow:
    0 calc(12 * var(--pt)) calc(26 * var(--pt)) rgba(20, 20, 24, calc(var(--widget-glass-shadow-alpha) * 0.62)),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, calc(var(--widget-glass-inset-alpha) * 0.86)) inset;
  backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.82)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
  -webkit-backdrop-filter: blur(calc(var(--widget-glass-blur) * 0.82)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
}

.widget-y2k-music.is-glass .widget-y2k-music__backdrop-image,
.widget-y2k-music.is-glass .widget-y2k-music__backdrop-solid,
.widget-music-pair.is-glass .widget-music-pair__background-image,
.widget-music-pair.is-glass .widget-music-pair__background-solid {
  filter: blur(calc(var(--widget-glass-blur) * 0.68)) saturate(var(--widget-glass-saturate)) brightness(var(--widget-glass-brightness));
  transform: scale(1.08);
  transform-origin: center;
}

.widget-mood-board.is-glass::before {
  opacity: 0;
}

.widget-mood-board::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 32%, transparent 72%, rgba(213, 208, 198, 0.06) 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12), transparent 46%);
}

.widget-mood-board.is-transparent-frame::before {
  opacity: calc(var(--widget-frame-opacity) * 0.16);
}

.widget-mood-board.has-background::before,
.widget-mood-board.has-solid-background::before {
  opacity: calc(var(--widget-frame-opacity) * 0.06);
}

.widget-preview-widget .widget-turntable {
  border-radius: calc(32 * var(--pt));
}

.widget-small-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(28 * var(--pt));
  box-shadow:
    0 calc(16 * var(--pt)) calc(30 * var(--pt)) rgba(15, 18, 27, 0.16);
  color: #8d796a;
}

.widget-small-photo__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
}

.widget-small-photo__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, #f3e6dc, #f7f1eb);
}

.widget-small-photo.has-image .widget-small-photo__media {
  background: transparent;
}

.widget-small-photo__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-small-photo__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: calc(6 * var(--pt));
  align-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

.widget-small-photo__placeholder-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(34 * var(--pt));
  height: calc(34 * var(--pt));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  font-size: calc(22 * var(--pt));
  line-height: 1;
  font-weight: 300;
  box-shadow: 0 calc(8 * var(--pt)) calc(18 * var(--pt)) rgba(119, 96, 75, 0.08);
}

.widget-small-photo__placeholder-label {
  font-family:
    "Inter",
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
  font-size: calc(10.6 * var(--pt));
  line-height: 1;
  letter-spacing: 0.02em;
  color: #9a8677;
}

.widget-small-photo.has-image .widget-small-photo__placeholder {
  display: none;
}

.widget-small-photo-sheet-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
}

.widget-small-photo-sheet-preview__shell {
  position: absolute;
  inset: calc(10 * var(--pt));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(26 * var(--pt));
  box-shadow:
    0 calc(10 * var(--pt)) calc(22 * var(--pt)) rgba(15, 23, 42, 0.1),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.7) inset;
}

.widget-small-photo-sheet-preview__shell--filled {
  background: transparent;
}

.widget-small-photo-sheet-preview__shell--empty {
  border: calc(1 * var(--pt)) solid rgba(224, 215, 205, 0.9);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 242, 231, 0.56), transparent 28%),
    radial-gradient(circle at 50% 72%, rgba(255, 237, 222, 0.22), transparent 34%),
    rgba(255, 255, 255, 0.22);
}

.widget-small-photo-sheet-preview__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-small-photo-sheet-preview__empty-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 calc(8 * var(--pt)) calc(16 * var(--pt)) rgba(160, 124, 93, 0.12),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.82) inset;
}

.widget-small-photo-sheet-preview__empty-plus {
  font-size: calc(24 * var(--pt));
  line-height: 1;
  font-weight: 300;
  color: rgba(140, 116, 96, 0.92);
}

.widget-small-photo-sheet-preview__empty-label {
  position: relative;
  z-index: 1;
  margin-top: calc(58 * var(--pt));
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
  font-size: calc(12 * var(--pt));
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(150, 124, 104, 0.92);
}

.widget-ins-photo-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(28 * var(--pt));
  color: #6e6158;
  font-family:
    "Inter",
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
  pointer-events: auto;
}

.widget-ins-photo-panel__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.94), transparent 26%),
    linear-gradient(180deg, rgba(251, 250, 247, 0.99) 0%, rgba(242, 238, 232, 0.99) 100%);
  border: calc(0.7 * var(--pt)) solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 calc(16 * var(--pt)) calc(30 * var(--pt)) rgba(15, 18, 27, 0.17),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.88) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(177, 163, 148, 0.14) inset;
}

.widget-ins-photo-panel__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: calc(68 * var(--pt)) minmax(0, 1fr);
  gap: calc(8 * var(--pt));
  height: 100%;
  padding: calc(11 * var(--pt));
}

.widget-ins-photo-panel__header,
.widget-ins-photo-panel__gallery {
  border-radius: calc(22 * var(--pt));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 250, 246, 0.94));
  box-shadow:
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.82) inset,
    0 calc(10 * var(--pt)) calc(18 * var(--pt)) rgba(88, 73, 59, 0.08);
}

.widget-ins-photo-panel__header {
  display: grid;
  grid-template-columns: calc(48 * var(--pt)) minmax(0, 1fr) calc(28 * var(--pt));
  align-items: center;
  gap: calc(10 * var(--pt));
  padding: calc(10 * var(--pt)) calc(13 * var(--pt));
}

.widget-ins-photo-panel__avatar-button,
.widget-ins-photo-panel__photo-button,
.widget-ins-photo-panel__title,
.widget-ins-photo-panel__subtitle {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.widget-ins-photo-panel__avatar-button,
.widget-ins-photo-panel__photo-button {
  cursor: pointer;
}

.widget-ins-photo-panel__avatar-shell,
.widget-ins-photo-panel__photo-shell {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(16 * var(--pt));
  background: linear-gradient(180deg, #efe2d6, #fbf5ef);
  box-shadow:
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.76) inset,
    0 calc(8 * var(--pt)) calc(18 * var(--pt)) rgba(112, 91, 71, 0.14);
}

.widget-ins-photo-panel__avatar-shell {
  width: calc(48 * var(--pt));
  height: calc(48 * var(--pt));
  border-radius: calc(15 * var(--pt));
}

.widget-ins-photo-panel__avatar-image,
.widget-ins-photo-panel__photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-ins-photo-panel__copy {
  display: grid;
  gap: calc(2 * var(--pt));
  min-width: 0;
  align-content: center;
}

.widget-ins-photo-panel__title,
.widget-ins-photo-panel__subtitle {
  display: block;
  width: 100%;
  cursor: pointer;
}

.widget-ins-photo-panel__title {
  font-family: "Lora", "Noto Serif SC", serif;
  font-size: calc(18 * var(--pt));
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #8b7469;
  white-space: nowrap;
}

.widget-ins-photo-panel__subtitle {
  font-size: calc(8.8 * var(--pt));
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #8c827b;
  white-space: nowrap;
}

.widget-ins-photo-panel__title > span,
.widget-ins-photo-panel__subtitle > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-ins-photo-panel__status {
  width: calc(26 * var(--pt));
  height: calc(16 * var(--pt));
  color: #9a847a;
  opacity: 0.96;
  justify-self: end;
  align-self: center;
}

.widget-ins-photo-panel__status svg {
  display: block;
  width: 100%;
  height: 100%;
}

.widget-ins-photo-panel__gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(8 * var(--pt));
  padding: calc(9 * var(--pt));
}

.widget-ins-photo-panel__photo-button,
.widget-ins-photo-panel__gallery > .widget-ins-photo-panel__photo-static {
  min-width: 0;
}

.widget-ins-photo-panel__photo-shell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: calc(16 * var(--pt));
}

.widget-ins-photo-panel__avatar-shell.is-empty {
  background: linear-gradient(180deg, #f2dfd2, #fbf5ef);
}

.widget-ins-photo-panel__photo-shell.is-empty {
  background: linear-gradient(180deg, #f3e3d7, #fbf7f2);
}

.widget-ins-photo-panel__photo-shell--photo1Url.is-empty {
  background: linear-gradient(180deg, #f1dfd2, #faf5ef);
}

.widget-ins-photo-panel__photo-shell--photo2Url.is-empty {
  background: linear-gradient(180deg, #efe2d6, #fbf8f3);
}

.widget-ins-photo-panel__photo-shell--photo3Url.is-empty {
  background: linear-gradient(180deg, #f5ebe3, #fbf8f4);
}

.widget-ins-photo-panel__photo-shell--photo4Url.is-empty {
  background: linear-gradient(180deg, #f0dfd1, #fbf7f2);
}

.widget-ins-photo-panel--small .widget-ins-photo-panel__layout {
  grid-template-rows: calc(72 * var(--pt)) minmax(0, 1fr);
  gap: calc(8 * var(--pt));
  padding: calc(12 * var(--pt));
}

.widget-ins-photo-panel--small .widget-ins-photo-panel__header {
  grid-template-columns: calc(48 * var(--pt)) minmax(0, 1fr);
  gap: calc(8 * var(--pt));
  padding: calc(10 * var(--pt)) calc(12 * var(--pt));
  min-height: 0;
  align-items: start;
}

.widget-ins-photo-panel--small .widget-ins-photo-panel__avatar-shell {
  width: calc(48 * var(--pt));
  height: calc(48 * var(--pt));
  border-radius: calc(15 * var(--pt));
}

.widget-ins-photo-panel__small-copy {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: calc(5 * var(--pt));
  min-width: 0;
  padding-top: calc(3 * var(--pt));
}

.widget-ins-photo-panel__small-copy.is-battery-hidden {
  align-content: start;
  gap: 0;
  padding-top: calc(8 * var(--pt));
}

.widget-ins-photo-panel__small-title {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.widget-ins-photo-panel__small-title {
  font-family: "Lora", "Noto Serif SC", serif;
  font-size: calc(13.8 * var(--pt));
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #836b60;
  cursor: pointer;
  width: 100%;
}

.widget-ins-photo-panel__small-title > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-ins-photo-panel__small-status-row {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  min-width: 0;
  min-height: calc(14 * var(--pt));
  width: 100%;
}

.widget-ins-photo-panel--small .widget-ins-photo-panel__status {
  width: calc(20 * var(--pt));
  height: calc(12 * var(--pt));
  color: #b2a39a;
  opacity: 0.82;
  flex: 0 0 auto;
}

.widget-ins-photo-panel__power {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(9.2 * var(--pt));
  line-height: 1;
  font-weight: 500;
  color: #b0a39b;
  opacity: 0.86;
  min-width: 0;
}

.widget-ins-photo-panel__gallery--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(9 * var(--pt));
  padding: calc(10 * var(--pt));
}

.widget-ins-photo-panel--small .widget-ins-photo-panel__photo-shell {
  border-radius: calc(16 * var(--pt));
}

.widget-ins-photo-panel__editable,
.widget-ins-photo-panel__avatar-button,
.widget-ins-photo-panel__photo-button,
.widget-ins-photo-panel__small-title {
  transition: opacity 140ms ease, transform 140ms ease;
}

.widget-ins-photo-panel__editable:active,
.widget-ins-photo-panel__avatar-button:active,
.widget-ins-photo-panel__photo-button:active,
.widget-ins-photo-panel__small-title:active {
  opacity: 0.74;
  transform: scale(0.985);
}

#os-root.is-edit-mode .widget-ins-photo-panel__editable,
#os-root.is-edit-mode .widget-ins-photo-panel__avatar-button,
#os-root.is-edit-mode .widget-ins-photo-panel__photo-button,
#os-root.is-edit-mode .widget-ins-photo-panel__small-title {
  cursor: inherit;
}

.spring-widget__remove {
  position: absolute;
  top: calc(4 * var(--pt));
  left: calc(4 * var(--pt));
  z-index: 3;
  width: calc(26 * var(--pt));
  height: calc(26 * var(--pt));
  padding: 0;
  border-radius: 999px;
  border: calc(0.75 * var(--pt)) solid rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)),
    rgba(194, 206, 226, 0.2);
  box-shadow:
    0 calc(8 * var(--pt)) calc(18 * var(--pt)) rgba(28, 45, 74, 0.18),
    0 calc(1 * var(--pt)) calc(1.5 * var(--pt)) rgba(255, 255, 255, 0.44) inset,
    0 calc(-1 * var(--pt)) calc(1.5 * var(--pt)) rgba(255, 255, 255, 0.14) inset;
  backdrop-filter: blur(calc(18 * var(--pt))) saturate(1.28);
  -webkit-backdrop-filter: blur(calc(18 * var(--pt))) saturate(1.28);
  color: rgba(36, 49, 70, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-16%, -16%, 0) scale(0.84);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 160ms ease,
    box-shadow 180ms ease;
}

.spring-widget__remove::before,
.spring-widget__remove::after,
.spring-widget__remove-icon::before,
.spring-widget__remove-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.spring-widget__remove::before {
  inset: calc(1 * var(--pt));
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.12) 42%, transparent 82%);
  opacity: 0.9;
}

.spring-widget__remove::after {
  inset: calc(-1 * var(--pt));
  border-radius: inherit;
  border: calc(0.75 * var(--pt)) solid rgba(255, 255, 255, 0.16);
  opacity: 0.65;
}

.spring-widget__remove-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(9 * var(--pt));
  height: calc(9 * var(--pt));
}

.spring-widget__remove-icon::before,
.spring-widget__remove-icon::after {
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(1.6 * var(--pt));
  border-radius: 999px;
  background: currentColor;
  transform-origin: center center;
  box-shadow: 0 0 calc(6 * var(--pt)) rgba(255, 255, 255, 0.22);
}

.spring-widget__remove-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.spring-widget__remove-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#os-root.is-edit-mode .spring-widget__remove {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-16%, -16%, 0) scale(1);
}

#os-root.is-edit-mode .spring-widget__remove:active {
  transform: translate3d(-16%, -16%, 0) scale(0.92);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14)),
    rgba(207, 217, 234, 0.28);
  box-shadow:
    0 calc(5 * var(--pt)) calc(12 * var(--pt)) rgba(28, 45, 74, 0.16),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.46) inset;
}

.desktop-slot-indicator {
  position: absolute;
  width: var(--icon-hit-width);
  height: var(--springboard-row-height);
  border-radius: calc(20 * var(--pt));
  border: calc(1 * var(--pt)) dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.08) inset;
  opacity: 0;
  transform: scale(0.94);
  transition:
    left 220ms cubic-bezier(0.22, 1, 0.36, 1),
    top 220ms cubic-bezier(0.22, 1, 0.36, 1),
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    height 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 140ms ease,
    background-color 140ms ease;
}

#os-root.is-edit-mode .desktop-slot-indicator {
  opacity: 1;
  transform: scale(1);
}

.desktop-slot-indicator.is-occupied {
  opacity: 0.14;
  border-style: solid;
}

.desktop-slot-indicator.is-source {
  opacity: 0.28;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
}

.desktop-slot-indicator.is-target {
  opacity: 0.98;
  transform: scale(1.02);
  border-style: solid;
  border-color: rgba(117, 196, 255, 0.95);
  background: rgba(68, 149, 255, 0.22);
  box-shadow:
    0 0 0 calc(1 * var(--pt)) rgba(255, 255, 255, 0.16) inset,
    0 calc(10 * var(--pt)) calc(26 * var(--pt)) rgba(22, 73, 160, 0.24);
}

#os-root.is-edit-mode .springboard-page .spring-icon {
  touch-action: none;
  animation: desktop-icon-jiggle 168ms ease-in-out infinite alternate;
  animation-delay: calc(var(--jiggle-order, 0) * -36ms);
}

#os-root.is-edit-mode .springboard-page .spring-widget {
  touch-action: none;
  animation: desktop-icon-jiggle 240ms cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
  animation-delay: calc(var(--jiggle-order, 0) * -36ms);
}

#os-root.is-edit-mode .springboard-page .spring-icon.desktop-reflowing,
#os-root.is-edit-mode .springboard-page .spring-widget.desktop-reflowing {
  animation: none !important;
}

#os-root.is-edit-mode .springboard-page .spring-icon {
  cursor: grab;
}

#os-root.is-edit-mode .springboard-page .spring-icon__tile {
  animation: desktop-icon-bob 520ms ease-in-out infinite alternate;
  animation-delay: calc(var(--jiggle-order, 0) * -52ms);
}

#os-root.is-edit-mode .springboard-page .spring-widget__surface {
  animation: desktop-icon-bob 580ms cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
  animation-delay: calc(var(--jiggle-order, 0) * -52ms);
}

#os-root.is-edit-mode .springboard-page .spring-icon:active,
#os-root.is-edit-mode .springboard-page .spring-widget:active {
  transform: none;
  opacity: 1;
}

.spring-icon.is-drag-source,
.spring-widget.is-drag-source {
  visibility: hidden;
  pointer-events: none;
}

.desktop-dragging {
  position: fixed !important;
  left: 0;
  top: 0;
  margin: 0;
  z-index: 2;
  pointer-events: none;
  animation: none !important;
  pointer-events: none;
  filter: drop-shadow(0 calc(16 * var(--pt)) calc(26 * var(--pt)) rgba(4, 9, 20, 0.34));
  will-change: left, top, transform;
}

.desktop-dragging .spring-icon__tile,
.desktop-dragging .spring-widget__surface {
  animation: none !important;
  transform: scale(1.04);
}

#springboard-page-indicator {
  position: absolute;
  left: 50%;
  bottom: var(--springboard-page-indicator-bottom);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--pt));
  padding: calc(4 * var(--pt)) calc(10 * var(--pt));
  pointer-events: none;
  z-index: 3;
}

.springboard-page-indicator__dot {
  width: calc(6 * var(--pt));
  height: calc(6 * var(--pt));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 calc(8 * var(--pt)) rgba(4, 9, 20, 0.2);
  transition: transform 180ms ease, background-color 180ms ease;
}

.springboard-page-indicator__dot.is-active {
  background: rgba(255, 255, 255, 0.94);
  transform: scale(1.08);
}

#desktop-widget-sheet-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(245, 247, 250, 0.08), rgba(15, 23, 42, 0.18)),
    rgba(15, 23, 42, 0.08);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(calc(4 * var(--pt)));
  -webkit-backdrop-filter: blur(calc(4 * var(--pt)));
  transition: opacity 220ms ease;
  z-index: 5;
}

#desktop-widget-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(18 * var(--pt)) calc(20 * var(--pt)) calc(24 * var(--pt) + var(--safe-bottom));
  border-radius: calc(32 * var(--pt)) calc(32 * var(--pt)) 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7)),
    rgba(248, 248, 250, 0.94);
  border-top: calc(0.5 * var(--pt)) solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 calc(-10 * var(--pt)) calc(30 * var(--pt)) rgba(15, 23, 42, 0.1),
    0 calc(-2 * var(--pt)) calc(8 * var(--pt)) rgba(15, 23, 42, 0.06),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.72) inset;
  backdrop-filter: blur(calc(24 * var(--pt))) saturate(1.12);
  -webkit-backdrop-filter: blur(calc(24 * var(--pt))) saturate(1.12);
  transform: translateY(calc(100% + var(--safe-bottom)));
  opacity: 0;
  pointer-events: none;
  touch-action: pan-y;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
  z-index: 6;
}

.desktop-widget-sheet__grabber {
  width: calc(36 * var(--pt));
  height: calc(5 * var(--pt));
  margin: 0 auto calc(14 * var(--pt));
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
  cursor: grab;
}

.desktop-widget-sheet__header {
  margin-bottom: calc(18 * var(--pt));
  cursor: grab;
}

.desktop-widget-sheet__title {
  font-size: calc(32 * var(--pt));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #111827;
}

.desktop-widget-sheet__content {
  max-height: calc(460 * var(--pt));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  display: grid;
  gap: calc(28 * var(--pt));
}

.widget-sheet-group {
  display: grid;
  gap: calc(14 * var(--pt));
  opacity: 0;
  transform: translateY(calc(10 * var(--pt)));
  transition:
    opacity 220ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.widget-sheet-group__title {
  font-size: calc(19 * var(--pt));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #1f2937;
}

.widget-sheet-group__list {
  display: flex;
  align-items: start;
  justify-content: start;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  padding-inline: calc(2 * var(--pt));
  margin-inline: calc(-2 * var(--pt));
  gap: calc(14 * var(--pt));
  mask-image: linear-gradient(90deg, transparent 0, #000 calc(8 * var(--pt)), #000 calc(100% - calc(8 * var(--pt))), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(8 * var(--pt)), #000 calc(100% - calc(8 * var(--pt))), transparent 100%);
}

.widget-sheet-group__list::-webkit-scrollbar {
  display: none;
}

.widget-sheet-group__list[data-size-key="2x2"] {
  gap: calc(12 * var(--pt));
}

.widget-sheet-group__list[data-size-key="4x2"],
.widget-sheet-group__list[data-size-key="4x4"] {
  gap: calc(14 * var(--pt));
}

.widget-picker-card {
  display: grid;
  justify-items: center;
  gap: calc(8 * var(--pt));
  padding: 0;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.widget-picker-card[data-size-key="2x2"] {
  width: auto;
}

.widget-picker-card[data-size-key="4x2"] {
  width: auto;
}

.widget-picker-card[data-size-key="4x4"] {
  width: auto;
}

.widget-picker-card__preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
  touch-action: manipulation;
  cursor: default;
}

.widget-picker-card[data-size-key="2x2"] .widget-picker-card__preview {
  width: calc(169 * var(--pt));
}

.widget-picker-card[data-size-key="4x2"] .widget-picker-card__preview,
.widget-picker-card[data-size-key="4x4"] .widget-picker-card__preview {
  width: calc(350 * var(--pt));
}

.widget-preview-frame {
  position: relative;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  background: transparent;
  isolation: isolate;
  display: grid;
  place-items: center;
}

.widget-preview-canvas {
  position: relative;
  flex: 0 0 auto;
  background: transparent;
  overflow: hidden;
  filter:
    drop-shadow(0 calc(10 * var(--pt)) calc(18 * var(--pt)) rgba(15, 23, 42, 0.1))
    drop-shadow(0 calc(2 * var(--pt)) calc(6 * var(--pt)) rgba(15, 23, 42, 0.08));
}

.widget-preview-stage {
  position: relative;
  width: calc(var(--widget-preview-canvas-width, 124) * 1px);
  height: calc(var(--widget-preview-canvas-height, 92) * 1px);
  background: transparent;
  transform: scale(var(--widget-preview-scale, 1));
  transform-origin: top left;
  will-change: transform;
}

.widget-preview-stage > * {
  position: absolute;
  inset: 0;
}

.widget-preview-widget {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: transparent;
}

.widget-preview-widget .spring-widget__content {
  position: absolute;
  inset: 0;
  background: transparent;
}

.widget-picker-card__preview * {
  pointer-events: none;
}

.widget-picker-card__preview .spring-widget__surface,
.widget-picker-card__preview .spring-widget__body {
  inset: 0;
}

.widget-preview-frame--2x2 {
  border-radius: calc(22 * var(--pt));
}

.widget-preview-frame--4x2 {
  border-radius: calc(26 * var(--pt));
}

.widget-preview-frame--4x4 {
  border-radius: calc(30 * var(--pt));
}

.widget-preview-frame--2x2 .widget-preview-canvas {
  filter:
    drop-shadow(0 calc(10 * var(--pt)) calc(16 * var(--pt)) rgba(15, 23, 42, 0.1))
    drop-shadow(0 calc(2 * var(--pt)) calc(5 * var(--pt)) rgba(15, 23, 42, 0.08));
}

.widget-preview-frame--4x2 .widget-preview-canvas {
  filter:
    drop-shadow(0 calc(12 * var(--pt)) calc(20 * var(--pt)) rgba(15, 23, 42, 0.1))
    drop-shadow(0 calc(3 * var(--pt)) calc(7 * var(--pt)) rgba(15, 23, 42, 0.08));
}

.widget-preview-frame--4x4 .widget-preview-canvas {
  filter:
    drop-shadow(0 calc(14 * var(--pt)) calc(24 * var(--pt)) rgba(15, 23, 42, 0.1))
    drop-shadow(0 calc(4 * var(--pt)) calc(9 * var(--pt)) rgba(15, 23, 42, 0.08));
}

.widget-picker-card__name {
  width: auto;
  max-width: 100%;
  min-height: calc(22 * var(--pt));
  padding: calc(6 * var(--pt)) calc(10 * var(--pt)) 0;
  font-size: calc(17 * var(--pt));
  line-height: calc(22 * var(--pt));
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
  text-align: center;
  text-wrap: balance;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.widget-picker-card[data-size-key="2x2"] .widget-picker-card__name {
  max-width: calc(156 * var(--pt));
}

.widget-picker-card[data-size-key="4x2"] .widget-picker-card__name,
.widget-picker-card[data-size-key="4x4"] .widget-picker-card__name {
  max-width: calc(320 * var(--pt));
}

#os-root.is-widget-sheet-open #desktop-widget-sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}

#os-root.is-widget-sheet-open #desktop-widget-sheet {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#os-root.is-widget-sheet-open .widget-sheet-group {
  opacity: 1;
  transform: translateY(0);
}

#os-root.is-widget-sheet-open .widget-sheet-group:nth-child(1) {
  transition-delay: 0ms;
}

#os-root.is-widget-sheet-open .widget-sheet-group:nth-child(2) {
  transition-delay: 36ms;
}

#os-root.is-widget-sheet-open .widget-sheet-group:nth-child(3) {
  transition-delay: 72ms;
}

#dock {
  position: absolute;
  left: var(--dock-horizontal-inset);
  right: var(--dock-horizontal-inset);
  bottom: var(--dock-bottom-offset);
  min-height: var(--dock-height);
  padding: var(--dock-padding-block) var(--dock-padding-inline);
  border-radius: var(--dock-radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--glass-bg);
  border: calc(0.5 * var(--pt)) solid var(--glass-border);
  box-shadow:
    0 calc(16 * var(--pt)) calc(36 * var(--pt)) rgba(4, 9, 20, 0.24),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.14) inset;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
}

#dock::before {
  content: "";
  position: absolute;
  left: calc(12 * var(--pt));
  right: calc(12 * var(--pt));
  top: calc(0.5 * var(--pt));
  height: calc(0.5 * var(--pt));
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--glass-highlight), rgba(255, 255, 255, 0));
  opacity: 0.9;
}

#dock .spring-icon {
  width: var(--icon-size);
  margin: 0;
  gap: 0;
}

#dock .spring-icon__label {
  display: none;
}

#home-indicator {
  display: none;
}

#home-indicator-bar {
  width: 100%;
  height: var(--home-indicator-height);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 calc(10 * var(--pt)) rgba(0, 0, 0, 0.12);
}

#os-root.is-placement-mode #desktop-widget-sheet-backdrop,
#os-root.is-placement-mode #desktop-widget-sheet {
  opacity: 0;
  pointer-events: none;
}

#os-root.is-placement-mode #desktop-widget-sheet {
  transform: translateY(calc(100% + var(--safe-bottom)));
}

#os-root.is-app-opening .spring-icon,
#os-root.is-app-opening .spring-widget,
#os-root.is-app-open .spring-icon,
#os-root.is-app-open .spring-widget {
  pointer-events: none;
}

@keyframes desktop-icon-jiggle {
  from {
    transform: rotate(-0.7deg);
  }

  to {
    transform: rotate(0.7deg);
  }
}

@keyframes desktop-icon-bob {
  from {
    transform: translateY(calc(-0.5 * var(--pt)));
  }

  to {
    transform: translateY(calc(0.5 * var(--pt)));
  }
}

#app-viewport {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  overflow: hidden;
  background: transparent;
  opacity: var(--app-opacity);
  transform: translate3d(var(--app-translate-x), var(--app-translate-y), 0) scale(var(--app-scale));
  transform-origin: center center;
  border-radius: var(--app-radius);
  box-shadow: none;
  transition:
    transform var(--os-app-transition-duration) var(--os-app-transition-easing),
    border-radius var(--os-app-transition-duration) var(--os-app-transition-easing),
    opacity var(--os-app-fade-duration) linear;
  will-change: transform, border-radius, opacity;
  contain: layout paint style;
  backface-visibility: hidden;
}

#app-viewport.active {
  display: block;
}

#app-viewport .app-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  opacity: var(--app-content-opacity);
  transform: translate3d(0, var(--app-depth-translate-y), 0) scale(var(--app-depth-scale));
  filter: brightness(var(--app-depth-brightness));
  border-radius: var(--app-radius);
  transition:
    opacity var(--os-app-fade-duration) linear,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms linear;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  #desktop,
  #desktop-scrim,
  #app-viewport,
  #app-viewport .app-content {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.app-root-universal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.app-header-universal {
  flex-shrink: 0;
  padding-top: var(--safe-area-top);
  min-height: var(--header-total-height);
  display: flex;
  align-items: flex-end;
  padding-bottom: 8px;
  box-sizing: border-box;
}

.app-content-universal {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-bottom-bar-universal {
  flex-shrink: 0;
  padding-bottom: var(--safe-area-bottom);
  min-height: var(--bottom-bar-total-height);
}

.safe-header {
  padding-top: var(--safe-area-top) !important;
  min-height: var(--header-total-height);
}

.safe-bottom-fixed {
  padding-bottom: calc(16px + var(--safe-area-bottom)) !important;
}

.safe-content-scroll {
  padding-bottom: calc(80px + var(--safe-area-bottom));
}

.floating-bottom-element {
  position: fixed;
  bottom: calc(1.5rem + var(--safe-area-bottom));
  left: 0;
  right: 0;
}

.safe-horizontal {
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

.widget-editor-app {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.9), transparent 22%),
    linear-gradient(180deg, #f6f2ea 0%, #eee8df 100%);
  color: #3d3938;
}

.widget-editor-header {
  position: relative;
  z-index: 2;
}

.widget-editor-header__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 16px;
}

.widget-editor-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4b4745;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}

.widget-editor-back svg {
  width: 12px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.widget-editor-header__title-group {
  text-align: center;
}

.widget-editor-header__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(83, 79, 77, 0.62);
}

.widget-editor-header__title {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.widget-editor-header__spacer {
  width: 44px;
}

.widget-editor-content {
  padding: 14px 16px calc(28px + var(--safe-area-bottom));
}

.widget-editor-preview-panel,
.widget-editor-form-panel {
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.52);
  box-shadow:
    0 18px 34px rgba(48, 39, 31, 0.08),
    0 1px 1px rgba(255, 255, 255, 0.76) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.widget-editor-preview-panel {
  padding: 18px 16px 16px;
}

.widget-editor-form-panel {
  position: relative;
  margin-top: 14px;
  padding: 18px 16px 20px;
}

.widget-editor-section__eyebrow {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(92, 88, 85, 0.66);
}

.widget-editor-preview-shell {
  display: grid;
  place-items: center;
  padding: 6px 0 4px;
}

.widget-editor-preview-widget {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 175 / 182;
}

.widget-editor-preview-widget--large {
  width: min(100%, 300px);
  aspect-ratio: 1 / 1;
}

.widget-editor-preview-widget--medium-wide {
  width: min(100%, 300px);
  aspect-ratio: 300 / 162;
}

.widget-editor-preview-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(86, 82, 79, 0.72);
}

.widget-editor-restore {
  margin-top: 14px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(170, 146, 118, 0.42);
  border-radius: 16px;
  background: rgba(255, 248, 240, 0.72);
  color: #7c5d43;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.widget-editor-media-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.widget-editor-media-button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label preview"
    "note preview";
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(183, 176, 168, 0.58);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.widget-editor-media-button__thumb {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(230, 225, 216, 0.8)),
    #f6f0e8;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(170, 164, 156, 0.42);
}

.widget-editor-media-button__thumb.is-empty {
  background:
    linear-gradient(180deg, rgba(250, 246, 239, 0.88), rgba(236, 230, 221, 0.92)),
    #f6f0e8;
}

.widget-editor-media-button__preview {
  grid-area: preview;
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  min-width: 60px;
  justify-self: end;
}

.widget-editor-media-button__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.widget-editor-media-button__label {
  grid-area: label;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  color: #474341;
}

.widget-editor-media-button__note,
.widget-editor-media-button__hint {
  grid-area: note;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(88, 83, 80, 0.68);
}

.widget-editor-media-button__actions {
  display: grid;
  gap: 6px;
}

.widget-editor-media-button__action {
  min-width: 56px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(168, 150, 129, 0.4);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.88);
  color: #7b6655;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.widget-editor-media-button__clear {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 28px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(168, 150, 129, 0.28);
  border-radius: 999px;
  background: rgba(255, 251, 246, 0.96);
  color: #7b6655;
  box-shadow: 0 6px 14px rgba(71, 55, 40, 0.08);
  cursor: pointer;
}

.widget-editor-media-button__clear svg {
  width: 14px;
  height: 14px;
  display: block;
  margin: 0 auto;
  fill: currentColor;
}

.widget-editor-media-button__action--ghost {
  background: rgba(255, 255, 255, 0.54);
  color: rgba(117, 92, 72, 0.82);
}

.widget-editor-media-button__clear:disabled,
.widget-editor-media-button__action:disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

.widget-editor-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.widget-editor-segmented__option {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(183, 176, 168, 0.58);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #6f665f;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease,
    transform 160ms ease;
}

.widget-editor-segmented__option.is-active {
  background: rgba(176, 143, 111, 0.16);
  border-color: rgba(159, 124, 97, 0.52);
  color: #7c5d43;
}

.widget-editor-segmented__option:active {
  transform: scale(0.986);
}

.widget-editor-background-card {
  margin-bottom: 18px;
}

.widget-editor-background-empty {
  padding: 14px 16px;
  border: 1px dashed rgba(183, 176, 168, 0.74);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(88, 83, 80, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

.widget-editor-color-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(183, 176, 168, 0.58);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.widget-editor-color-card__preview {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(170, 164, 156, 0.42);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.54) inset,
    0 6px 14px rgba(86, 72, 58, 0.08);
}

.widget-editor-color-card__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.widget-editor-color-card__title {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  color: #474341;
}

.widget-editor-color-card__subtitle {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(88, 83, 80, 0.68);
  word-break: break-all;
}

.widget-editor-color-sliders {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.widget-editor-color-slider {
  display: grid;
  gap: 8px;
}

.widget-editor-color-slider__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.widget-editor-color-slider__label {
  font-size: 14px;
  font-weight: 600;
  color: #4a4543;
}

.widget-editor-color-slider__value {
  font-size: 13px;
  font-weight: 700;
  color: #7a6654;
}

.widget-editor-color-slider__track {
  position: relative;
  display: block;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  touch-action: pan-y;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.72) inset,
    0 1px 3px rgba(75, 61, 50, 0.12);
}

.widget-editor-color-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.widget-editor-color-slider__input::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #8e6f57;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  -webkit-appearance: none;
}

.widget-editor-color-slider__input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #8e6f57;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.widget-editor-color-slider__input::-webkit-slider-runnable-track {
  height: 16px;
  background: transparent;
}

.widget-editor-color-slider__input::-moz-range-track {
  height: 16px;
  background: transparent;
}

.widget-editor-range {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.widget-editor-frame-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 18px;
}

.widget-editor-range__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.widget-editor-range__label,
.widget-editor-switch-row__label {
  font-size: 14px;
  font-weight: 600;
  color: #4a4543;
  white-space: nowrap;
}

.widget-editor-range__value {
  font-size: 13px;
  font-weight: 700;
  color: #7a6654;
  white-space: nowrap;
}

.widget-editor-range__input {
  width: 100%;
  margin: 0;
  accent-color: #9f7c61;
  pointer-events: auto;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.widget-editor-field__range {
  width: 100%;
  margin: 0;
  accent-color: #9f7c61;
  pointer-events: auto;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.widget-editor-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(183, 176, 168, 0.58);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.widget-editor-switch-row__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.widget-editor-switch-row__hint {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(88, 83, 80, 0.68);
}

.widget-editor-glass-panel {
  display: grid;
  gap: 12px;
  margin-top: -4px;
  padding: 14px;
  border: 1px solid rgba(205, 195, 182, 0.56);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 245, 240, 0.72) 100%);
  box-shadow:
    0 12px 24px rgba(78, 61, 43, 0.06),
    0 1px 1px rgba(255, 255, 255, 0.84) inset;
}

.widget-editor-glass-panel__header {
  display: grid;
  gap: 4px;
}

.widget-editor-glass-panel__title {
  font-size: 13px;
  font-weight: 700;
  color: #53473f;
  letter-spacing: -0.01em;
}

.widget-editor-glass-panel__hint {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(92, 82, 74, 0.72);
}

.widget-editor-range--compact {
  margin-bottom: 0;
}

.widget-editor-switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: rgba(197, 191, 184, 0.9);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background 160ms ease;
}

.widget-editor-switch.is-on {
  background: #b38f6f;
}

.widget-editor-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition: transform 160ms ease;
}

.widget-editor-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition: transform 160ms ease;
}

.widget-editor-switch.is-on .widget-editor-switch__knob {
  transform: translateX(20px);
}

.widget-editor-switch.is-on .widget-editor-switch__thumb {
  transform: translateX(20px);
}

.widget-editor-field {
  display: grid;
  gap: 8px;
}

.widget-editor-field__control {
  position: relative;
}

.widget-editor-field + .widget-editor-field {
  margin-top: 14px;
}

.widget-editor-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.widget-editor-field-row .widget-editor-field + .widget-editor-field {
  margin-top: 0;
}

.widget-editor-field-row--color {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.widget-editor-field__label {
  font-size: 14px;
  font-weight: 600;
  color: #4a4543;
}

.widget-editor-field__input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(182, 176, 168, 0.6);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  color: #312d2c;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}

.widget-editor-field__input--with-tone {
  padding-right: 56px;
}

.widget-editor-field--color .widget-editor-field__input {
  min-height: 72px;
  padding: 8px;
  border-radius: 22px;
  cursor: pointer;
}

.widget-editor-field--color .widget-editor-tone-picker {
  position: static;
  transform: none;
}

.widget-editor-field--color .widget-editor-field__input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.widget-editor-field--color .widget-editor-field__input::-webkit-color-swatch {
  border: 1px solid rgba(120, 107, 94, 0.16);
  border-radius: 14px;
}

.widget-editor-field--color .widget-editor-field__input::-moz-color-swatch {
  border: 1px solid rgba(120, 107, 94, 0.16);
  border-radius: 14px;
}

.widget-editor-field__textarea {
  min-height: 104px;
  padding: 12px 14px;
  line-height: 1.45;
  resize: vertical;
  font-family: inherit;
}

.widget-editor-tone-picker {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  transform: translateY(-50%);
}

.widget-editor-tone-picker--block {
  width: 100%;
}

.widget-editor-tone-picker__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(182, 176, 168, 0.6);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 8px 18px rgba(53, 43, 34, 0.08),
    0 1px 1px rgba(255, 255, 255, 0.8) inset;
  cursor: pointer;
}

.widget-editor-tone-picker__button--block {
  width: 100%;
  height: 72px;
  justify-content: flex-start;
  padding: 8px;
  border-radius: 22px;
}

.widget-editor-tone-picker__button-swatch {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.3) inset,
    0 0 0 1px rgba(83, 74, 66, 0.12);
}

.widget-editor-tone-picker__button-swatch--block {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

.widget-editor-tone-picker__native-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.widget-editor-tone-flyout {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, 18px);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(197, 188, 177, 0.68);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 18px 34px rgba(43, 35, 28, 0.16),
    0 1px 1px rgba(255, 255, 255, 0.84) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 8;
}

.widget-editor-tone-flyout[hidden] {
  display: none;
}

.widget-editor-tone-flyout__option {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--tone-swatch-color);
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(82, 73, 66, 0.16);
  cursor: pointer;
}

.widget-editor-tone-flyout__option.is-active {
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.28) inset,
    0 0 0 2px rgba(171, 138, 102, 0.74);
}

.widget-editor-field__input:focus {
  border-color: rgba(129, 109, 90, 0.72);
  box-shadow: 0 0 0 3px rgba(156, 132, 108, 0.12);
}

.widget-editor-frame-controls .widget-editor-range,
.widget-editor-frame-controls .widget-editor-switch-row {
  min-width: 0;
  margin-bottom: 0;
}

@media (min-width: 460px) {
  .widget-editor-frame-controls {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.88fr);
    align-items: end;
  }

  .widget-editor-field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes widget-quest-todo-shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes widget-quest-todo-pulse {
  0%,
  100% {
    opacity: 0.58;
  }
  50% {
    opacity: 1;
  }
}

.widget-quest-todo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(28 * var(--pt));
  color: #1f2b21;
  font-family:
    "Manrope",
    "SF Pro Text",
    "PingFang SC",
    "Helvetica Neue",
    sans-serif;
  background: transparent;
}

.widget-quest-todo button {
  font: inherit;
  color: inherit;
}

.widget-quest-todo__frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.92), transparent 22%),
    linear-gradient(180deg, rgba(249, 244, 235, 0.99) 0%, rgba(242, 236, 227, 0.98) 100%);
  border: calc(0.8 * var(--pt)) solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 calc(20 * var(--pt)) calc(34 * var(--pt)) rgba(43, 36, 26, 0.16),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.92) inset,
    0 calc(-1 * var(--pt)) calc(1 * var(--pt)) rgba(162, 150, 132, 0.12) inset;
}

.widget-quest-todo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 18%, rgba(214, 230, 207, 0.44), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 34%, rgba(209, 199, 183, 0.14) 100%);
}

.widget-quest-todo__grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(138, 128, 115, 0.3) 0 calc(0.8 * var(--pt)), transparent calc(0.8 * var(--pt))),
    radial-gradient(circle, rgba(255, 255, 255, 0.46) 0 calc(0.6 * var(--pt)), transparent calc(0.6 * var(--pt)));
  background-size: calc(16 * var(--pt)) calc(16 * var(--pt)), calc(28 * var(--pt)) calc(28 * var(--pt));
  background-position: 0 0, calc(7 * var(--pt)) calc(9 * var(--pt));
}

.widget-quest-todo__body {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: calc(8 * var(--pt));
  padding: calc(14 * var(--pt));
}

.widget-quest-todo__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(10 * var(--pt));
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.widget-quest-todo__heading {
  min-width: 0;
}

.widget-quest-todo__eyebrow {
  display: block;
  font-size: calc(8.2 * var(--pt));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7f7a6f;
}

.widget-quest-todo__title {
  display: block;
  margin-top: calc(3 * var(--pt));
  font-family:
    "Newsreader",
    "Noto Serif SC",
    serif;
  font-size: calc(16 * var(--pt));
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #182114;
}

.widget-quest-todo__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(24 * var(--pt));
  min-height: calc(20 * var(--pt));
  padding: 0 calc(7 * var(--pt));
  border-radius: 999px;
  background: rgba(84, 123, 93, 0.14);
  color: #35553f;
  font-size: calc(9.2 * var(--pt));
  font-weight: 800;
  letter-spacing: -0.02em;
}

.widget-quest-todo__subtitle,
.widget-quest-todo__status {
  font-size: calc(8.5 * var(--pt));
  line-height: 1.22;
  color: #6c7468;
}

.widget-quest-todo__list {
  display: grid;
  align-content: start;
  gap: calc(8 * var(--pt));
  min-height: 0;
}

.widget-quest-todo__item {
  position: relative;
  display: grid;
  grid-template-columns: calc(24 * var(--pt)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(9 * var(--pt));
  min-height: calc(48 * var(--pt));
  padding: calc(10 * var(--pt)) calc(11 * var(--pt));
  border-radius: calc(18 * var(--pt));
  background: rgba(248, 251, 246, 0.96);
  border: calc(0.8 * var(--pt)) solid rgba(84, 123, 93, 0.12);
  box-shadow:
    0 calc(6 * var(--pt)) calc(14 * var(--pt)) rgba(83, 72, 52, 0.08),
    0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.76) inset;
}

.widget-quest-todo__item.is-today {
  border-color: rgba(84, 123, 93, 0.26);
  background: rgba(245, 250, 241, 0.98);
}

.widget-quest-todo__item.is-busy {
  opacity: 0.78;
}

.widget-quest-todo__check {
  position: relative;
  width: calc(24 * var(--pt));
  height: calc(24 * var(--pt));
  padding: 0;
  border: calc(1.4 * var(--pt)) solid rgba(84, 123, 93, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgba(255, 255, 255, 0.9) inset;
  cursor: pointer;
}

.widget-quest-todo__check:disabled {
  cursor: default;
}

.widget-quest-todo__check-icon {
  position: absolute;
  inset: calc(4 * var(--pt));
  width: auto;
  height: auto;
}

.widget-quest-todo__check-icon path {
  fill: none;
  stroke: #547b5d;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.widget-quest-todo__check.is-busy {
  animation: widget-quest-todo-pulse 900ms ease-in-out infinite;
}

.widget-quest-todo__item-main {
  display: grid;
  gap: calc(3 * var(--pt));
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.widget-quest-todo__item-main strong,
.widget-quest-todo__item-main span {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-quest-todo__item-main strong {
  font-size: calc(10.6 * var(--pt));
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #203124;
}

.widget-quest-todo__item-main span {
  font-size: calc(8.2 * var(--pt));
  line-height: 1.2;
  color: #708070;
}

.widget-quest-todo__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(30 * var(--pt));
  min-height: calc(18 * var(--pt));
  padding: 0 calc(6 * var(--pt));
  border-radius: 999px;
  background: rgba(84, 123, 93, 0.1);
  color: #46664f;
  font-size: calc(7.8 * var(--pt));
  font-weight: 800;
  letter-spacing: -0.01em;
}

.widget-quest-todo__pill.is-reward {
  background: rgba(206, 164, 79, 0.14);
  color: #8a6230;
}

.widget-quest-todo__pill.is-badge-only {
  min-width: calc(24 * var(--pt));
  background: rgba(84, 123, 93, 0.12);
  color: #547b5d;
}

.widget-quest-todo__item.is-no-pill {
  grid-template-columns: calc(24 * var(--pt)) minmax(0, 1fr);
}

.widget-quest-todo__item.is-no-pill .widget-quest-todo__item-main {
  gap: calc(4 * var(--pt));
}

.widget-quest-todo__item.is-no-pill .widget-quest-todo__item-main strong {
  font-size: calc(11 * var(--pt));
}

.widget-quest-todo__body.widget-quest-todo__body--small-balanced {
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(10 * var(--pt));
  padding: calc(14 * var(--pt));
}

.widget-quest-todo__body--small-balanced .widget-quest-todo__header {
  align-items: end;
}

.widget-quest-todo__body--small-balanced .widget-quest-todo__title {
  margin-top: calc(2 * var(--pt));
}

.widget-quest-todo__body--small-balanced .widget-quest-todo__list {
  align-content: center;
  gap: calc(10 * var(--pt));
}

.widget-quest-todo__body--small-balanced .widget-quest-todo__item {
  min-height: calc(52 * var(--pt));
  padding: calc(11 * var(--pt)) calc(12 * var(--pt));
}

.widget-quest-todo__section-title {
  font-family:
    "Newsreader",
    "Noto Serif SC",
    serif;
  font-size: calc(16 * var(--pt));
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #182114;
}

.widget-quest-todo__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--pt));
}

.widget-quest-todo__empty {
  display: grid;
  justify-items: start;
  gap: calc(6 * var(--pt));
  padding: calc(8 * var(--pt)) 0 0;
}

.widget-quest-todo__empty strong {
  font-size: calc(11 * var(--pt));
  line-height: 1.2;
  color: #213022;
}

.widget-quest-todo__empty span {
  font-size: calc(8.8 * var(--pt));
  line-height: 1.35;
  color: #70776c;
}

.widget-quest-todo__empty-open {
  min-height: calc(24 * var(--pt));
  padding: 0 calc(10 * var(--pt));
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #283124, #182114);
  color: #f7f2e8;
  font-size: calc(8.8 * var(--pt));
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.widget-quest-todo__item--skeleton {
  overflow: hidden;
}

.widget-quest-todo__item--skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  animation: widget-quest-todo-shimmer 1400ms ease-in-out infinite;
}

.widget-quest-todo__check--static,
.widget-quest-todo__item--skeleton .widget-quest-todo__item-main strong,
.widget-quest-todo__item--skeleton .widget-quest-todo__item-main span,
.widget-quest-todo__item--skeleton .widget-quest-todo__pill {
  background: rgba(219, 224, 215, 0.78);
  color: transparent;
}

.widget-quest-todo__check--static {
  border-color: transparent;
  box-shadow: none;
}

.widget-quest-todo__item--skeleton .widget-quest-todo__item-main strong,
.widget-quest-todo__item--skeleton .widget-quest-todo__item-main span {
  border-radius: 999px;
  min-height: calc(8 * var(--pt));
}

.widget-quest-todo__item--skeleton .widget-quest-todo__item-main span {
  min-height: calc(6.6 * var(--pt));
}

.widget-quest-todo__item--skeleton .widget-quest-todo__pill {
  min-width: calc(28 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__body {
  gap: calc(6 * var(--pt));
  padding: calc(11 * var(--pt)) calc(12 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__eyebrow {
  font-size: calc(7.2 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__title {
  margin-top: calc(2 * var(--pt));
  font-size: calc(13.8 * var(--pt));
  line-height: 1;
}

.widget-quest-todo--medium .widget-quest-todo__count {
  min-width: calc(22 * var(--pt));
  min-height: calc(18 * var(--pt));
  font-size: calc(8.4 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__subtitle,
.widget-quest-todo--medium .widget-quest-todo__status {
  font-size: calc(7.5 * var(--pt));
  line-height: 1.16;
}

.widget-quest-todo--medium .widget-quest-todo__list {
  gap: calc(5 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__item {
  grid-template-columns: calc(20 * var(--pt)) minmax(0, 1fr) auto;
  gap: calc(8 * var(--pt));
  min-height: calc(34 * var(--pt));
  padding: calc(6 * var(--pt)) calc(9 * var(--pt));
  border-radius: calc(14 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__check {
  width: calc(20 * var(--pt));
  height: calc(20 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__check-icon {
  inset: calc(3.2 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__item-main {
  gap: calc(2 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__item-main strong {
  font-size: calc(8.9 * var(--pt));
  line-height: 1.08;
}

.widget-quest-todo--medium .widget-quest-todo__item-main span {
  font-size: calc(7.1 * var(--pt));
  line-height: 1.14;
}

.widget-quest-todo--medium .widget-quest-todo__pill {
  min-width: calc(24 * var(--pt));
  min-height: calc(14 * var(--pt));
  padding: 0 calc(5 * var(--pt));
  font-size: calc(6.8 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__empty {
  gap: calc(4 * var(--pt));
  padding-top: calc(4 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__empty strong {
  font-size: calc(9.8 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__empty span,
.widget-quest-todo--medium .widget-quest-todo__empty-open {
  font-size: calc(7.6 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__body.widget-quest-todo__body--list-only {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: calc(12 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__body.widget-quest-todo__body--medium-titled {
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(9 * var(--pt));
  padding: calc(12 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__list.widget-quest-todo__list--medium-fill {
  gap: calc(8 * var(--pt));
  height: 100%;
}

.widget-quest-todo--medium .widget-quest-todo__list.widget-quest-todo__list--medium-fill.has-three-items {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.widget-quest-todo--medium .widget-quest-todo__list.widget-quest-todo__list--medium-fill.has-three-items .widget-quest-todo__item {
  min-height: 0;
  height: 100%;
}

.widget-quest-todo--medium .widget-quest-todo__list.widget-quest-todo__list--medium-fill.has-three-items .widget-quest-todo__item-main strong {
  font-size: calc(11.8 * var(--pt));
  line-height: 1.14;
}

.widget-quest-todo--medium .widget-quest-todo__list.widget-quest-todo__list--medium-fill.has-three-items .widget-quest-todo__pill {
  min-width: calc(32 * var(--pt));
  min-height: calc(18 * var(--pt));
  padding: 0 calc(6 * var(--pt));
  font-size: calc(8.2 * var(--pt));
  font-weight: 800;
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__list {
  gap: calc(8 * var(--pt));
  height: 100%;
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__item {
  grid-template-columns: calc(22 * var(--pt)) minmax(0, 1fr) auto;
  gap: calc(9 * var(--pt));
  min-height: calc(42 * var(--pt));
  padding: calc(8 * var(--pt)) calc(10 * var(--pt));
  border-radius: calc(16 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__check {
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__check-icon {
  inset: calc(3.6 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__item-main {
  gap: calc(3 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__item.is-single-line {
  align-items: center;
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__item.is-single-line .widget-quest-todo__item-main {
  display: flex;
  align-items: center;
  min-height: calc(26 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__item-main strong {
  font-size: calc(10.3 * var(--pt));
  line-height: 1.12;
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__item-main span {
  font-size: calc(8 * var(--pt));
  line-height: 1.16;
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__pill {
  min-width: calc(28 * var(--pt));
  min-height: calc(16 * var(--pt));
  font-size: calc(7.2 * var(--pt));
}

.widget-quest-todo--medium .widget-quest-todo__body--list-only .widget-quest-todo__item.is-single-line .widget-quest-todo__item-main strong {
  font-size: calc(10.9 * var(--pt));
  line-height: 1.14;
}

.widget-quest-todo.is-error .widget-quest-todo__frame {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.92), transparent 22%),
    linear-gradient(180deg, rgba(250, 244, 239, 0.99) 0%, rgba(245, 236, 232, 0.98) 100%);
}

.widget-quest-todo.is-error .widget-quest-todo__status {
  color: #8a4b38;
}

.widget-quest-todo__header:active,
.widget-quest-todo__item-main:active,
.widget-quest-todo__check:active,
.widget-quest-todo__empty-open:active {
  opacity: 0.84;
}

.widget-preview-widget .widget-quest-todo {
  border-radius: calc(28 * var(--pt));
}
/**
 * ============================================================
 *  line.css — Line 聊天 App 样式表
 * ============================================================
 *  命名空间：所有类名以 .chat-app- 开头
 *  布局：Flexbox 垂直三段式（Header / Content / BottomBar）
 * ============================================================
 */

/* ——————————————————————————————————————————————
 *  z-index 层级系统
 * —————————————————————————————————————————————— */
:root {
  --z-index-backdrop: 100;      /* 背景遮罩层 */
  --z-index-bubble-menu: 200;   /* 气泡菜单 */
  --z-index-modal: 10002;       /* 地理信息模态框 - 提升到堆叠模态框之上 */
  --z-index-stacked-modal: 10001; /* 堆叠模态框 */
  --z-index-toast: 9999;        /* 提示信息 */
}

/* ——————————————————————————————————————————————
 *  根容器：占满 viewport，纯白背景，垂直 Flex
 * —————————————————————————————————————————————— */

.chat-app-root {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  color: #000000;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
}

/* ——————————————————————————————————————————————
 *  顶部功能区 Header
 * —————————————————————————————————————————————— */

.chat-app-header {
  flex-shrink: 0;
  background: #ffffff;
  padding-top: var(--safe-area-top);
  padding-bottom: 0;
}

/* 第一行：Title Bar */
.chat-app-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.chat-app-back-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: #000000;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.chat-app-back-btn svg {
  width: 12px;
  height: 20px;
  flex-shrink: 0;
}

.chat-app-title-center {
  position: absolute;
  left: 60px; /* 靠左对齐，与返回键保持适当距离 */
  top: calc(var(--safe-area-top) + 12px); /* 考虑安全区域偏移 */
  transform: none; /* 移除居中变换 */
  font-size: 17px;
  font-weight: 700;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: -0.2px;
}

.chat-app-title-center .chat-app-dropdown-arrow {
  font-size: 10px;
  color: #8e8e93;
  margin-top: 1px;
}

.chat-app-title-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.chat-app-title-actions button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  color: #000000;
}

.chat-app-title-actions button svg {
  width: 22px;
  height: 22px;
}

/* 收藏按钮样式（功能待开发） */
#btn-favorites {
  color: #8e8e93; /* 灰色表示禁用状态 */
  cursor: not-allowed; /* 禁用鼠标指针 */
  opacity: 0.6; /* 降低透明度表示禁用 */
}

#btn-favorites:active {
  transform: none; /* 禁用点击效果 */
}

/* 第二行：Search Bar */
.chat-app-search-bar {
  padding: 8px 16px;
}

.chat-app-search-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  background: #f2f2f7;
  border-radius: 10px;
  font-size: 15px;
  color: #8e8e93;
  cursor: pointer;
}

.chat-app-search-inner svg {
  width: 16px;
  height: 16px;
  color: #8e8e93;
}

/* 第三行：Sub-Tabs */
.chat-app-sub-tabs {
  display: flex;
  align-items: center;
  padding: 6px 16px 0;
  gap: 0;
  border-bottom: 0.5px solid #e5e5ea;
}

.chat-app-sub-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: #8e8e93;
  cursor: pointer;
  position: relative;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}

.chat-app-sub-tab.active {
  color: #000000;
  font-weight: 600;
}

.chat-app-sub-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2.5px;
  background: #000000;
  border-radius: 2px;
}

/* ——————————————————————————————————————————————
 *  中间列表区：自适应高度 + 垂直滚动
 * —————————————————————————————————————————————— */

#chat-list-container,
#chat-list-container-contacts {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

/* 隐藏滚动条 */
#chat-list-container::-webkit-scrollbar,
#chat-list-container-contacts::-webkit-scrollbar {
  display: none;
}

#chat-list-container,
#chat-list-container-contacts {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ——————————————————————————————————————————————
 *  底部导航条 Bottom Tab Bar
 * —————————————————————————————————————————————— */

.chat-app-bottom-bar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  height: var(--total-bottom-bar-height) !important;
  padding-top: 8px; /* 增加顶部内边距，让图标向下移动 */
  padding-bottom: var(--safe-area-bottom) !important;
  background: #ffffff;
  border-top: 0.5px solid #d1d1d6;
}

/* 覆盖底部导航条基础高度，使其更紧凑 */
.chat-app-root {
  --bottom-bar-base-height: 44px; /* 从56px减少到44px */
}

.chat-app-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px; /* 减少图标和文字之间的间距，从2px改为1px */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-width: 56px;
}

.chat-app-tab svg {
  width: 22px; /* 减小图标尺寸，从24px改为22px */
  height: 22px; /* 减小图标尺寸，从24px改为22px */
  color: #8e8e93;
}

.chat-app-tab span {
  font-size: 9px; /* 减小文字尺寸，从10px改为9px */
  color: #8e8e93;
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* 选中态 */
.chat-app-tab.active svg {
  color: #000000;
}

.chat-app-tab.active span {
  color: #000000;
  font-weight: 600;
}

/* ——————————————————————————————————————————————
 *  设置页面
 * —————————————————————————————————————————————— */

/* 全局背景色：带一点点冷灰蓝，极其高级 */
#settings-container {
    background: #eef2f6;
    padding: 10px 20px; /* 减少顶部内边距，从30px改为10px */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 30;
    pointer-events: auto;
    isolation: isolate;
}

#settings-container::-webkit-scrollbar {
    display: none;
}

#settings-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 悬浮卡片魔法 */
.settings-card {
    /* 微微的渐变底色 */
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%);
    /* 极其圆润的倒角 */
    border-radius: 32px;
    /* 高光描边（玻璃质感核心） */
    border: 1px solid rgba(255, 255, 255, 0.9);
    /* 多层弥散阴影 + 顶部微微的内发光 */
    box-shadow:
        0 20px 40px -10px rgba(180, 195, 215, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    padding: 16px 24px; /* 减少上下内边距，从28px改为16px */
    margin-bottom: 16px; /* 减少底部外边距，从24px改为16px */
}

/* 头像卡片内部微调 */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 头像立体感 - 可点击上传 */
.avatar-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e2e8f0;
    margin-bottom: 16px;
    /* 给头像加一圈白边和浮雕阴影 */
    border: 4px solid #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.avatar-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.temp-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.2s;
}

.avatar-wrapper:hover .temp-avatar {
    opacity: 0.8;
}

/* 头像编辑提示遮罩 */
.avatar-edit-hint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.avatar-wrapper:hover .avatar-edit-hint {
    opacity: 1;
}

.avatar-edit-hint svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 字体的高级感重构 - 可点击编辑 */
.user-name {
    color: #1e293b; /* 深石板灰，比纯黑高级 */
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px; /* 字距微缩，极其现代 */
    margin: 0 0 4px 0;
}

.user-name.editable-field {
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.user-name.editable-field:hover {
    background: rgba(0, 122, 255, 0.08);
    transform: scale(1.02);
}

.user-id {
    color: #94a3b8; /* 浅银灰 */
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.user-id.editable-field {
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.user-id.editable-field:hover {
    background: rgba(0, 122, 255, 0.08);
    transform: scale(1.02);
}

/* 移动端优化 - 始终显示编辑提示 */
@media (max-width: 768px) {
    .avatar-edit-hint {
        opacity: 0.3;
    }

    /* 当有自定义头像时，完全隐藏编辑标志 */
    .avatar-wrapper.has-custom-avatar .avatar-edit-hint {
        opacity: 0;
        pointer-events: none;
    }
}

/* 列表项布局 */
.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0; /* 减少上下内边距，从20px改为12px */
    border-bottom: 1px solid #f1f5f9; /* 极浅的分割线 */
    cursor: pointer;
    transition: all 0.2s ease;
}
.menu-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 左侧图标和文字包裹 */
.menu-left {
    display: flex;
    align-items: center;
    gap: 16px; /* 文字和图标的呼吸间距 */
}

/* 左侧彩色小方块图标 */
.icon-box {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

/* 列表文字 */
.menu-left span {
    color: #334155;
    font-size: 16px;
    font-weight: 600;
}

/* 右侧倾斜高级箭头 */
.menu-arrow {
    color: #cbd5e1;
    font-size: 18px;
    font-weight: 600;
}

/* 点击反馈 */
.menu-item:active {
    opacity: 0.6;
    transform: scale(0.98);
}

/* ——————————————————————————————————————————————
 *  网络设置子页面（右侧滑入）
 * —————————————————————————————————————————————— */

.network-settings-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: #eef2f6 !important;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.network-settings-page.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  isolation: isolate;
}

.network-settings-page.wallet-motion-owner {
  transition: none;
}

/* 子页面 Header */
.network-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  padding-top: var(--safe-area-top); /* 🆕 添加顶部安全区域 */
  min-height: calc(44px + var(--safe-area-top)); /* 🆕 确保总高度包含安全区域 */
  background: #eef2f6;
  border-bottom: 0.5px solid #d1d1d6;
}

.network-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.network-back-btn svg {
  color: #000000;
}

.network-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

.network-header-spacer {
  width: 60px;
}

/* 让设置下的一级子页头部与 Line 主页面保持同一套排版语言 */
#network-settings-page .network-header,
#wallet-page .network-header,
#profile-page .network-header {
  position: relative;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 0.5px solid #e5e5ea;
}

#network-settings-page .network-back-btn,
#wallet-page .network-back-btn,
#profile-page .network-back-btn {
  position: relative;
  z-index: 2;
  min-width: 24px;
  height: 44px;
  justify-content: flex-start;
  gap: 2px;
  color: #000000;
  font-size: 17px;
  font-weight: 400;
}

#network-settings-page .network-back-btn span,
#wallet-page .network-back-btn span,
#profile-page .network-back-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#network-settings-page .network-title,
#wallet-page .network-title,
#profile-page .network-title {
  position: absolute;
  left: 60px;
  top: calc(var(--safe-area-top) + 12px);
  transform: none;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #000000;
  text-align: left;
  display: flex;
  align-items: center;
  max-width: calc(100% - 120px);
}

#network-settings-page .network-header-actions,
#wallet-page .network-header-actions,
#profile-page .network-header-actions,
#profile-page .profile-add-btn,
#wallet-page .wallet-notification-icon {
  position: relative;
  z-index: 2;
  min-width: 24px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

#network-settings-page .network-header-actions,
#wallet-page .network-header-actions,
#profile-page .network-header-actions {
  gap: 0;
}

/* 表单卡片容器 - 核心玻璃质感 */
.settings-form-card {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%);
    border-radius: 32px; /* 极大圆角 */
    margin: 20px; /* 这里的 margin 替代了 padding，让卡片悬浮在页面中间 */
    padding: 32px 24px;
    /* 微光描边与多层柔和阴影 */
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 20px 40px -10px rgba(180, 195, 215, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.settings-form-card::-webkit-scrollbar {
    display: none;
}

/* 表单组间距 */
.form-group {
    margin-bottom: 24px;
}

/* 标签与标题 - 高级深色字 */
.form-group label, .slider-label {
    color: #1e293b; /* 深石板灰 */
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 辅助文字 - 浅银灰 */
.form-helper {
    color: #94a3b8;
    font-size: 13px;
    margin-top: 8px;
}

/* 表单分隔线 */
.form-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
    margin: 32px 0 24px 0;
}

/* 表单栏目标题 */
.form-section-title {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* 输入框与下拉框 - 沉浸式凹槽感 */
.form-input, #select-model {
    background-color: #f1f5f9; /* 比卡片背景稍深，形成凹槽感 */
    border: 2px solid transparent; /* 预留边框位置用于聚焦 */
    border-radius: 16px;
    padding: 16px;
    font-size: 16px;
    color: #334155;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
/* 输入框聚焦态 - 高亮蓝框 */
.form-input:focus, #select-model:focus {
    background-color: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* 按钮通用高级样式 */
.premium-btn {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    border: none;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
    /* 按钮的柔和阴影 */
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.15);
}
.premium-btn:active { transform: scale(0.98); box-shadow: none; }

/* 次要按钮 (拉取模型) - 浅色风格 */
.btn-secondary {
    background-color: #f1f5f9;
    color: #475569;
}

/* 主要按钮 (测试) - 蓝色渐变 */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 10px 25px -8px rgba(59, 130, 246, 0.5);
}

/* 成功按钮 (保存) - 绿色渐变 */
.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 10px 25px -8px rgba(34, 197, 94, 0.5);
    margin-bottom: 0; /* 最后一个按钮去掉底部边距 */
}

/* 滑动条样式 - 完全重做 */
.network-range {
    width: 100%;
    height: 8px; /* 增加高度使滑动条更明显 */
    border-radius: 4px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
    margin: 20px 0; /* 增加上下边距 */
    position: relative; /* 为定位做准备 */
}

/* Webkit 滑动条滑块 - 完全重做 */
.network-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; /* 稍微减小滑块尺寸 */
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #3b82f6; /* 增加边框宽度 */
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    margin-top: -6px; /* 往下移动2px，从-8px调整为-6px */
}

/* Firefox 滑动条滑块 */
.network-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    border: none; /* Firefox 不需要这个属性 */
}

/* 滑动条标签 */
.network-range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: #94a3b8;
}

/* 温度显示值 - 添加毛玻璃背景 */
.network-temp-value {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    color: #3b82f6;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-left: auto; /* 使数字区块靠右对齐 */
}

/* ——————————————————————————————————————————————
 *  选择联系人模态框样式
 * —————————————————————————————————————————————— */

#modal-select-contact {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10001;
  background: #f2f2f6;
  border-radius: 15px 15px 0 0;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    visibility 0s linear 320ms;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.25);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint;
}

#modal-select-contact.modal-active {
  transform: translate3d(0, 5%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

/* 选择联系人头部 */
.select-contact-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  background: #f2f2f6;
  border-bottom: 0.5px solid #e5e5ea;
}

.select-contact-cancel {
  background: none;
  border: none;
  color: #007aff;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.select-contact-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

.select-contact-placeholder {
  width: 60px;
}

/* 选择联系人内容区 */
.select-contact-body {
  flex: 1;
  background: #ffffff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.select-contact-body::-webkit-scrollbar {
  display: none;
}

.select-contact-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 联系人列表 */
.select-contact-list {
  padding: 8px 0;
}

.select-contact-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
  position: relative;
}

.select-contact-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.select-contact-item:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.select-contact-item.disabled {
  opacity: 0.5;
  cursor: default;
}

.select-contact-item.disabled:hover {
  background-color: transparent;
}

.select-contact-item.disabled:active {
  background-color: transparent;
}

/* 联系人头像 */
.select-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e5e5ea;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}

.select-contact-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.select-contact-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* 联系人信息 */
.select-contact-info {
  flex: 1;
  min-width: 0;
}

.select-contact-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 4px;
}

.select-contact-name {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-contact-desc {
  font-size: 13px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 联系人状态 */
.select-contact-status {
  flex-shrink: 0;
  margin-left: 8px;
}

.select-contact-added {
  font-size: 13px;
  color: #8e8e93;
  font-weight: 500;
}

/* 空状态 */
.select-contact-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
}

.select-contact-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.select-contact-empty-text {
  font-size: 17px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
}

.select-contact-empty-hint {
  font-size: 14px;
  color: #8e8e93;
  line-height: 1.4;
}

/* ——————————————————————————————————————————————
 *  聊天列表样式
 * —————————————————————————————————————————————— */

/* 聊天列表项 */
.chat-list-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
  position: relative;
  min-height: 70px;
  border-bottom: 0.5px solid #e5e5ea;
}

.chat-list-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.chat-list-item:active {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 分割线 */
.chat-list-item + .chat-list-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 68px;
  right: 0;
  height: 0.5px;
  background: #e5e5ea;
}

/* 聊天列表头像 */
.chat-list-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #e5e5ea;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
}

.chat-list-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-list-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* 聊天列表内容 */
.chat-list-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chat-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  min-width: 0;
}

.chat-list-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 400;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.chat-list-time {
  font-size: 10px;
  color: #c7c7cc;
  flex-shrink: 0;
  margin-left: 8px;
  font-weight: 300;
}

.chat-list-message {
  min-width: 0;
  font-size: 13px;
  color: #8e8e93;
  font-weight: 300;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-list-message-with-mask {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chat-list-message-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ——————————————————————————————————————————————
 *  iOS 风格双层结构聊天列表
 * —————————————————————————————————————————————— */

/* 聊天项容器 */
.chat-item-wrapper {
  position: relative;
  height: 72px;
  min-height: 70px; /* 确保有最小高度 */
  overflow: hidden;
  background: #ffffff;
  border-bottom: 0.5px solid #e5e5ea;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.chat-item-wrapper:last-child {
  border-bottom: none;
}

/* 下层动作区 */
.chat-item-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: #ff3b30;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* 添加缩放和透明度过渡，创建弹出效果 */
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease;
}

/* 滑开状态下的删除按钮动画 */
.chat-item-wrapper.swiped-left .chat-item-actions {
  transform: scale(1);
  opacity: 1;
}

.chat-delete-btn {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}

.chat-delete-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.chat-delete-btn:active {
  background: rgba(0, 0, 0, 0.2);
}

.chat-delete-icon {
  font-size: 22px;
  margin-bottom: 2px;
  line-height: 1;
}

.chat-delete-text {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

/* 上层内容区 */
.chat-item-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 2;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 12px 16px;
  cursor: pointer;
  /* 使用弹性缓动函数创建果冻回弹效果 */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* 滑开状态 */
.chat-item-wrapper.swiped-left .chat-item-content {
  transform: translateX(-80px);
}

/* 滑动时的视觉反馈 */
.chat-item-wrapper.swiped-left {
  background-color: rgba(0, 0, 0, 0.02);
}

/* 优化触摸体验 */
@media (hover: none) {
  .chat-item-content:hover {
    background: #ffffff;
  }

  .chat-delete-btn:hover {
    background: none;
  }
}

/* 兼容旧样式 - 隐藏单层结构，使用双层结构 */
.chat-list-item {
  display: none; /* 隐藏旧的单层结构，使用双层结构 */
}

/* 确保双层结构正确显示 */
.chat-item-wrapper {
  display: block; /* 确保双层结构容器可见 */
}

.chat-list-delete-btn {
  display: none; /* 隐藏旧的删除按钮 */
}

.chat-list-content-wrapper {
  display: none; /* 隐藏旧的内容包装器 */
}

/* 聊天列表空状态 */
.chat-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
}

.chat-list-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.chat-list-empty-text {
  font-size: 17px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
}

.chat-list-empty-hint {
  font-size: 14px;
  color: #8e8e93;
  line-height: 1.4;
}

/* 聊天列表错误状态 */
.chat-list-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  text-align: center;
  color: #8e8e93;
  font-size: 16px;
}

/* 下拉选择框 */
.network-select-wrap {
  position: relative;
}

.network-select {
  width: 100%;
  height: 46px;
  padding: 0 36px 0 14px;
  font-size: 16px;
  color: #000000;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.network-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #8e8e93;
  pointer-events: none;
}

/* 滑动条 */
.network-range {
  width: 100%;
  height: 8px; /* 增加高度以便更精确控制 */
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #007aff 0%, #007aff 40%, #e5e5ea 40%, #e5e5ea 100%);
  border-radius: 4px;
  outline: none;
  margin: 12px 0 8px; /* 增加上下边距 */
  cursor: pointer;
  position: relative;
  z-index: 2; /* 确保滑动条在刻度线上方 */
}

/* 动态背景 - 通过JavaScript更新，支持0.01精度 */
.network-range[data-progress="0"] { background: linear-gradient(to right, #007aff 0%, #e5e5ea 0%); }
.network-range[data-progress="5"] { background: linear-gradient(to right, #007aff 0%, #007aff 5%, #e5e5ea 5%, #e5e5ea 100%); }
.network-range[data-progress="10"] { background: linear-gradient(to right, #007aff 0%, #007aff 10%, #e5e5ea 10%, #e5e5ea 100%); }
.network-range[data-progress="15"] { background: linear-gradient(to right, #007aff 0%, #007aff 15%, #e5e5ea 15%, #e5e5ea 100%); }
.network-range[data-progress="20"] { background: linear-gradient(to right, #007aff 0%, #007aff 20%, #e5e5ea 20%, #e5e5ea 100%); }
.network-range[data-progress="25"] { background: linear-gradient(to right, #007aff 0%, #007aff 25%, #e5e5ea 25%, #e5e5ea 100%); }
.network-range[data-progress="30"] { background: linear-gradient(to right, #007aff 0%, #007aff 30%, #e5e5ea 30%, #e5e5ea 100%); }
.network-range[data-progress="35"] { background: linear-gradient(to right, #007aff 0%, #007aff 35%, #e5e5ea 35%, #e5e5ea 100%); }
.network-range[data-progress="40"] { background: linear-gradient(to right, #007aff 0%, #007aff 40%, #e5e5ea 40%, #e5e5ea 100%); }
.network-range[data-progress="45"] { background: linear-gradient(to right, #007aff 0%, #007aff 45%, #e5e5ea 45%, #e5e5ea 100%); }
.network-range[data-progress="50"] { background: linear-gradient(to right, #007aff 0%, #007aff 50%, #e5e5ea 50%, #e5e5ea 100%); }
.network-range[data-progress="55"] { background: linear-gradient(to right, #007aff 0%, #007aff 55%, #e5e5ea 55%, #e5e5ea 100%); }
.network-range[data-progress="60"] { background: linear-gradient(to right, #007aff 0%, #007aff 60%, #e5e5ea 60%, #e5e5ea 100%); }
.network-range[data-progress="65"] { background: linear-gradient(to right, #007aff 0%, #007aff 65%, #e5e5ea 65%, #e5e5ea 100%); }
.network-range[data-progress="70"] { background: linear-gradient(to right, #007aff 0%, #007aff 70%, #e5e5ea 70%, #e5e5ea 100%); }
.network-range[data-progress="75"] { background: linear-gradient(to right, #007aff 0%, #007aff 75%, #e5e5ea 75%, #e5e5ea 100%); }
.network-range[data-progress="80"] { background: linear-gradient(to right, #007aff 0%, #007aff 80%, #e5e5ea 80%, #e5e5ea 100%); }
.network-range[data-progress="85"] { background: linear-gradient(to right, #007aff 0%, #007aff 85%, #e5e5ea 85%, #e5e5ea 100%); }
.network-range[data-progress="90"] { background: linear-gradient(to right, #007aff 0%, #007aff 90%, #e5e5ea 90%, #e5e5ea 100%); }
.network-range[data-progress="95"] { background: linear-gradient(to right, #007aff 0%, #007aff 95%, #e5e5ea 95%, #e5e5ea 100%); }
.network-range[data-progress="100"] { background: linear-gradient(to right, #007aff 0%, #007aff 100%, #e5e5ea 100%, #e5e5ea 100%); }

.network-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; /* 稍微减小以便更精确控制 */
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #007aff;
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.15s ease;
}

.network-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 122, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.network-range::-webkit-slider-thumb:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(0, 122, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.network-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #007aff;
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.15s ease;
}

.network-range::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0, 122, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.network-range::-moz-range-thumb:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(0, 122, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.network-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #8e8e93;
  padding: 0 2px;
  position: relative;
}

/* 添加更精细的刻度线 - 移到滑动条后面，避免穿模 */
.network-range-labels::after {
  content: '';
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    #c7c7cc 0%, #c7c7cc 20%,
    transparent 20%, transparent 40%,
    #c7c7cc 40%, #c7c7cc 60%,
    transparent 60%, transparent 80%,
    #c7c7cc 80%, #c7c7cc 100%
  );
  z-index: 1;
  pointer-events: none;
}

.network-temp-value {
  font-size: 15px;
  font-weight: 700;
  color: #007aff;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  min-width: 50px;
  text-align: center;
}

.network-temp-value:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.02);
}

.network-temp-value:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}

/* 温度输入框样式 */
.network-temp-input {
  font-size: 15px;
  font-weight: 700;
  color: #007aff;
  width: 60px;
  text-align: center;
  padding: 4px 6px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
  outline: none;
  font-variant-numeric: tabular-nums;
}

.network-temp-input:focus {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.5);
}

/* 按钮 */
.network-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.1s ease;
  margin-bottom: 16px;
}

.network-btn:active {
  opacity: 0.7;
  transform: scale(0.98);
}

.network-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.network-btn-secondary {
  background: #ffffff;
  color: #007aff;
}

.network-btn-primary {
  background: #007aff;
  color: #ffffff;
}

.network-btn-save {
  background: #34c759;
  color: #ffffff;
}

.network-btn-danger {
  background: #ff3b30;
  color: #ffffff;
}

.network-btn-danger:active {
  opacity: 0.7;
}

.network-btn-icon {
  font-size: 18px;
  display: inline-block;
}

.network-btn-icon.spin {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ——————————————————————————————————————————————
 *  气泡菜单（+ 号下拉）
 * —————————————————————————————————————————————— */

.bubble-menu {
  position: absolute;
  top: 44px;
  right: 12px;
  z-index: var(--z-index-bubble-menu);
  min-width: 160px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.08);
  padding: 6px 0;
  opacity: 0;
  transform: scale(0.7) translateY(-8px);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.32,0.72,0,1),
              transform 0.2s cubic-bezier(0.32,0.72,0,1);
}

.bubble-menu.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.bubble-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 15px;
  color: #000000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.bubble-menu-item:active {
  background: #f2f2f7;
}

.bubble-menu-item + .bubble-menu-item {
  border-top: 0.5px solid #e5e5ea;
}

.bubble-menu-item-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.bubble-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-backdrop);
  display: none;
}

.bubble-menu-backdrop.active {
  display: block;
}

/* ——————————————————————————————————————————————
 *  iOS 层叠模态框 (Stacked Modal)
 * —————————————————————————————————————————————— */

/* 主视图被推后的效果 */
#app-viewport.view-pushed-back {
  overflow: hidden;
  z-index: 9999;
  --app-depth-scale: 0.93;
  --app-depth-translate-y: -10px;
  --app-depth-brightness: 0.7;
}

/* 确保模态框关闭后主视图立即恢复 */
#app-viewport:not(.view-pushed-back) {
  --app-depth-scale: 1;
  --app-depth-translate-y: 0px;
  --app-depth-brightness: 1;
}

/* 确保模态框关闭后主视图立即恢复 */
#app-viewport:not(.view-pushed-back) {
  --app-depth-scale: 1;
  --app-depth-translate-y: 0px;
  --app-depth-brightness: 1;
}

/* 模态框容器 */
#stacked-modal-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10001;
  background: #F3F4F6;
  border-radius: 15px 15px 0 0;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    visibility 0s linear 320ms;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 40px rgba(0,0,0,0.25);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint;
}

#stacked-modal-container.modal-active {
  transform: translate3d(0, 5%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

/* 模态框 Header */
.stacked-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  background: #F3F4F6;
  border-bottom: 0.5px solid #d1d1d6;
  position: relative;
}

.stacked-modal-cancel {
  background: none;
  border: none;
  font-size: 16px;
  color: #007aff;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-weight: 400;
}

.stacked-modal-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

.stacked-modal-save {
  background: none;
  border: none;
  font-size: 16px;
  color: #007aff;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-weight: 600;
}

.stacked-modal-save:disabled {
  color: #c7c7cc;
  cursor: not-allowed;
}

/* 模态框 Body（可滚动） */
.stacked-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 44px;
}

.stacked-modal-body::-webkit-scrollbar {
  display: none;
}

/* 头像上传区 */
.stacked-modal-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.stacked-modal-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e5e5ea;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}

.stacked-modal-avatar:active {
  transform: scale(0.95);
}

.stacked-modal-avatar svg {
  width: 96px;
  height: 96px;
}

.stacked-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stacked-modal-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.stacked-modal-avatar:hover .stacked-modal-avatar-overlay,
.stacked-modal-avatar:active .stacked-modal-avatar-overlay {
  opacity: 1;
}

.stacked-modal-avatar-hint {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 8px;
}

/* ——————————————————————————————————————————————
 *  新卡片式布局样式
 * —————————————————————————————————————————————— */

/* 联系人卡片 */
.contact-card {
  background: #FFFFFF;
  border-radius: 1.5rem;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.contact-card-button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.contact-card-button:active {
  transform: scale(0.98);
}

/* 卡片行布局 */
.contact-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-card-worldbook .contact-card-row {
  align-items: flex-start;
}

.contact-card-worldbook .contact-card-icon-wrap {
  margin-top: 2px;
}

/* 卡片头部布局 */
.contact-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.contact-card-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 图标容器 */
.contact-card-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-card-icon-wrap .material-icons-round {
  font-size: 18px;
}

/* 图标颜色主题 */
.contact-icon-blue {
  background: #DBEAFE;
}

.contact-icon-blue .material-icons-round {
  color: #2563EB;
}

.contact-icon-green {
  background: #D1FAE5;
}

.contact-icon-green .material-icons-round {
  color: #059669;
}

.contact-icon-purple {
  background: #EDE9FE;
}

.contact-icon-purple .material-icons-round {
  color: #7C3AED;
}

.contact-icon-orange {
  background: #FED7AA;
}

.contact-icon-orange .material-icons-round {
  color: #EA580C;
}

.contact-icon-pink {
  background: #FCE7F3;
}

.contact-icon-pink .material-icons-round {
  color: #EC4899;
}

.contact-icon-gray {
  background: #F3F4F6;
}

.contact-icon-gray .material-icons-round {
  color: #6B7280;
}

.contact-icon-teal {
  background: #CCFBF1;
}

.contact-icon-teal .material-icons-round {
  color: #0D9488;
}

.contact-icon-indigo {
  background: #E0E7FF;
}

.contact-icon-indigo .material-icons-round {
  color: #4F46E5;
}

.contact-icon-red {
  background: #FEE2E2;
}

.contact-icon-red .material-icons-round {
  color: #DC2626;
}

/* 卡片内容区 */
.contact-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* 标签 */
.contact-card-label {
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
  line-height: 1.3;
}

.contact-card-sublabel {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 400;
}

/* 输入框 */
.contact-card-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  color: #1F2937;
  background: transparent;
  padding: 0;
  font-family: inherit;
}

.contact-card-input::placeholder {
  color: #D1D5DB;
}

/* 文本域 */
.contact-card-textarea {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  color: #1F2937;
  background: transparent;
  resize: none;
  font-family: inherit;
  line-height: 1.6;
  padding: 0;
}

.contact-card-textarea::placeholder {
  color: #D1D5DB;
}

/* 必填项样式 */
.contact-card-input.required,
.contact-card-textarea.required {
  background-color: rgba(255, 248, 220, 0.5) !important; /* 淡黄色背景 */
  border-radius: 8px;
  padding: 8px 12px;
  transition: background-color 0.3s ease;
}

.contact-card-input.required.filled,
.contact-card-textarea.required.filled {
  background-color: #ffffff !important; /* 有内容时变为白色 */
}

/* 必填项提示文字 */
.stacked-modal-required-hint {
  font-size: 11px;
  color: #8e8e93;
  margin: 0 0 8px 16px;
  text-align: left;
  line-height: 1.2;
}

/* 选择框容器 */
.contact-card-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-card-select {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #6B7280;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.contact-card-arrow {
  font-size: 20px;
  color: #D1D5DB;
  flex-shrink: 0;
}

.contact-card-helper {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #8e8e93;
}

.contact-worldbook-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-worldbook-note {
  font-size: 12px;
  line-height: 1.4;
  color: #9CA3AF;
}

.contact-worldbook-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-worldbook-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
  text-align: left;
  cursor: pointer;
}

.contact-worldbook-trigger-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-worldbook-trigger-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.contact-worldbook-trigger-meta {
  font-size: 12px;
  line-height: 1.5;
  color: #6B7280;
}

.contact-worldbook-trigger-arrow {
  color: #9CA3AF;
  font-size: 18px;
  transform: rotate(90deg);
}

.contact-worldbook-selected-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.contact-worldbook-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #EEF2F7;
  color: #475467;
  font-size: 11px;
}

.contact-worldbook-pill.is-empty {
  background: #F3F4F6;
  color: #9CA3AF;
}

.contact-worldbook-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px calc(24px + var(--safe-area-bottom, 0px));
  background: rgba(17, 24, 39, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, background-color 200ms ease;
}

.contact-worldbook-sheet-mask.is-visible {
  opacity: 1;
  pointer-events: auto;
  background: rgba(17, 24, 39, 0.24);
}

.contact-worldbook-sheet {
  width: min(520px, 100%);
  max-height: min(78dvh, 640px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: rgba(248, 250, 252, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  transform: translateY(18px);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.contact-worldbook-sheet-mask.is-visible .contact-worldbook-sheet {
  transform: translateY(0);
}

.contact-worldbook-sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.32);
  margin: 10px auto 4px;
}

.contact-worldbook-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 14px;
}

.contact-worldbook-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}

.contact-worldbook-sheet-subtitle {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #6B7280;
}

.contact-worldbook-sheet-done {
  border: none;
  background: transparent;
  color: #2563EB;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.contact-worldbook-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 0 16px calc(18px + var(--safe-area-bottom, 0px));
}

.contact-worldbook-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #F9FAFB;
}

.contact-worldbook-item.is-selected {
  border-color: #34C759;
  background: #F1FCF5;
}

.contact-worldbook-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.contact-worldbook-checkbox {
  margin-top: 2px;
}

.contact-worldbook-item-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-worldbook-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.contact-worldbook-item-meta {
  font-size: 12px;
  line-height: 1.5;
  color: #6B7280;
}

.contact-worldbook-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-worldbook-move {
  width: 28px;
  height: 28px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #6B7280;
  font-size: 14px;
  cursor: pointer;
}

.contact-worldbook-move:disabled {
  opacity: 0.45;
  cursor: default;
}

.contact-worldbook-empty {
  font-size: 13px;
  color: #9CA3AF;
  padding: 2px 0;
}

/* ——————————————————————————————————————————————
 *  角色详情 — 设置面板
 * —————————————————————————————————————————————— */

.character-detail-settings-shell,
.character-detail-settings-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.character-detail-settings-shell {
  padding-top: 10px;
}

.character-detail-settings-note,
.character-detail-settings-status {
  font-size: 12px;
  line-height: 1.6;
  color: #667085;
}

.character-detail-settings-status.is-error {
  color: #b42318;
}

.character-detail-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.character-detail-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.character-detail-settings-label,
.character-detail-settings-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #344054;
}

.character-detail-settings-input,
.character-detail-settings-textarea {
  width: 100%;
  border: 1px solid rgba(57, 61, 74, 0.12);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
  color: #111827;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
}

.character-detail-settings-input:focus,
.character-detail-settings-textarea:focus {
  border-color: rgba(57, 61, 74, 0.28);
  box-shadow: 0 0 0 3px rgba(57, 61, 74, 0.08);
}

.character-detail-settings-textarea {
  resize: vertical;
  min-height: 84px;
}

.character-detail-settings-textarea--compact {
  min-height: 64px;
}

.character-detail-settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.character-detail-settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.character-detail-settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(57, 61, 74, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #475467;
  font-size: 11px;
  font-weight: 600;
}

.character-detail-settings-voice-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(57, 61, 74, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.character-detail-settings-voice-toggle-icon {
  font-size: 18px;
  transition: transform 180ms ease;
}

.character-detail-settings-voice-toggle[aria-expanded="true"] .character-detail-settings-voice-toggle-icon {
  transform: rotate(180deg);
}

.character-detail-settings-voice-advanced {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0 0;
}

.character-detail-settings-voice-advanced.is-open {
  display: flex;
}

.character-detail-settings-slider-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
}

.character-detail-settings-slider {
  width: 100%;
}

.character-detail-settings-slider-value {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #344054;
}

.character-detail-settings-geo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.character-detail-settings-geo-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(57, 61, 74, 0.08);
  background: rgba(248, 250, 252, 0.92);
}

.character-detail-settings-geo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.character-detail-settings-geo-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475467;
}

.character-detail-settings-geo-primary-label {
  font-weight: 600;
}

.character-detail-settings-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(57, 61, 74, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #667085;
}

.character-detail-settings-icon-btn .material-symbols-outlined {
  font-size: 18px;
}

.character-detail-settings-empty {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px dashed rgba(57, 61, 74, 0.12);
  font-size: 12px;
  line-height: 1.6;
  color: #667085;
}

.character-detail-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (min-width: 380px) {
  .character-detail-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.character-worldbook-workbench {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.character-worldbook-card {
  background: #ffffff;
  border: 1px solid rgba(57, 61, 74, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.character-worldbook-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: none;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.character-worldbook-trigger-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.character-worldbook-trigger-title {
  font-size: 16px;
  font-weight: 700;
  color: #262731;
}

.character-worldbook-trigger-summary {
  font-size: 11px;
  line-height: 1.45;
  color: #707585;
}

.character-worldbook-trigger-arrow {
  color: rgba(38, 39, 49, 0.48);
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.character-worldbook-card.is-open .character-worldbook-trigger-arrow {
  transform: rotate(90deg);
}

.character-worldbook-content {
  display: none;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(38, 39, 49, 0.08);
}

.character-worldbook-card.is-open .character-worldbook-content {
  display: block;
}

.character-worldbook-panel-copy {
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: #6c7281;
}

.character-quick-toggle-help {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.character-quick-toggle-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(57, 61, 74, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: #6c7281;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  user-select: none;
}

.character-quick-toggle-help-popover {
  display: none;
  position: fixed;
  padding: 12px 14px;
  border: 1px solid rgba(57, 61, 74, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 32px rgba(23, 25, 35, 0.12);
  color: #5f6675;
  z-index: 20;
}

.character-quick-toggle-help-popover.is-open {
  display: block;
}

.character-quick-toggle-card {
  padding: 10px;
  overflow: visible;
}

.character-quick-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.character-quick-toggle-label {
  font-size: 14px;
  font-weight: 700;
  color: #262731;
}

.character-quick-toggle-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.character-quick-toggle-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(57, 61, 74, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 700;
  color: #262731;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.character-quick-toggle-button.is-enabled {
  border-color: rgba(57, 61, 74, 0.18);
  background: rgba(57, 61, 74, 0.08);
}

.character-quick-toggle-help-title {
  font-size: 12px;
  font-weight: 700;
  color: #262731;
}

.character-quick-toggle-help-text {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
}

.character-worldbook-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.character-worldbook-action-btn,
.expression-primary-btn,
.expression-secondary-btn,
.expression-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(57, 61, 74, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: #313543;
  font-size: 12px;
  font-weight: 600;
}

.character-worldbook-action-btn[disabled],
.expression-chip-btn:disabled {
  opacity: 0.55;
}

.expression-primary-btn {
  background: #313543;
  border-color: #313543;
  color: #ffffff;
}

.expression-chip-btn.danger {
  background: rgba(145, 52, 52, 0.08);
  border-color: rgba(145, 52, 52, 0.14);
  color: #8d3b3b;
}

.character-worldbook-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.character-worldbook-stat-grid.compact {
  margin-top: 8px;
}

.character-worldbook-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(57, 61, 74, 0.06);
}

.character-worldbook-stat span {
  font-size: 11px;
  color: #6c7281;
}

.character-worldbook-stat strong {
  font-size: 18px;
  line-height: 1;
  color: #2b2f3b;
}

.character-worldbook-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.character-worldbook-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(57, 61, 74, 0.06);
  color: #555c6b;
  font-size: 10px;
}

.character-worldbook-pill.is-empty {
  background: rgba(57, 61, 74, 0.04);
  color: #8c92a1;
}

.character-worldbook-book-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.character-worldbook-book-list.compact {
  margin-top: 8px;
}

.character-worldbook-book {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(57, 61, 74, 0.08);
}

.character-worldbook-book.is-selected {
  border-color: rgba(57, 61, 74, 0.16);
  background: rgba(255, 255, 255, 0.92);
}

.character-worldbook-book-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.character-worldbook-checkbox {
  margin-top: 2px;
}

.character-worldbook-book-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.character-worldbook-book-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.character-worldbook-book-meta,
.character-worldbook-book-desc {
  font-size: 11px;
  line-height: 1.45;
  color: #6c7281;
}

.character-worldbook-move-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.character-worldbook-move-btn {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(57, 61, 74, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #555c6b;
  font-size: 12px;
}

.character-worldbook-move-btn:disabled {
  opacity: 0.45;
}

.character-worldbook-warning-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.character-worldbook-warning-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(57, 61, 74, 0.05);
  color: #565d6d;
  font-size: 11px;
  line-height: 1.45;
}

.character-worldbook-empty {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #F8FAFC;
  color: #6B7280;
  font-size: 11px;
  line-height: 1.45;
}

.character-token-hero,
.character-token-trend-card,
.character-token-composition-card {
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid rgba(84, 86, 114, 0.08);
  background: linear-gradient(135deg, rgba(250, 250, 252, 0.98), rgba(243, 244, 249, 0.96));
  box-shadow: 0 4px 12px rgba(43, 47, 59, 0.04);
}

.character-token-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 12px;
  padding: 14px;
}

.character-token-hero-copy {
  min-width: 0;
}

.character-token-hero-kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b8fa3;
}

.character-token-hero-value {
  margin-top: 6px;
  font-size: 34px;
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #2f3442;
}

.character-token-hero-meta {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #6f7688;
}

.character-token-hero-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.character-token-hero-badge {
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(84, 86, 114, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.character-token-hero-badge span {
  font-size: 10px;
  color: #9095a6;
}

.character-token-hero-badge strong {
  font-size: 16px;
  color: #3c4152;
}

.character-token-trend-card,
.character-token-composition-card {
  padding: 12px;
}

.character-token-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.character-token-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #262731;
}

.character-token-section-meta {
  font-size: 11px;
  color: #979cab;
}

.character-token-trend-chart {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 8px;
  align-items: end;
}

.character-token-trend-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.character-token-trend-bar-wrap {
  width: 100%;
  height: 104px;
  display: flex;
  align-items: flex-end;
}

.character-token-trend-bar {
  width: 100%;
  min-height: 14px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, rgba(163, 156, 208, 0.54), rgba(121, 118, 177, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.character-token-trend-column.is-current .character-token-trend-bar {
  background: linear-gradient(180deg, rgba(171, 207, 216, 0.82), rgba(108, 130, 177, 0.88));
}

.character-token-trend-value {
  font-size: 10px;
  font-weight: 700;
  color: #5f6478;
}

.character-token-trend-label {
  font-size: 10px;
  color: #9a9faf;
}

.character-token-composition-bar {
  margin-top: 12px;
  display: flex;
  min-height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.character-token-composition-segment {
  min-width: 6%;
}

.character-token-composition-segment.is-system {
  background: linear-gradient(90deg, rgba(112, 110, 172, 0.9), rgba(132, 128, 188, 0.84));
}

.character-token-composition-segment.is-lorebook {
  background: linear-gradient(90deg, rgba(150, 124, 176, 0.72), rgba(176, 145, 194, 0.66));
}

.character-token-composition-segment.is-history {
  background: linear-gradient(90deg, rgba(126, 172, 188, 0.74), rgba(144, 188, 170, 0.62));
}

.character-token-composition-segment.is-input {
  background: linear-gradient(90deg, rgba(196, 154, 174, 0.68), rgba(214, 175, 144, 0.72));
}

.character-token-composition-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.character-token-composition-item {
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(84, 86, 114, 0.06);
}

.character-token-composition-item-top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #313543;
}

.character-token-composition-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(112, 110, 172, 0.8);
}

.character-token-composition-item.is-lorebook .character-token-composition-dot {
  background: rgba(160, 132, 184, 0.72);
}

.character-token-composition-item.is-history .character-token-composition-dot {
  background: rgba(128, 174, 188, 0.72);
}

.character-token-composition-item.is-input .character-token-composition-dot {
  background: rgba(198, 156, 176, 0.72);
}

.character-token-composition-item-meta {
  margin-top: 6px;
  font-size: 11px;
  color: #7f8596;
}

/* 卡片值显示 */
.contact-card-value {
  font-size: 14px;
  color: #9CA3AF;
  flex: 1;
  text-align: right;
}

/* ——————————————————————————————————————————————
 *  地理信息卡片特殊样式
 * —————————————————————————————————————————————— */

.contact-card-geography {
  cursor: pointer;
}

.contact-card-geography .contact-card-header {
  margin-bottom: 0;
  cursor: pointer;
}

.contact-card-geography .contact-card-arrow {
  margin-left: auto;
}

/* 地点列表容器 */
.geography-places-list {
  margin-top: 12px;
}

/* 空状态提示 */
.geography-empty-hint {
  font-size: 14px;
  color: #9CA3AF;
  text-align: left;
  padding: 0;
}

/* 地点条目 */
.geography-place-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 2px;
  transition: all 0.2s ease;
}

.geography-place-item:last-child {
  margin-bottom: 0;
}

/* 地点类型图标 */
.geography-place-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.geography-place-icon .material-icons-round,
.geography-place-icon svg {
  font-size: 18px;
  width: 18px;
  height: 18px;
  display: block;
  color: inherit;
}

/* 地点信息 */
.geography-place-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.geography-place-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  flex-shrink: 0;
}

.geography-place-desc {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 地点类型颜色(半透明背景) */
.geography-place-item[data-type="home"] {
  background: rgba(254, 243, 199, 0.5);
}

.geography-place-item[data-type="home"] .geography-place-icon {
  background: rgba(245, 158, 11, 0.15);
}

.geography-place-item[data-type="home"] .geography-place-icon .material-icons-round {
  color: #F59E0B;
}

.geography-place-item[data-type="work"] {
  background: rgba(219, 234, 254, 0.5);
}

.geography-place-item[data-type="work"] .geography-place-icon {
  background: rgba(59, 130, 246, 0.15);
}

.geography-place-item[data-type="work"] .geography-place-icon .material-icons-round {
  color: #3B82F6;
}

.geography-place-item[data-type="school"] {
  background: rgba(224, 231, 255, 0.5);
}

.geography-place-item[data-type="school"] .geography-place-icon {
  background: rgba(99, 102, 241, 0.15);
}

.geography-place-item[data-type="school"] .geography-place-icon .material-icons-round {
  color: #6366F1;
}

.geography-place-item[data-type="entertainment"] {
  background: rgba(252, 231, 243, 0.5);
}

.geography-place-item[data-type="entertainment"] .geography-place-icon {
  background: rgba(236, 72, 153, 0.15);
}

.geography-place-item[data-type="entertainment"] .geography-place-icon .material-icons-round {
  color: #EC4899;
}

.geography-place-item[data-type="restaurant"] {
  background: rgba(254, 215, 170, 0.5);
}

.geography-place-item[data-type="restaurant"] .geography-place-icon {
  background: rgba(234, 88, 12, 0.15);
}

.geography-place-item[data-type="restaurant"] .geography-place-icon .material-icons-round {
  color: #EA580C;
}

.geography-place-item[data-type="outdoor"] {
  background: rgba(209, 250, 229, 0.5);
}

.geography-place-item[data-type="outdoor"] .geography-place-icon {
  background: rgba(16, 185, 129, 0.15);
}

.geography-place-item[data-type="outdoor"] .geography-place-icon .material-icons-round {
  color: #10B981;
}

.geography-place-item[data-type="other"] {
  background: rgba(232, 240, 255, 0.82);
}

.geography-place-item[data-type="other"] .geography-place-icon {
  background: rgba(76, 111, 255, 0.14);
}

.geography-place-item[data-type="other"] .geography-place-icon .material-icons-round,
.geography-place-item[data-type="other"] .geography-place-icon svg {
  color: #0B7A2A;
}

/* 主要地点星标 */
.geography-place-star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.15);
  flex-shrink: 0;
}

.geography-place-star .material-icons-round {
  font-size: 16px;
  color: #F59E0B;
}

.geography-place-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.geography-place-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.geography-place-action-btn:active {
  background: rgba(0, 0, 0, 0.12);
}

/* ——————————————————————————————————————————————
 *  旧表单组样式(保留用于兼容)
 * —————————————————————————————————————————————— */

/* 表单组 (iOS Grouped Style) */
.stacked-form-group {
  margin: 0 16px 20px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.stacked-form-item {
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 46px;
  position: relative;
}

.stacked-form-item + .stacked-form-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 0.5px;
  background: #e5e5ea;
}

.stacked-form-item-textarea {
  flex-direction: column;
  align-items: stretch;
  padding: 12px 16px;
}

.stacked-form-label {
  font-size: 15px;
  color: #000000;
  font-weight: 400;
  min-width: 90px;
  flex-shrink: 0;
}

.stacked-form-item-textarea .stacked-form-label {
  margin-bottom: 8px;
}

.stacked-form-input {
  flex: 1;
  height: 46px;
  border: none;
  outline: none;
  font-size: 15px;
  color: #000000;
  background: transparent;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
}

.stacked-form-input::placeholder {
  color: #c7c7cc;
}

.stacked-form-select-wrap {
  flex: 1;
  position: relative;
}

.stacked-form-select {
  width: 100%;
  height: 46px;
  border: none;
  outline: none;
  font-size: 15px;
  color: #000000;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-align: right;
  direction: rtl;
  padding-right: 18px;
}

.stacked-form-select-wrap::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #c7c7cc;
  pointer-events: none;
  font-weight: 300;
}

.stacked-form-textarea {
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  color: #000000;
  background: transparent;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.stacked-form-textarea::placeholder {
  color: #c7c7cc;
}

/* ——————————————————————————————————————————————
 *  设置页面头像上传（可点击）
 * —————————————————————————————————————————————— */

.settings-avatar {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.settings-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ——————————————————————————————————————————————
 *  我的资料（面具管理）页面
 * —————————————————————————————————————————————— */

.profile-add-btn {
  background: none;
  border: none;
  color: #000000;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 2;
}

.profile-body {
  --profile-bg-top: #f1f4f8;
  --profile-bg-bottom: #f8fafc;
  --profile-surface: rgba(255, 255, 255, 0.82);
  --profile-surface-strong: rgba(255, 255, 255, 0.94);
  --profile-line: rgba(166, 180, 198, 0.24);
  --profile-line-strong: rgba(154, 170, 189, 0.34);
  --profile-shadow: 0 14px 30px rgba(120, 137, 158, 0.09);
  --profile-shadow-soft: 0 8px 18px rgba(120, 137, 158, 0.06);
  --profile-ink: #16212d;
  --profile-muted: #667487;
  --profile-muted-soft: #7b8798;
  --profile-accent: #4b6275;
  --profile-accent-strong: #33485d;
  --profile-accent-soft: rgba(75, 98, 117, 0.12);
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 28px;
  background:
    radial-gradient(circle at top right, rgba(120, 146, 174, 0.08), transparent 34%),
    linear-gradient(180deg, var(--profile-bg-top) 0%, var(--profile-bg-bottom) 100%);
}

.profile-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--profile-muted);
  text-transform: none;
  letter-spacing: -0.01em;
  padding: 0 2px;
  margin-bottom: 12px;
  margin-top: 24px;
}

.profile-section-title:first-child,
.profile-active-section .profile-section-title {
  margin-top: 0;
}

.profile-active-section {
  margin-bottom: 10px;
}

.profile-active-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 16px 18px;
  border: 1px solid var(--profile-line);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(252,253,255,0.96) 100%);
  box-shadow: var(--profile-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.profile-active-card-info {
  flex: 1;
  min-width: 0;
}

.profile-active-card-desc {
  font-size: 13px;
  color: var(--profile-muted-soft);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-active-badge {
  font-size: 12px;
  font-weight: 600;
  color: #4e7b62;
  background: rgba(115, 154, 130, 0.14);
  padding: 5px 11px;
  border-radius: 999px;
  flex-shrink: 0;
}

.profile-mask-item-content.is-active {
  border-color: rgba(94, 122, 145, 0.28);
  box-shadow: 0 18px 32px rgba(108, 126, 147, 0.12);
}

.profile-placeholder {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  text-align: center;
}

.profile-placeholder-icon {
  font-size: 44px;
  line-height: 1;
}

.profile-placeholder-title {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

.profile-placeholder-copy {
  max-width: 280px;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

.profile-create-entry {
  display: flex;
  margin-bottom: 18px;
}

.profile-create-cta {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(69, 90, 111, 0.12);
  border-radius: 18px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(86, 106, 126, 0.96) 0%, rgba(61, 80, 98, 0.98) 100%);
  color: #f7fafc;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 24px rgba(61, 80, 98, 0.16);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.profile-create-cta:active {
  transform: scale(0.985);
}

.profile-mask-list-wrap {
  min-height: 100%;
}

.profile-mask-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-mask-item-wrapper {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
}

.profile-mask-item-actions {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.profile-mask-item-wrapper.swiped-left .profile-mask-item-actions {
  opacity: 1;
  pointer-events: auto;
}

.profile-mask-delete-btn {
  min-width: 96px;
  border: none;
  background: linear-gradient(180deg, #d9695f 0%, #c94f45 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.profile-mask-item-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 78px;
  padding: 16px 18px;
  border: 1px solid var(--profile-line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(252,253,255,0.96) 100%);
  box-shadow: var(--profile-shadow-soft);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.profile-mask-item-content:hover {
  transform: translateY(-1px);
  border-color: var(--profile-line-strong);
  box-shadow: 0 14px 26px rgba(120, 137, 158, 0.1);
}

.profile-mask-item-content:active {
  transform: scale(0.985);
}

.profile-mask-item-wrapper.swiped-left .profile-mask-item-content {
  transform: translateX(-96px);
}

.profile-mask-item-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.profile-mask-item-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(223, 231, 241, 0.96), rgba(240, 243, 248, 0.98));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.88);
}

.profile-mask-item-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-mask-item-avatar-fallback {
  font-size: 22px;
  line-height: 1;
}

.profile-mask-item-name {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--profile-ink);
  letter-spacing: -0.02em;
}

.profile-mask-item-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profile-mask-item-desc {
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--profile-muted-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-mask-item-chevron {
  flex-shrink: 0;
  color: #a2adba;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.profile-empty-state {
  min-height: calc(100vh - 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 18px 12px;
}

.profile-empty-state-compact {
  min-height: 0;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 10px 4px 0;
}

.profile-empty-state-compact .profile-empty-copy {
  max-width: none;
  margin-top: 0;
}

.profile-empty-state-compact .profile-empty-create-btn {
  margin-top: 14px;
}

.profile-empty-icon {
  width: 84px;
  height: 84px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(219,234,254,0.96), rgba(238,242,255,0.98));
  box-shadow:
    0 18px 40px rgba(148, 163, 184, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.profile-empty-copy {
  max-width: 280px;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--profile-muted);
}

.profile-empty-create-btn {
  margin-top: 22px;
  min-width: 164px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(69, 90, 111, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--profile-accent-strong);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--profile-shadow-soft);
  -webkit-tap-highlight-color: transparent;
}

.profile-empty-create-btn:active {
  transform: scale(0.985);
}

/* 面具编辑页 textarea */
.mask-edit-textarea {
  height: auto !important;
  min-height: 196px;
  resize: none;
  font-family: inherit;
  line-height: 1.7;
  padding: 16px 16px !important;
}

/* 面具编辑页第三层滑入（覆盖在 profile-page 之上） */
#wallet-page {
  z-index: 100;
}

#profile-page {
  z-index: 110;
}

.mask-create-page {
  z-index: 120;
  background:
    radial-gradient(circle at top right, rgba(120, 146, 174, 0.09), transparent 34%),
    linear-gradient(180deg, #f1f4f8 0%, #f8fafc 100%) !important;
}

.mask-edit-page {
  z-index: 130;
  background:
    radial-gradient(circle at top right, rgba(120, 146, 174, 0.09), transparent 34%),
    linear-gradient(180deg, #f1f4f8 0%, #f8fafc 100%) !important;
}

.mask-edit-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mask-edit-form {
  display: grid;
  gap: 14px;
}

.mask-edit-group {
  display: grid;
  gap: 0;
  border-radius: 22px;
  border: 1px solid rgba(166, 180, 198, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(252,253,255,0.96) 100%);
  box-shadow: 0 10px 20px rgba(120, 137, 158, 0.06);
}

.mask-edit-group-persona {
  padding: 16px;
}

.mask-edit-field {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.mask-edit-group .network-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #16212d;
  margin-bottom: 0;
}

.mask-edit-group .network-input {
  border-radius: 16px;
  border: 1px solid rgba(177, 191, 207, 0.48);
  background: rgba(255, 255, 255, 0.88);
  color: #16212d;
  box-shadow: none;
}

.mask-edit-group .network-input:focus {
  border-color: rgba(90, 114, 137, 0.48);
  background: #ffffff;
}

.mask-edit-divider {
  height: 1px;
  margin: 0 16px;
  background: rgba(166, 180, 198, 0.18);
}

.mask-edit-avatar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

.mask-edit-avatar-trigger {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mask-edit-avatar-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mask-edit-avatar-thumb {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(230, 236, 244, 0.96), rgba(243, 246, 250, 0.98));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.mask-edit-avatar-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mask-edit-avatar-fallback {
  font-size: 20px;
  line-height: 1;
  color: #6280a0;
}

.mask-edit-avatar-row-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mask-edit-avatar-row-label {
  font-size: 15px;
  font-weight: 600;
  color: #16212d;
}

.mask-edit-avatar-row-value {
  font-size: 13px;
  color: #7a8696;
}

.mask-edit-avatar-row-action {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: #5b6d80;
}

.mask-edit-avatar-clear {
  min-width: 52px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(69, 90, 111, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #718093;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mask-edit-bottom-bar {
  position: sticky;
  bottom: 0;
  display: block;
  margin-top: auto;
  padding: 12px 0 calc(4px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.92) 26%, rgba(248, 250, 252, 0.98) 100%);
}

.mask-edit-primary-btn {
  min-height: 52px;
  width: 100%;
  border: 1px solid rgba(69, 90, 111, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(86, 106, 126, 0.96) 0%, rgba(61, 80, 98, 0.98) 100%);
  color: #f7fafc;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 26px rgba(61, 80, 98, 0.14);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mask-edit-primary-btn:active {
  transform: scale(0.985);
}

.mask-edit-primary-btn:disabled {
  opacity: 0.52;
  cursor: default;
  box-shadow: none;
}

.mask-edit-shell .network-btn-danger {
  margin-top: 2px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(210, 166, 161, 0.3);
  color: #ab6660;
  box-shadow: none;
}

@media (max-width: 420px) {
  .mask-edit-shell {
    padding: 14px 14px 24px;
  }

  .mask-edit-avatar-row {
    padding: 12px 14px;
  }
}

#mask-edit-page .network-body {
  flex: 1;
  min-height: 0;
}

/* ============================================================
 *  聊天对话页面（LINE 风格）
 * ============================================================ */

/* 聊天页面根容器 — 右侧滑入，覆盖整个 App */
.chat-room-page {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #92aed8;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.chat-room-page.active {
  transform: translateX(0);
}

/* ——— 聊天页顶部导航栏 ——— */
.chat-room-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(72px + var(--safe-area-top)) !important;
  padding-top: var(--safe-area-top) !important;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 8px;
  background: #92aed8;
  position: relative;
  z-index: 2;
}

/* 顶部行：角色名称 + 操作按钮 */
.info-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  margin-bottom: 0;
}

/* 底部行：位置信息 + 距离信息 */
.info-bottom-row {
  display: flex;
  align-items: center;
  height: 16px;
  padding-left: 44px; /* 与返回按钮对齐 */
}

.chat-room-back {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: #000000 !important;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.chat-room-back svg {
  width: 12px;
  height: 20px;
  flex-shrink: 0;
  stroke: #000000 !important;
  fill: none !important;
}

.character-name {
  position: absolute;
  left: 60px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 17px;
  font-weight: 700;
  color: #000000 !important;
  max-width: calc(100% - 120px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.chat-room-title-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-room-presence-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.98);
  background: transparent;
  box-shadow: none;
  color: #000000 !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
  transform: translateY(0);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.chat-room-presence-badge.is-busy {
  background: transparent;
}

.chat-room-presence-badge.is-blocked {
  background: transparent;
}

.chat-room-typing-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chat-room-typing-status[hidden] {
  display: none !important;
}

.character-name.typing-active .chat-room-title-text {
  display: none;
}

.character-name.typing-active .chat-room-presence-badge {
  display: none;
}

.chat-room-typing-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-room-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 20px;
}

.chat-room-typing-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transform: translateY(0);
  animation: chat-room-typing-bounce 0.9s ease-in-out infinite;
}

.chat-room-typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-room-typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-room-typing-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.chat-room-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.chat-room-actions button {
  background: none;
  border: none;
  color: #000000 !important;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-room-actions svg {
  width: 22px;
  height: 22px;
  stroke: #000000 !important;
  fill: none !important;
}

/* 位置图标 */
.location-icon {
  display: flex;
  align-items: center;
  margin-right: 2px;
}

.location-icon svg {
  width: 14px;
  height: 14px;
  stroke: #000000 !important;
  fill: none !important;
}

/* 位置文本 */
.location-text {
  font-size: 11px;
  color: #555 !important;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分隔符 */
.separator {
  margin: 0 2px;
  font-size: 11px;
  color: #555 !important;
  opacity: 0.7;
}

/* 距离文本 */
.distance-text {
  font-size: 11px;
  color: #555 !important;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ——— 消息区域 ——— */
.chat-room-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 16px; /* 统一左右边距为12px */
  display: flex;
  flex-direction: column;
  gap: 6px;
  will-change: transform;
  position: relative;
}

.chat-room-page.selection-mode .chat-room-messages {
  padding-bottom: calc(92px + var(--safe-area-bottom));
}

.chat-room-page.selection-mode .chat-scroll-bottom-btn {
  bottom: calc(72px + var(--safe-area-bottom));
}

/* 顶部历史加载状态提示 */
.chat-history-status {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-area-top) + 76px);
  transform: translate(-50%, -8px);
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.chat-history-status.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.chat-history-status.loading {
  background: rgba(20, 20, 20, 0.34);
}

.chat-history-status.success {
  background: rgba(142, 142, 147, 0.26);
}

.chat-history-status.error {
  background: rgba(183, 34, 34, 0.28);
}

/* 右下角回到底部按钮 */
.chat-scroll-bottom-btn {
  position: absolute;
  right: 10px;
  bottom: calc(8px + var(--safe-area-bottom));
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 12px;
  background: #f3f3f1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 3px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 6;
  -webkit-tap-highlight-color: transparent;
}

.chat-scroll-bottom-btn svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.chat-scroll-bottom-btn svg path {
  fill: none;
  stroke: #8e8e8e;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-scroll-bottom-btn.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.chat-scroll-bottom-btn:active {
  transform: translateY(1px);
}

/* 在不同用户的消息之间增加间距 */
.chat-msg-row.user + .chat-msg-row.assistant,
.chat-msg-row.assistant + .chat-msg-row.user {
  margin-top: 2px;
}

/* 日期分隔线 */
.chat-date-divider {
  text-align: center;
  padding: 8px 0;
}

.chat-date-divider span {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
}

/* 撤回消息提示样式（复用日期分隔符样式） */
.chat-recall-tip {
  text-align: center;
  padding: 8px 0;
}

.chat-recall-tip span {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
}

/* 用户撤回消息样式（可选：添加特定样式） */
.chat-recall-tip.user span {
  /* 保持默认样式，或添加特定样式 */
}

/* AI撤回消息样式（可选：添加特定样式） */
.chat-recall-tip.assistant span {
  /* 保持默认样式，或添加特定样式 */
}

/* 消息行 */
.chat-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 2px; /* 进一步减少时间戳和气泡之间的间距 */
  max-width: 80%;
  position: relative;
}

/* 1. User 消息行外层容器：强制横向排列、靠右对齐、底部对齐 */
.chat-msg-row.user {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: flex-end !important; /* 【核心药方】：强制子元素全部底边对齐 */
    margin-bottom: 0; /* 移除底部边距，让gap统一控制间距 */
    padding: 0 0 0 12px; /* 完全移除右边距，使气泡绝对贴边 */
    width: 100% !important;
    max-width: 100% !important; /* 覆盖父类的 max-width: 80% 限制 */
    box-sizing: border-box;
    gap: 0px !important; /* 移除间距，使时间戳更贴近气泡 */
}

.chat-msg-row.assistant {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important; /* 核心：让头像、气泡和时间戳底部对齐 */
  gap: 6px; /* 增加间距，避免小尾巴与头像重叠 */
  align-self: flex-start;
  width: 100% !important;
  max-width: 100% !important; /* 覆盖父类的 max-width: 80% 限制，与右侧保持一致 */
  box-sizing: border-box;
}

.chat-room-page.selection-mode .chat-msg-row.selectable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chat-room-page.selection-mode .chat-msg-row.assistant.selectable .chat-msg-bubble-wrap {
  position: relative;
  padding-left: 32px;
}

.chat-room-page.selection-mode .chat-msg-row.user.selectable .chat-msg-bubble-wrap {
  position: relative;
  padding-right: 32px;
}

.chat-room-page.selection-mode .chat-msg-row.assistant.selectable .chat-msg-bubble-wrap::before,
.chat-room-page.selection-mode .chat-msg-row.user.selectable .chat-msg-bubble-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(9, 30, 66, 0.25);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px rgba(24, 39, 75, 0.12);
  transform: translateY(-50%);
}

.chat-room-page.selection-mode .chat-msg-row.assistant.selectable .chat-msg-bubble-wrap::before {
  left: 0;
}

.chat-room-page.selection-mode .chat-msg-row.user.selectable .chat-msg-bubble-wrap::after {
  right: 0;
}

.chat-room-page.selection-mode .chat-msg-row.is-selected .chat-msg-bubble,
.chat-room-page.selection-mode .chat-msg-row.is-selected .voice-message-bar {
  box-shadow:
    0 0 0 2px rgba(52, 199, 89, 0.34),
    0 10px 24px rgba(52, 199, 89, 0.12);
}

.chat-room-page.selection-mode .chat-msg-row.is-selected.assistant .chat-msg-bubble-wrap::before,
.chat-room-page.selection-mode .chat-msg-row.is-selected.user .chat-msg-bubble-wrap::after {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border-color: #34c759;
  background: #34c759;
}

/* 角色头像（仅对方消息显示） */
.chat-msg-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  align-self: flex-start;
}

.chat-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-msg-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: #c7c7cc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* 消息气泡 */
.chat-msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 0; /* 移除气泡容器内部的间距 */
}

.chat-msg-sender {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 4px;
  margin-bottom: 2px;
}

.chat-msg-bubble {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
  position: relative;
  max-width: 100%;
}

.voice-message-bar {
  position: relative;
}

.chat-floating-emoji-layer {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.emoji-drag-layer {
  position: fixed;
  inset: 0;
  z-index: 20050;
  pointer-events: none;
  overflow: visible;
}

.chat-emoji-sticker {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  position: relative;
  overflow: visible;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  will-change: transform, opacity, filter, left, top;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease,
    filter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-emoji-sticker::before,
.chat-emoji-sticker::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 180ms ease;
}

.chat-emoji-sticker::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0%, rgba(255, 230, 160, 0.42) 36%, rgba(255, 255, 255, 0) 74%);
  transform: scale(0.6);
  filter: blur(1px);
  z-index: -2;
}

.chat-emoji-sticker::after {
  inset: 1px;
  background: radial-gradient(circle, rgba(255, 225, 130, 0.3) 0%, rgba(255, 255, 255, 0) 72%);
  transform: scale(0.78);
  filter: blur(9px);
  z-index: -3;
}

.chat-emoji-sticker.attached {
  position: absolute;
  z-index: 5;
}

.chat-emoji-sticker.floating {
  position: absolute;
  pointer-events: auto;
}

.chat-emoji-sticker[data-emoji-sticker-placement="assistant-top-right"] {
  left: calc(100% - 8px);
  top: 4px;
}

.chat-emoji-sticker[data-emoji-sticker-placement="user-top-left"] {
  left: 10px;
  top: 4px;
}

.chat-emoji-sticker.drag-origin {
  opacity: 0.28;
  filter: saturate(0.88);
}

.chat-emoji-sticker.drag-origin-hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.76);
  filter: blur(1px);
  pointer-events: none;
}

.chat-emoji-sticker:focus {
  outline: none;
}

.chat-emoji-sticker.pressing::before,
.emoji-picker-item.pressing::before {
  opacity: 1;
  transform: scale(1.08);
}

.chat-emoji-sticker.drag-proxy {
  position: fixed;
  z-index: 20051;
  pointer-events: none;
  cursor: grabbing;
  width: 40px;
  height: 40px;
  font-size: 34px;
  transform: translate(-50%, -50%) scale(1.12) rotate(var(--emoji-drag-tilt, -8deg));
  filter:
    drop-shadow(0 14px 28px rgba(15, 23, 42, 0.18))
    drop-shadow(0 4px 10px rgba(255, 255, 255, 0.26));
  transition:
    left 52ms linear,
    top 52ms linear,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-emoji-drag-proxy {
  display: flex;
}

.chat-emoji-sticker.drag-proxy::before,
.chat-emoji-sticker.drag-proxy::after {
  opacity: 1;
}

.chat-emoji-sticker.drag-proxy::before {
  inset: 5px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.94) 0%, rgba(255, 229, 141, 0.48) 38%, rgba(255, 255, 255, 0) 72%);
  transform: scale(1.04);
  filter: blur(0.6px);
}

.chat-emoji-sticker.drag-proxy::after {
  inset: -1px;
  background: radial-gradient(circle, rgba(255, 214, 102, 0.28) 0%, rgba(255, 255, 255, 0) 74%);
  transform: scale(1.16);
  filter: blur(13px);
}

.chat-emoji-sticker.drag-proxy.snap-active {
  transform: translate(-50%, -50%) scale(1.24) rotate(var(--emoji-drag-tilt, -10deg));
  filter:
    drop-shadow(0 18px 36px rgba(15, 23, 42, 0.22))
    drop-shadow(0 0 18px rgba(255, 223, 121, 0.42));
}

.chat-msg-bubble.emoji-snap-target,
.voice-message-bar.emoji-snap-target {
  position: relative;
  box-shadow:
    0 0 0 2px rgba(255, 210, 98, 0.28),
    0 12px 28px rgba(255, 210, 98, 0.16);
  filter: saturate(1.04) brightness(1.02);
  transform: translateY(-1px) scale(1.012);
  transition:
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-msg-bubble.emoji-snap-target.emoji-snap-target-activated,
.voice-message-bar.emoji-snap-target.emoji-snap-target-activated {
  animation: emojiSnapHostPulse 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-msg-bubble.emoji-snap-target-confirmed,
.voice-message-bar.emoji-snap-target-confirmed {
  animation: emojiSnapHostConfirm 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-emoji-sticker.drag-proxy.lift-off {
  opacity: 0.78;
  transform: translate(-50%, -50%) scale(0.92) rotate(-3deg);
}

.chat-emoji-sticker.drag-proxy.lifted:not(.snap-active) {
  animation: emojiDragProxyFloat 1.8s ease-in-out infinite alternate;
}

.chat-emoji-sticker.drag-proxy.lifted.snap-active {
  animation: emojiDragProxySnapFloat 1.1s ease-in-out infinite alternate;
}

.chat-emoji-sticker.drag-proxy.snap-assistant {
  --emoji-drag-tilt: 9deg;
}

.chat-emoji-sticker.drag-proxy.snap-user {
  --emoji-drag-tilt: -9deg;
}

.chat-emoji-sticker.settle-attached {
  animation: emojiStickerSettleAttached 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-emoji-sticker.settle-floating {
  animation: emojiStickerSettleFloating 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.emoji-sticker-dragging,
.emoji-sticker-dragging body {
  cursor: grabbing;
}

@keyframes emojiDragProxyFloat {
  0% {
    transform: translate(-50%, -50%) scale(1.16) rotate(calc(var(--emoji-drag-tilt, -8deg) - 1.5deg));
  }
  100% {
    transform: translate(-50%, -50%) scale(1.21) rotate(calc(var(--emoji-drag-tilt, -8deg) + 1.5deg));
  }
}

@keyframes emojiDragProxySnapFloat {
  0% {
    transform: translate(-50%, -50%) scale(1.22) rotate(calc(var(--emoji-drag-tilt, -8deg) - 1deg));
  }
  100% {
    transform: translate(-50%, -50%) scale(1.27) rotate(calc(var(--emoji-drag-tilt, -8deg) + 1deg));
  }
}

@keyframes emojiSnapHostPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 210, 98, 0),
      0 0 0 rgba(255, 210, 98, 0);
    transform: translateY(0) scale(1);
  }
  45% {
    box-shadow:
      0 0 0 4px rgba(255, 210, 98, 0.14),
      0 16px 36px rgba(255, 210, 98, 0.18);
    transform: translateY(-2px) scale(1.015);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(255, 210, 98, 0.28),
      0 12px 28px rgba(255, 210, 98, 0.16);
    transform: translateY(-1px) scale(1.012);
  }
}

@keyframes emojiSnapHostConfirm {
  0% {
    box-shadow:
      0 0 0 2px rgba(255, 210, 98, 0.28),
      0 12px 28px rgba(255, 210, 98, 0.16);
  }
  45% {
    box-shadow:
      0 0 0 6px rgba(255, 210, 98, 0.18),
      0 16px 40px rgba(255, 210, 98, 0.22);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(255, 210, 98, 0.28),
      0 12px 28px rgba(255, 210, 98, 0.16);
  }
}

@keyframes emojiStickerSettleAttached {
  0% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.62) rotate(-10deg);
    filter: brightness(1.08);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.16) rotate(5deg);
    filter: brightness(1.06);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    filter: none;
  }
}

@keyframes emojiStickerSettleFloating {
  0% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(0.76) rotate(-8deg);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14) rotate(4deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

.chat-msg-bubble.photo-bubble {
  padding: 0;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible;
  box-shadow: none !important;
}

.chat-msg-bubble.sticker-bubble {
  padding: 6px;
  background: transparent !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

.chat-msg-row.assistant .chat-msg-bubble.photo-bubble,
.chat-msg-row.assistant .chat-msg-bubble.sticker-bubble,
.chat-msg-row.user .chat-msg-bubble.photo-bubble {
  background: transparent !important;
  padding: 0;
  border-radius: 0 !important;
}

.chat-msg-row.user .chat-msg-bubble.sticker-bubble {
  background: transparent !important;
  padding: 0;
  border-radius: 0 !important;
}

.chat-msg-row.assistant .chat-msg-bubble.photo-bubble::before,
.chat-msg-row.assistant .chat-msg-bubble.sticker-bubble::before,
.chat-msg-row.user .chat-msg-bubble.photo-bubble::after {
  display: none;
}

.chat-msg-row.user .chat-msg-bubble.sticker-bubble::after {
  display: none;
}

/* 对方消息 — 白色气泡 */
.chat-msg-row.assistant .chat-msg-bubble {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 20px !important;
  position: relative;
}

/* 对方消息气泡小尾巴 - 左上角 */
.chat-msg-row.assistant .chat-msg-bubble::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -6px;
  width: 20px;
  height: 20px;
  background-image: url('https://i.ibb.co/ycdv3Gg8/IMG-4969.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 4. 气泡本体：稳重的绿色与纯黑文字 */
.chat-msg-row.user .chat-msg-bubble {
    background-color: #6ce579 !important;
    color: #000000 !important;
    padding: 8px 14px;
    border-radius: 20px !important;
    word-wrap: break-word;
    display: inline-block;
    position: relative;
}

/* 用户消息气泡小尾巴 - 右上角 */
.chat-msg-row.user .chat-msg-bubble::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -6px;
  width: 20px;
  height: 20px;
  background-image: url('https://i.ibb.co/8D0zGc4j/IMG-4959.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 隐藏小尾巴 */
.chat-msg-bubble.hide-tail::before,
.chat-msg-bubble.hide-tail::after {
  display: none;
}

.spatial-chip-slider {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.spatial-chip-slider:disabled {
  opacity: 0.42;
  cursor: default;
}

.spatial-chip-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(229, 234, 224, 0.96);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.spatial-chip-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 999px;
  border: 1px solid rgba(174, 180, 170, 0.24);
  background: #7a8077;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.spatial-chip-slider::-moz-range-track {
  height: 8px;
  border: none;
  border-radius: 999px;
  background: rgba(229, 234, 224, 0.96);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.spatial-chip-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(174, 180, 170, 0.24);
  border-radius: 999px;
  background: #7a8077;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

/* 消息时间戳 */
.chat-msg-time {
  font-size: 10px;
  color: #3d5275 !important;
  padding: 0 4px;
  align-self: flex-start; /* 改为flex-start，让时间戳不强制底部对齐 */
  flex-shrink: 0;
  white-space: nowrap;
}

/* Assistant消息时间戳：与气泡底部边对齐并上移 */
.chat-msg-row.assistant .chat-msg-time {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* 文字靠左对齐 */
  justify-content: flex-end !important; /* 【核心药方】：底部对齐 */
  margin-bottom: 4px !important; /* 【像素级微调】：在绝对沉底的基础上，向上抬起 4px */
  margin-top: auto !important; /* 彻底清除上方拉扯力 */
  margin-left: -4px !important; /* 向内收，让时间戳更贴近气泡 */
  position: static; /* 移除相对定位，使用margin控制 */
  align-self: flex-end !important; /* 确保时间戳与气泡底部对齐 */
}

/* 2. 时间与"已读"状态容器：纵向排列，与气泡底部边对齐并上移 */
.chat-msg-row.user .chat-msg-time {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* 文字靠右对齐 */
    justify-content: flex-end !important; /* 【核心药方】：底部对齐 */
    margin-right: 0 !important; /* 完全移除右边距 */
    margin-bottom: 4px !important; /* 【像素级微调】：在绝对沉底的基础上，向上抬起 4px */
    margin-top: auto !important; /* 彻底清除上方拉扯力 */
    margin-left: 0px !important; /* 完全贴近角色气泡，与Assistant保持一致 */
    font-size: 10px; /* 与Assistant消息时间戳保持一致 */
    color: #3d5275 !important;
    white-space: nowrap !important; /* 绝对禁止折行 */
    position: static; /* 移除相对定位，使用margin控制 */
    align-self: flex-end !important; /* 确保时间戳与气泡底部对齐，与Assistant保持一致 */
}

.chat-msg-row.user .chat-msg-read {
    font-size: 10px; /* 与时间戳字体大小保持一致 */
    line-height: 1.2;
    margin-bottom: 2px;
    /* 默认添加过渡动画效果 */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* "已读"标签显示状态 */
.chat-msg-row.user .chat-msg-read.visible {
    opacity: 1;
    visibility: visible;
}

/* "已读"标签隐藏状态 - 保留占位空间，避免布局跳动 */
.chat-msg-row.user .chat-msg-read.hidden {
    opacity: 0;
    visibility: hidden;
}

/* 3. 气泡容器：限制最大宽度，防止挤压时间戳 */
.chat-msg-row.user .chat-msg-bubble-wrap {
    max-width: 75%; /* 增加最大宽度，使气泡能够更宽 */
    flex-shrink: 0; /* 防止气泡被强行压缩变形 */
}

/* 左侧气泡容器：释放最大宽度限制，与右侧保持一致 */
.chat-msg-row.assistant .chat-msg-bubble-wrap {
    max-width: 75%; /* 与右侧气泡保持一致的最大宽度 */
    flex-shrink: 0; /* 防止气泡被强行压缩变形 */
}

.chat-photo-card {
  position: relative;
  width: min(240px, 62vw);
  border-radius: 16px;
  overflow: hidden;
}

.chat-sticker-image {
  display: block;
  width: min(148px, 38vw);
  max-width: 148px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.12));
}

.chat-sticker-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 72px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  color: #4b5563;
  font-size: 13px;
  line-height: 1.4;
}

.chat-msg-row.sticker-row .chat-msg-bubble-wrap {
  max-width: none;
}

.chat-photo-card-album {
  background: #f2f4f8;
}

.chat-photo-card-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  background: #dde3ec;
}

.chat-photo-card-empty {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6776;
  background: linear-gradient(135deg, #e7ecf4 0%, #d9e1ef 100%);
}

.chat-photo-card-described {
  width: min(228px, 60vw);
  aspect-ratio: 1.72 / 1;
  border-radius: 32px;
  background: var(--photo-glass-shell, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  cursor: pointer;
  isolation: isolate;
  transform: translateZ(0);
  background-clip: padding-box;
  contain: paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  clip-path: inset(0 round 32px);
  box-shadow:
    0 20px 40px -10px var(--photo-glass-shadow, rgba(0, 0, 0, 0.05)),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  border: none;
  overflow: hidden;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease,
    backdrop-filter 220ms ease,
    -webkit-backdrop-filter 220ms ease;
}

.chat-photo-card-described:hover {
  box-shadow:
    0 24px 46px -12px var(--photo-glass-shadow, rgba(0, 0, 0, 0.05)),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.chat-photo-card-described:active {
  transform: scale(0.985);
}

.chat-photo-card-glass,
.chat-photo-card-mist-layer,
.chat-photo-card-mist,
.chat-photo-card-refraction,
.chat-photo-card-sheen,
.chat-photo-card-crystal-border,
.chat-photo-card-glow {
  position: absolute;
  pointer-events: none;
}

.chat-photo-card-glass {
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 100%);
  filter: saturate(106%);
  transition:
    filter 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-photo-card-mist-layer {
  inset: 1px;
  border-radius: inherit;
  overflow: hidden;
}

.chat-photo-card-mist {
  border-radius: 999px;
  opacity: 0.56;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-photo-card-mist-a {
  top: -28%;
  left: -24%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, var(--photo-glass-tint-a, rgba(220, 200, 255, 0.4)) 0%, transparent 70%);
  animation: chatPhotoDrift 20s ease-in-out infinite alternate;
}

.chat-photo-card-mist-b {
  right: -24%;
  bottom: -26%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, var(--photo-glass-tint-b, rgba(200, 255, 220, 0.4)) 0%, transparent 70%);
  animation: chatPhotoDriftReverse 25s ease-in-out infinite alternate;
}

.chat-photo-card-mist-c {
  top: 24%;
  right: -2%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--photo-glass-tint-c, rgba(255, 210, 230, 0.4)) 0%, transparent 70%);
  opacity: 0.34;
}

.chat-photo-card-mist-d {
  bottom: 20%;
  left: -4%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(255, 235, 200, 0.32) 0%, transparent 70%);
  opacity: 0.22;
}

.chat-photo-card-refraction {
  inset: 1px;
  border-radius: inherit;
  opacity: 0.03;
}

.chat-photo-card-refraction svg {
  width: 100%;
  height: 100%;
}

.chat-photo-card-refraction circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 0.2;
}

.chat-photo-card-sheen {
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.2) 100%);
  mix-blend-mode: overlay;
  opacity: 0.78;
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-photo-card-crystal-border {
  inset: 0.5px;
  border-radius: inherit;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.chat-photo-card-glow {
  inset: auto auto -14% 4%;
  width: 134px;
  height: 134px;
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--photo-glass-tint-a, rgba(120, 255, 214, 0.28)) 0%, rgba(255, 255, 255, 0) 66%);
  filter: blur(14px);
  opacity: 0.14;
}

.chat-photo-card-caption-overlay {
  position: absolute;
  inset: 1px;
  display: block;
  padding: 16px 18px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 22%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0.12) 100%),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 600ms cubic-bezier(0.23, 1, 0.32, 1),
    backdrop-filter 600ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-backdrop-filter 600ms cubic-bezier(0.23, 1, 0.32, 1),
    background 600ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale(0.985);
}

.chat-photo-card-caption {
  width: 100%;
  height: 100%;
  padding: 2px 2px 4px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(37, 52, 70, 0.92);
  text-align: left;
  font-family: "Noto Serif SC", "Songti SC", "STSong", "Times New Roman", serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  cursor: grab;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.58) rgba(255, 255, 255, 0.08);
  word-break: break-word;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition:
    opacity 600ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 600ms cubic-bezier(0.23, 1, 0.32, 1),
    color 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

.chat-photo-card-caption::-webkit-scrollbar {
  width: 4px;
}

.chat-photo-card-caption::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.52);
  border-radius: 999px;
}

.chat-photo-card-caption::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.chat-photo-card-caption:active {
  cursor: grabbing;
}

.chat-photo-card-described.is-caption-visible .chat-photo-card-caption-overlay {
  opacity: 1;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.1) 22%, rgba(255, 255, 255, 0.03) 52%, rgba(255, 255, 255, 0.14) 100%),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 38%);
  backdrop-filter: blur(6px) saturate(114%);
  -webkit-backdrop-filter: blur(6px) saturate(114%);
  transform: scale(1);
}

.chat-photo-card-described.is-caption-visible .chat-photo-card-caption {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.chat-photo-card-described.is-caption-visible .chat-photo-card-glass {
  filter: saturate(110%) brightness(1.01);
  transform: scale(1.008);
}

.chat-photo-card-described.is-caption-visible .chat-photo-card-mist-a {
  transform: translate(4%, 4%) scale(1.04);
  opacity: 0.62;
}

.chat-photo-card-described.is-caption-visible .chat-photo-card-mist-b {
  transform: translate(-4%, -4%) scale(1.04);
  opacity: 0.58;
}

.chat-photo-card-described.is-caption-visible .chat-photo-card-mist-c,
.chat-photo-card-described.is-caption-visible .chat-photo-card-mist-d {
  opacity: 0.38;
}

.chat-photo-card-described.is-caption-visible .chat-photo-card-sheen {
  opacity: 1;
  transform: translate3d(1.5%, -1%, 0);
}

/* Safari 在毛玻璃圆角上容易泄露矩形合成层，适度降低混合层强度来换稳定裁切。 */
@supports (-webkit-touch-callout: none) {
  .chat-photo-card-sheen {
    mix-blend-mode: normal;
    opacity: 0.36;
  }

  .chat-photo-card-refraction {
    opacity: 0.02;
  }

  .chat-photo-card-glass {
    filter: none;
  }
}

@keyframes chatPhotoDrift {
  0% {
    transform: translate(-10%, -10%) scale(1);
  }
  100% {
    transform: translate(10%, 10%) scale(1.1);
  }
}

@keyframes chatPhotoDriftReverse {
  0% {
    transform: translate(10%, 10%) scale(1.1);
  }
  100% {
    transform: translate(-10%, -10%) scale(1);
  }
}

/* AI 思考中动画 */
.chat-msg-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
}

.chat-msg-typing .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #999;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.chat-msg-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-msg-typing .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ——— 底部输入栏 ——— */
.chat-room-input-bar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px; /* 减小间距使左侧按钮更紧凑 */
  padding: 8px 8px; /* 减小左右padding */
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  /* 修复透明竖线问题 */
  outline: none;
  box-shadow: none;
  position: relative; /* 为引用预览定位提供参考 */
  overflow: visible;
  z-index: 20;
}

.chat-room-selection-toolbar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--safe-area-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.14),
    0 4px 10px rgba(15, 23, 42, 0.08);
  z-index: 5;
}

.chat-room-selection-toolbar[hidden] {
  display: none !important;
}

.chat-room-selection-count {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #10213a;
}

.chat-room-selection-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.chat-room-selection-btn {
  min-width: 72px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-room-selection-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.chat-room-selection-btn.secondary {
  background: rgba(16, 33, 58, 0.08);
  color: #10213a;
}

.chat-room-selection-btn.destructive {
  background: #ff453a;
  color: #ffffff;
}

.chat-room-selection-btn:not(:disabled):active {
  transform: scale(0.96);
}

.chat-room-page.selection-mode .chat-room-input-bar,
.chat-room-page.selection-mode .chat-room-actions,
.chat-room-page.selection-mode .info-bottom-row {
  display: none !important;
}

/* 左侧功能按钮组容器 */
.chat-room-action-btns-group {
  display: flex;
  gap: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 左侧功能按钮统一样式 */
.chat-room-action-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  color: #555;
  padding: 0;
  margin: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.chat-room-action-btn svg {
  width: 24px;
  height: 24px;
  transform-origin: center;
}

.chat-room-add-btn svg {
  transition: transform 220ms cubic-bezier(0.22, 1.24, 0.36, 1);
}

.chat-room-add-btn.is-active {
  color: #172033;
}

.chat-room-add-btn.is-active svg {
  transform: rotate(45deg) scale(1.03);
}

.chat-plus-drawer-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 18;
}

.chat-plus-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.chat-plus-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.chat-plus-drawer {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(var(--chat-plus-drawer-offset, 58px) - 1px);
  padding: 10px 8px 12px;
  border-radius: 26px 26px 0 0;
  border: 1px solid rgba(222, 226, 233, 0.92);
  border-bottom: none;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.chat-plus-drawer.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.chat-plus-drawer-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, 58px);
  gap: 6px;
  align-items: start;
  align-content: start;
  min-height: 122px;
}

.chat-plus-drawer-item {
  min-height: 58px;
  height: 58px;
  border: 1px solid rgba(228, 233, 239, 0.96);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 6px 14px rgba(15, 23, 42, 0.035);
  color: #233042;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px 6px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
    background 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-plus-drawer.is-open .chat-plus-drawer-item {
  opacity: 1;
  transform: translateY(0);
}

.chat-plus-drawer.is-open .chat-plus-drawer-item:nth-child(1) {
  transition-delay: 20ms;
}

.chat-plus-drawer.is-open .chat-plus-drawer-item:nth-child(2) {
  transition-delay: 46ms;
}

.chat-plus-drawer.is-open .chat-plus-drawer-item:nth-child(3) {
  transition-delay: 72ms;
}

.chat-plus-drawer-item:active {
  background: linear-gradient(180deg, #f6f8fb 0%, #eef3f8 100%);
  border-color: rgba(210, 218, 229, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 8px rgba(15, 23, 42, 0.055);
  transform: translateY(1px) scale(0.985);
}

.chat-plus-drawer-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #29374a;
}

.chat-plus-drawer-icon svg {
  width: 100%;
  height: 100%;
}

.chat-plus-drawer-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1f2a3d;
  line-height: 1;
  white-space: nowrap;
}

/* 输入栏状态样式 */
.chat-room-input-bar.collapsed .chat-room-action-btns-group {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  width: 0;
  overflow: hidden;
}

.chat-schedule-sheet-backdrop,
.chat-schedule-notice-detail-backdrop {
  z-index: calc(var(--z-index-stacked-modal) + 1);
}

.chat-schedule-sheet,
.chat-schedule-notice-detail-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(80vh, 720px);
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  box-shadow: 0 -18px 40px rgba(12, 18, 30, 0.14);
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.2, 0.86, 0.24, 1);
  overflow: hidden;
}

.chat-schedule-sheet-backdrop.show .chat-schedule-sheet,
.chat-schedule-notice-detail-backdrop.show .chat-schedule-notice-detail-sheet {
  transform: translateY(0);
}

.chat-schedule-sheet-handle {
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.14);
  margin: 10px auto 4px;
}

.chat-schedule-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px 14px;
}

.chat-schedule-sheet-title {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.chat-schedule-sheet-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: #64748b;
}

.chat-schedule-sheet-close {
  border: none;
  background: rgba(226, 232, 240, 0.74);
  color: #0f172a;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

.chat-schedule-sheet-body {
  height: calc(100% - 74px);
  overflow-y: auto;
  padding: 0 18px 18px;
}

.chat-schedule-sheet-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-schedule-refresh-btn,
.chat-schedule-summon-btn {
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.chat-schedule-refresh-btn[disabled],
.chat-schedule-summon-btn[disabled] {
  opacity: 0.52;
  box-shadow: none;
}

.chat-schedule-error {
  font-size: 13px;
  color: #b91c1c;
}

.chat-schedule-current-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.94) 100%);
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.chat-schedule-current-card.is-gap {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.chat-schedule-current-card.notice {
  margin-top: 8px;
}

.chat-schedule-current-label {
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-schedule-current-title {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

.chat-schedule-current-copy,
.chat-schedule-item-detail {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: #334155;
  white-space: pre-wrap;
}

.chat-schedule-current-location {
  margin-top: 10px;
  font-size: 12px;
  color: #64748b;
}

.chat-schedule-timeline-shell {
  margin-top: 18px;
  padding: 12px 12px 24px 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.74) 100%);
  border: 1px solid rgba(226, 232, 240, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
  overflow: hidden;
}

.chat-schedule-timeline {
  position: relative;
  min-height: 2160px;
}

.chat-schedule-hour-marker {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}

.chat-schedule-hour-label {
  position: absolute;
  left: 10px;
  top: 0;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #64748b;
}

.chat-schedule-hour-line {
  position: absolute;
  left: 64px;
  right: 12px;
  top: 0;
  border-top: 1px solid rgba(203, 213, 225, 0.24);
}

.chat-schedule-hour-marker.is-major .chat-schedule-hour-line {
  border-top-color: rgba(148, 163, 184, 0.42);
}

.chat-schedule-now-line {
  position: absolute;
  left: 64px;
  right: 12px;
  height: 0;
  border-top: 2px solid rgba(37, 99, 235, 0.18);
  pointer-events: none;
}

.chat-schedule-now-dot {
  position: absolute;
  left: -4px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.72);
  box-shadow: 0 0 0 4px rgba(219, 234, 254, 0.85);
}

.chat-schedule-event {
  position: absolute;
  left: 72px;
  right: 12px;
  min-width: 0;
  padding: 8px 10px 9px;
  border-radius: 12px;
  border: 1px solid rgba(180, 191, 208, 0.96);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.chat-schedule-event.level-free {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
}

.chat-schedule-event.level-busy {
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.chat-schedule-event.level-blocked {
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.chat-schedule-event.is-current {
  border-color: rgba(37, 99, 235, 0.58);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.chat-schedule-event-time {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #334155;
}

.chat-schedule-event-title {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.chat-schedule-event-meta {
  display: flex;
  gap: 4px;
  margin-top: 5px;
  align-items: center;
  min-width: 0;
}

.chat-schedule-event-state {
  font-size: 10px;
  font-weight: 700;
}

.chat-system-notice-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.chat-schedule-event-state.state-free {
  color: #166534;
}

.chat-schedule-event-state.state-busy {
  color: #c2410c;
}

.chat-schedule-event-state.state-blocked {
  color: #334155;
}

.chat-system-notice-pill {
  background: rgba(241, 245, 249, 0.96);
  color: #334155;
}

.chat-schedule-event-location {
  min-width: 0;
  font-size: 10px;
  color: #64748b;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-schedule-event-separator {
  flex-shrink: 0;
  font-size: 10px;
  color: #94a3b8;
}

.chat-schedule-empty-state {
  margin-top: 16px;
  padding: 22px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(226, 232, 240, 0.96);
}

.chat-schedule-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.chat-schedule-empty-copy {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
}

.chat-system-notice-row {
  text-align: center;
  padding: 8px 0;
}

.chat-system-notice-chip {
  border: none;
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}

.chat-schedule-notice-detail-modal {
  width: min(100vw - 48px, 320px);
  margin: auto;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  padding: 18px 16px 14px;
}

.chat-schedule-notice-detail-backdrop {
  z-index: calc(var(--z-index-stacked-modal) + 2);
}

.chat-schedule-notice-detail-backdrop.show .chat-schedule-notice-detail-modal {
  transform: scale(1);
  opacity: 1;
}

.chat-schedule-notice-detail-modal {
  transform: scale(0.96);
  opacity: 0;
  transition: transform 160ms ease, opacity 160ms ease;
}

.chat-schedule-notice-detail-body {
  min-height: 124px;
  max-height: min(48vh, 360px);
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
  white-space: pre-wrap;
}

.chat-schedule-notice-loading,
.chat-schedule-notice-error-text {
  min-height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.chat-schedule-notice-error-text {
  min-height: auto;
  color: #0f172a;
  font-weight: 600;
}

.chat-schedule-notice-error-subtext {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
  text-align: center;
}

.chat-schedule-notice-retry {
  display: block;
  margin: 10px auto 0;
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
}

.chat-schedule-notice-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.chat-schedule-notice-close-btn,
.chat-schedule-notice-summon-btn {
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
}

.chat-schedule-notice-summon-btn[disabled] {
  color: #94a3b8;
}

.chat-room-input-bar.collapsed .chat-room-expand-btn {
  display: flex !important;
}

.chat-room-input-bar.expanded .chat-room-expand-btn {
  display: none !important;
}

.chat-room-input-bar.expanded .chat-room-action-btns-group {
  opacity: 1;
  transform: scale(1);
}

.chat-room-input-bar.expanded .chat-room-emoji-btn-inner {
  display: none !important;
}

.chat-room-input-bar:not(.expanded) .chat-room-emoji-btn-inner {
  display: flex !important;
}

.chat-room-input-bar.expanded .chat-room-textarea {
  max-height: 36px !important;
  min-height: 36px !important;
  min-width: 0 !important; /* 修复：允许输入框在展开状态下也能缩小 */
  height: 36px !important;
  overflow: hidden !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-right: 14px !important;
}

.chat-room-input-bar.expanded .chat-room-textarea::-webkit-scrollbar {
  display: none !important;
}

/* AI和发送按钮公共样式 */
.chat-room-ai-btn,
.chat-room-send-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  margin-left: 4px;
  margin-right: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.chat-room-ai-btn svg,
.chat-room-send-btn svg {
  width: 24px;
  height: 24px;
}

/* AI按钮特有样式 */
.chat-room-ai-btn {
  color: #555;
}

/* 发送按钮特有样式 */
.chat-room-send-btn {
  color: #007AFF;
}

.chat-room-send-btn:active {
  transform: scale(0.9);
}

/* 输入框容器（包含输入框和内部表情按钮） */
.chat-room-input-wrapper {
  flex: 1;
  min-width: 0; /* 修复：允许容器在空间不足时缩小 */
  position: relative;
  display: flex;
  align-items: flex-end;
  transition: all 0.3s ease;
}

/* 输入框 */
.chat-room-textarea {
  flex: 1;
  min-width: 0; /* 修复：允许输入框在空间不足时缩小 */
  min-height: 36px;
  max-height: 100px;
  padding: 8px 44px 8px 14px; /* 右侧padding增加以避免文字被表情图标遮挡 */
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  background: #f7f7f7;
  font-size: 15px;
  line-height: 1.4;
  color: #000000;
  resize: none;
  outline: none;
  font-family: inherit;
  overflow-y: auto;
  /* 修复透明竖线问题 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  background-clip: padding-box;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  transition: max-height 0.3s ease, overflow 0.3s ease;
}

.chat-room-textarea::placeholder {
  color: #b0b0b0;
}

/* 修复透明竖线问题 - 隐藏滚动条 */
.chat-room-textarea::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* Firefox特定修复 */
.chat-room-textarea::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* IE/Edge特定修复 */
.chat-room-textarea::-ms-expand {
  display: none;
}

/* 输入框内部的表情按钮 */
.chat-room-emoji-btn-inner {
  position: absolute;
  right: 10px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  color: #8e8e93;
  padding: 0;
  flex-shrink: 0;
}

.chat-room-emoji-btn-inner svg {
  width: 24px;
  height: 24px;
}

.expression-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1200;
}

.expression-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.expression-drawer {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 8px);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(210, 214, 220, 0.9);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  padding: 10px 10px 12px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1300;
}

.expression-drawer.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.expression-drawer-handle {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: #d1d5db;
  margin: 2px auto 10px;
}

.expression-drawer-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 2px;
  margin-bottom: 10px;
  background: #f1f5f9;
  border-radius: 16px;
}

.expression-drawer-mode-btn {
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.expression-drawer-mode-btn.active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.expression-drawer-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.expression-drawer-tabs.hidden,
.expression-drawer-grid.hidden,
.expression-drawer-empty.hidden {
  display: none !important;
}

.expression-drawer-tabs::-webkit-scrollbar {
  display: none;
}

.expression-drawer-tab {
  flex: 0 0 auto;
  border: none;
  background: #eef2f7;
  color: #475569;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
}

.expression-drawer-tab.active {
  background: #111827;
  color: #fff;
}

.expression-drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 264px;
  overflow-y: auto;
}

.expression-drawer-grid.is-empty {
  display: none;
}

.expression-drawer-item {
  border: none;
  background: #f8fafc;
  border-radius: 18px;
  padding: 6px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expression-drawer-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.expression-drawer-empty {
  display: none;
  padding: 24px 12px 18px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}

.expression-drawer-empty.active {
  display: block;
}

.emoji-picker-panel {
  display: none;
  max-height: 296px;
  overflow-y: auto;
  padding-right: 2px;
}

.emoji-picker-panel.active {
  display: block;
}

.emoji-picker-compose {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.emoji-picker-compose.is-invalid {
  border-color: rgba(239, 68, 68, 0.22);
  box-shadow: 0 0 0 2px rgba(254, 202, 202, 0.34);
}

.emoji-picker-compose-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.emoji-picker-input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  min-height: 42px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.emoji-picker-compose.is-invalid .emoji-picker-input-wrap {
  border-color: rgba(248, 113, 113, 0.4);
  box-shadow: 0 0 0 3px rgba(254, 202, 202, 0.45);
}

.emoji-picker-input-wrap:focus-within {
  border-color: rgba(59, 130, 246, 0.32);
  box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.42);
  transform: translateY(-1px);
}

.emoji-picker-input-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.emoji-picker-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.2;
  padding: 0;
  outline: none;
}

.emoji-picker-input::placeholder {
  color: #94a3b8;
}

.emoji-picker-clear-btn {
  flex-shrink: 0;
  border: none;
  width: 34px;
  height: 34px;
  background: rgba(241, 245, 249, 0.96);
  color: #64748b;
  border-radius: 12px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease;
}

.emoji-picker-clear-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.emoji-picker-preview-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fff8e6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 8px 18px rgba(255, 210, 98, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  touch-action: none;
  -webkit-touch-callout: none;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, filter 180ms ease;
}

.emoji-picker-preview-btn span {
  transform: translateY(1px);
}

.emoji-picker-preview-btn:focus {
  outline: none;
}

.emoji-picker-preview-btn.pressing {
  transform: translateY(-1px) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 24px rgba(255, 210, 98, 0.16);
}

.emoji-picker-compose-caption {
  padding: 6px 4px 0;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.4;
}

.emoji-picker-group + .emoji-picker-group {
  margin-top: 10px;
}

.emoji-picker-group-title {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
  padding-left: 2px;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.emoji-picker-item {
  border: none;
  background: rgba(248, 250, 252, 0.92);
  border-radius: 14px;
  min-height: 42px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.emoji-picker-item::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 223, 121, 0.56) 0%, rgba(255, 255, 255, 0) 72%);
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.emoji-picker-item.selected {
  background: rgba(255, 210, 98, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 98, 0.24);
  transform: translateY(-1px);
}

.emoji-picker-item.pressing {
  background: #eef6ff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 98, 0.3),
    0 10px 20px rgba(148, 163, 184, 0.12);
  filter: saturate(1.06);
  transform: translateY(-1px) scale(1.04);
}

.emoji-picker-item span {
  transform: translateY(1px);
}

.emoji-picker-empty {
  grid-column: 1 / -1;
  background: rgba(248, 250, 252, 0.92);
  color: #94a3b8;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 11px;
  text-align: center;
}

.expression-manager-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.24);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 2100;
}

.expression-manager-modal.active {
  display: flex;
}

.expression-manager-sheet {
  width: min(720px, 100%);
  max-height: 88vh;
  background: #fff;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.18);
}

.expression-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.expression-manager-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.expression-manager-close {
  border: none;
  background: none;
  color: #2563eb;
  font-size: 14px;
}

.expression-manager-body {
  overflow-y: auto;
  max-height: calc(88vh - 60px);
  padding: 12px 12px 24px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 24%);
}

.expression-manager-section {
  margin-bottom: 12px;
}

.expression-manager-section--compact {
  margin-bottom: 10px;
}

.expression-manager-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 10px;
}

.expression-manager-toolbar,
.expression-manager-actions,
.expression-pack-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.expression-pack-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expression-pack-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.expression-pack-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.expression-pack-name {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.expression-pack-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
}

.expression-pack-assets,
.expression-draft-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.expression-pack-asset,
.expression-draft-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(57, 61, 74, 0.08);
  border-radius: 12px;
  padding: 8px;
}

.expression-pack-asset img,
.expression-draft-item img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}

.expression-pack-asset-desc,
.expression-draft-file {
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
}

.expression-pack-asset-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.expression-asset-delete {
  margin-left: auto;
  border: 1px solid rgba(145, 52, 52, 0.14);
  border-radius: 999px;
  background: rgba(145, 52, 52, 0.08);
  color: #8d3b3b;
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.expression-draft-item-main {
  flex: 1;
  min-width: 0;
}

.expression-draft-description,
.expression-field input,
.expression-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(57, 61, 74, 0.12);
  border-radius: 12px;
  padding: 0 12px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.82);
}

.expression-bulk-text {
  width: 100%;
  min-height: 128px;
  resize: vertical;
  border: 1px solid rgba(57, 61, 74, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.82);
}

.expression-bulk-hint {
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.expression-draft-config {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.expression-field {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
}

.expression-field.hidden {
  display: none;
}

.expression-manager-panel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.character-expression-inline-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.character-expression-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.character-expression-toolbar--footer {
  padding-top: 2px;
}

.character-expression-refresh-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.character-expression-refresh-btn .material-symbols-outlined {
  font-size: 16px;
}

.character-expression-draft {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(57, 61, 74, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.character-expression-draft-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.character-expression-draft-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.character-expression-draft-meta {
  font-size: 11px;
  color: #64748b;
}

.character-expression-draft-fields {
  display: grid;
  gap: 8px;
}

.expression-field.expression-field--compact {
  gap: 4px;
}

.expression-field.expression-field--compact span {
  font-size: 11px;
}

.character-expression-bulk-field {
  grid-column: 1 / -1;
}

.character-expression-bulk-text {
  min-height: 96px;
}

.character-expression-draft-list,
.character-expression-pack-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.character-expression-draft-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.character-expression-draft-item img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: contain;
  background: #f8fafc;
  flex-shrink: 0;
}

.character-expression-draft-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.character-expression-draft-file {
  font-size: 12px;
  line-height: 1.4;
  color: #334155;
  word-break: break-all;
}

.character-expression-pack-card {
  border: 1px solid rgba(57, 61, 74, 0.08);
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.character-expression-pack-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: none;
  background: #ffffff;
  text-align: left;
}

.character-expression-pack-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.character-expression-pack-name {
  font-size: 16px;
  font-weight: 700;
  color: #262731;
}

.character-expression-pack-meta {
  font-size: 11px;
  line-height: 1.45;
  color: #707585;
}

.character-expression-pack-arrow {
  font-size: 20px;
  color: rgba(38, 39, 49, 0.48);
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.character-expression-pack-content {
  display: none;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(38, 39, 49, 0.08);
}

.character-expression-pack-card.is-open .character-expression-pack-content {
  display: block;
}

.character-expression-pack-card.is-open .character-expression-pack-arrow {
  transform: rotate(180deg);
}

.character-expression-empty {
  padding: 10px 2px 2px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.expression-pack-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
}

@media (max-width: 640px) {
  .expression-drawer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .expression-pack-assets,
  .expression-draft-list {
    grid-template-columns: 1fr;
  }
}

/* 引用指示器样式 */
.quote-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 8px;
  background-color: rgba(0, 122, 255, 0.1);
  border-left: 3px solid #007AFF;
  border-radius: 6px;
  font-size: 14px;
}


.chat-quote-preview-content {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 10px;
}

.chat-quote-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.chat-quote-text-area {
  flex: 1;
  min-width: 0;
}

.chat-quote-sender-name {
  font-size: 13px;
  font-weight: 600;
  color: #007AFF;
  margin-bottom: 2px;
}

.chat-quote-message-preview {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.chat-quote-close-btn {
  background: none;
  border: none;
  color: #8e8e93;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-quote-close-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.chat-quote-divider {
  height: 1px;
  background: #e0e0e0;
}

/* 引用消息高亮效果 */
.quoted-message-highlight {
  animation: quoteHighlight 2s ease-in-out;
}

@keyframes quoteHighlight {
  0% {
    background-color: rgba(0, 122, 255, 0.3);
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

/* 消息中的引用信息样式 */
.message-quote-reference {
  display: flex;
  margin-bottom: 8px;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border-left: 3px solid #007AFF;
  cursor: pointer;
  transition: background-color 0.2s;
}

.message-quote-reference:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.quote-reference-line {
  width: 2px;
  background-color: #007AFF;
  margin-right: 8px;
  border-radius: 1px;
}

.quote-reference-content {
  flex: 1;
  min-width: 0;
}

.quote-reference-sender {
  font-size: 12px;
  font-weight: 600;
  color: #007AFF;
  margin-bottom: 2px;
}

.quote-reference-text {
  font-size: 13px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-content {
  word-wrap: break-word;
  word-break: break-word;
}


/* AI 回复按钮（麦克风图标） */
.chat-room-ai-btn {
  color: #555 !important;
  transition: color 0.2s;
}

.chat-room-ai-btn:active {
  color: #83d27c !important;
}

.chat-room-ai-btn.loading {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ——————————————————————————————————————————————
 *  地理信息设置界面
 * —————————————————————————————————————————————— */

/* 地理信息容器 */
.geography-container {
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

/* 添加地点按钮 */
.geography-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f8f8f8;
  border: 1px dashed #c7c7cc;
  border-radius: 10px;
  color: #007AFF;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.geography-add-btn:hover {
  background: #f0f0f0;
  border-color: #007AFF;
}

.geography-add-btn:active {
  transform: scale(0.98);
}

/* 地点列表 */
.geography-list {
  margin-top: 12px;
}

/* 地点项 */
.geography-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  margin-bottom: 8px;
  position: relative;
  transition: all 0.2s ease;
}

.geography-item:hover {
  border-color: #007AFF;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
}

.geography-item:last-child {
  margin-bottom: 0;
}

/* 地点图标 */
.geography-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* 地点信息 */
.geography-item-info {
  flex: 1;
  min-width: 0;
}

.geography-item-name {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geography-item-desc {
  font-size: 13px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 地点操作按钮 */
.geography-item-actions {
  display: flex;
  gap: 8px;
  margin-left: 12px;
}

.geography-item-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f8f8f8;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.geography-item-btn:hover {
  background: #e5e5ea;
}

.geography-item-btn:active {
  transform: scale(0.9);
}

.geography-item-btn.edit {
  color: #007AFF;
}

.geography-item-btn.delete {
  color: #FF3B30;
}

/* ——————————————————————————————————————————————
 *  长按消息气泡功能样式
 * —————————————————————————————————————————————— */

/* 长按时气泡高亮效果 */
.chat-msg-bubble.long-press-active {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

/* 悬浮框背景遮罩 */
.message-context-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 10000; /* 提高到最高层级 */
}

/* 悬浮框容器 - 横向悬浮条 */
.message-context-menu {
  position: fixed;
  background: rgba(255, 255, 255, 0.7); /* 降低不透明度，增强玻璃质感 */
  backdrop-filter: blur(30px) saturate(180%); /* 增强模糊和饱和度 */
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3); /* 添加边框增强层次感 */
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); /* 增强阴影层次 */
  padding: 4px 6px;
  z-index: 10001; /* 提高到最高层级，在backdrop之上 */
  height: 40px;
  max-width: 80vw;
  min-width: 120px; /* 最小宽度确保显示滚动条 */
  opacity: 0;
  transform: scale(1); /* 移除初始缩放，避免定位偏移 */
  transition: opacity 0.2s ease;
  pointer-events: auto; /* 确保可以点击 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow-x: auto; /* 启用横向滚动 */
  overflow-y: hidden; /* 隐藏垂直滚动 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
  /* 确保内容不超出圆角边界 */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* 隐藏 WebKit 滚动条 */
.message-context-menu::-webkit-scrollbar {
  display: none;
}

.message-context-menu.show {
  opacity: 1;
}

/* 悬浮框菜单项 - 横向排列 */
.message-context-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85); /* 稍微降低文字不透明度 */
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  flex-shrink: 0;
  height: 32px;
  touch-action: pan-x; /* 明确横向滚动手势，避免与点击竞争 */
  background: transparent; /* 默认透明背景 */
}

/* 菜单横向拖拽时，关闭菜单项交互反馈，提升丝滑感 */
.message-context-menu.dragging .message-context-menu-item {
  pointer-events: none;
}

.message-context-menu-item:hover {
  background: rgba(0, 0, 0, 0.06); /* 降低hover背景不透明度 */
  color: rgba(0, 0, 0, 0.95);
}

.message-context-menu-item:active {
  background: rgba(0, 0, 0, 0.12); /* 降低active背景不透明度 */
  color: #000000;
}

/* 触屏设备上进一步降低慢滑过程中的“变灰阻滞感” */
@media (hover: none) and (pointer: coarse) {
  .message-context-menu-item:active {
    background: rgba(0, 0, 0, 0.06);
  }
}

.message-context-menu-item.destructive {
  color: #FF3B30;
}


/* 菜单项图标 */
.message-context-menu-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-context-menu-item-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

/* 滚动指示器 - 当内容超出时显示 */
.message-context-menu.scrollable::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3));
  border-radius: 1px;
  pointer-events: none;
}

/* 滚动动画 */
.message-context-menu.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 语音转换撤销按钮 */
.voice-undo-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  border-radius: 50%;
  background: rgba(142, 142, 147, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.voice-undo-button.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.voice-undo-button:hover {
  background: rgba(142, 142, 147, 0.18);
  transform: scale(1.05);
}

.voice-undo-button:active {
  background: rgba(142, 142, 147, 0.24);
  transform: scale(0.95);
}

.voice-undo-button svg {
  width: 16px;
  height: 16px;
  stroke: rgba(60, 60, 67, 0.6);
  stroke-width: 2;
  fill: none;
}

.voice-undo-button:hover svg {
  stroke: rgba(60, 60, 67, 0.8);
}

/* 语音消息包装器 - 支持撤销按钮布局 */
.voice-message-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* 模态框遮罩 */
.message-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-index-stacked-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.message-modal-backdrop.show {
  opacity: 1;
}

/* 模态框容器 */
.message-modal {
  background: #ffffff;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.message-modal-backdrop.show .message-modal {
  transform: scale(1);
}

/* 模态框头部 */
.message-modal-header {
  padding: 20px;
  border-bottom: 1px solid #e5e5ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.message-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
}

.message-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f2f2f7;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #8e8e93;
  transition: all 0.2s ease;
}

.message-modal-close:hover {
  background: #e5e5ea;
}

/* 模态框内容区 */
.message-modal-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.message-modal-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}

.message-modal-textarea:focus {
  border-color: #007AFF;
}


.message-modal-input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.message-modal-input:focus {
  border-color: #007AFF;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

/* 模态框底部按钮区 */
.message-modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e5ea;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.message-modal-btn {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.message-modal-btn.cancel {
  background: #f2f2f7;
  color: #000000;
}

.message-modal-btn.cancel:hover {
  background: #e5e5ea;
}

.message-modal-btn.confirm {
  background: #007AFF;
  color: #ffffff;
}

.message-modal-btn.confirm:hover {
  background: #0051D5;
}

.message-modal-btn.destructive {
  background: #FF3B30;
  color: #ffffff;
}

/* ——————————————————————————————————————————————
 *  错误消息样式
 * —————————————————————————————————————————————— */

/* 错误消息行 */
.chat-msg-row.error-message {
  margin-bottom: 12px;
}

/* 错误消息气泡 */
.chat-msg-bubble.error-bubble {
  background: #ffebee !important;
  border: 1px solid #ef5350;
  color: #c62828;
  max-width: 85%;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 错误消息气泡小尾巴 - 使用红色调 */
.chat-msg-row.assistant .chat-msg-bubble.error-bubble::before {
  border-right-color: #ffebee;
  border-top-color: #ffebee;
}

/* 错误内容预格式化文本 */
.error-content {
  margin: 0;
  padding: 0;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: inherit;
}

/* 错误重试按钮 */
.error-retry-btn {
  margin-top: 8px;
  padding: 8px 16px;
  background: #007AFF;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.error-retry-btn:hover {
  background: #0051D5;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.error-retry-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 122, 255, 0.2);
}

/* 错误消息气泡容器 - 调整布局以容纳重试按钮 */
.error-message .chat-msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.message-modal-btn.destructive:hover {
  background: #D70015;
}

.message-modal-btn:active {
  transform: scale(0.95);
}

.chat-wallet-transfer-backdrop {
  align-items: flex-end;
  padding-top: 40px;
  background:
    linear-gradient(180deg, rgba(26, 35, 47, 0.18) 0%, rgba(26, 35, 47, 0.4) 100%);
}

.chat-wallet-transfer-modal {
  --transfer-accent: #06c755;
  --transfer-accent-deep: #04a84a;
  --transfer-accent-soft: rgba(6, 199, 85, 0.12);
  --transfer-surface: rgba(252, 253, 250, 0.98);
  --transfer-surface-2: rgba(246, 248, 244, 0.98);
  --transfer-ink: #17212b;
  --transfer-muted: #667085;
  --transfer-line: rgba(23, 33, 43, 0.08);
  align-self: flex-end;
  width: min(100%, 430px);
  max-width: min(100%, 430px);
  max-height: min(86vh, 760px);
  border-radius: 34px 34px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-bottom: none;
  background:
    radial-gradient(circle at top right, rgba(6, 199, 85, 0.09) 0%, rgba(6, 199, 85, 0) 34%),
    linear-gradient(180deg, var(--transfer-surface) 0%, var(--transfer-surface-2) 100%);
  box-shadow: 0 -20px 46px rgba(15, 23, 42, 0.24);
  transform: translateY(28px);
  transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.chat-wallet-transfer-backdrop.show .chat-wallet-transfer-modal {
  transform: translateY(0);
}

.chat-wallet-transfer-sheet-grip {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  margin: 12px auto 0;
  background: rgba(23, 33, 43, 0.14);
}

.chat-wallet-transfer-header {
  padding: 14px 24px 0;
  border-bottom: none;
  align-items: flex-start;
  gap: 16px;
}

.chat-wallet-transfer-heading {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.chat-wallet-transfer-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(23, 33, 43, 0.48);
}

.chat-wallet-transfer-header .message-modal-title {
  color: var(--transfer-ink);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.chat-wallet-transfer-subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: var(--transfer-muted);
}

.chat-wallet-transfer-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(23, 33, 43, 0.05);
  color: rgba(23, 33, 43, 0.52);
}

.chat-wallet-transfer-modal:not(.chat-wallet-transfer-action-modal) .chat-wallet-transfer-modal-body {
  display: grid;
  gap: 18px;
  padding: 22px 24px 18px;
}

.chat-wallet-transfer-recipient-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 24px rgba(15, 23, 42, 0.04);
}

.chat-wallet-transfer-recipient-avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(232, 238, 233, 0.96) 0%, rgba(220, 227, 221, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-wallet-transfer-recipient-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.chat-wallet-transfer-recipient-avatar-fallback {
  font-size: 20px;
  font-weight: 700;
  color: #2b3645;
}

.chat-wallet-transfer-recipient-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chat-wallet-transfer-recipient-label,
.chat-wallet-transfer-panel-label,
.chat-wallet-transfer-label,
.chat-wallet-transfer-balance-label,
.chat-wallet-transfer-balance-mask {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--transfer-muted);
}

.chat-wallet-transfer-recipient-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--transfer-ink);
  line-height: 1.1;
}

.chat-wallet-transfer-recipient-meta {
  font-size: 13px;
  color: rgba(23, 33, 43, 0.64);
  line-height: 1.4;
}

.chat-wallet-transfer-primary-panel {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 252, 249, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 32px rgba(15, 23, 42, 0.05);
}

.chat-wallet-transfer-amount-shell {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 12px;
  min-height: 132px;
  padding: 18px 18px 20px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(244, 248, 242, 0.9) 0%, rgba(252, 253, 250, 0.96) 100%);
  border: 1px solid rgba(6, 199, 85, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.chat-wallet-transfer-amount-shell::after {
  content: '';
  position: absolute;
  left: 70px;
  right: 18px;
  bottom: 14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(6, 199, 85, 0.22) 0%, rgba(6, 199, 85, 0.9) 100%);
  transform: scaleX(0.3);
  transform-origin: left center;
  opacity: 0.65;
  transition: transform 180ms ease, opacity 180ms ease;
}

.chat-wallet-transfer-amount-shell:focus-within::after,
.chat-wallet-transfer-backdrop.has-transfer-amount .chat-wallet-transfer-amount-shell::after {
  transform: scaleX(1);
  opacity: 1;
}

.chat-wallet-transfer-currency {
  align-self: center;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--transfer-ink);
}

.chat-wallet-transfer-amount-input {
  min-height: 92px;
  padding: 0 0 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(36px, 8vw, 58px);
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--transfer-ink);
  line-height: 1;
  appearance: textfield;
}

.chat-wallet-transfer-amount-input::placeholder {
  color: rgba(23, 33, 43, 0.2);
}

.chat-wallet-transfer-amount-input::-webkit-outer-spin-button,
.chat-wallet-transfer-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.chat-wallet-transfer-amount-input:focus {
  border-color: transparent;
  box-shadow: none;
}

.chat-wallet-transfer-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.chat-wallet-transfer-balance-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--transfer-muted);
}

.chat-wallet-transfer-balance-inline strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--transfer-ink);
}

.chat-wallet-transfer-field {
  display: grid;
  gap: 8px;
}

.chat-wallet-transfer-field-quiet {
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.chat-wallet-transfer-field-quiet .message-modal-input {
  min-height: 34px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 18px;
  color: var(--transfer-ink);
}

.chat-wallet-transfer-field-quiet .message-modal-input::placeholder {
  color: rgba(23, 33, 43, 0.34);
}

.chat-wallet-transfer-field-quiet .message-modal-input:focus {
  border-color: transparent;
  box-shadow: none;
}

.chat-wallet-transfer-input.chat-wallet-transfer-pin {
  letter-spacing: 0.18em;
  font-weight: 700;
}

.chat-wallet-transfer-caption {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(23, 33, 43, 0.62);
  padding: 0 4px;
}

.chat-wallet-transfer-footer {
  padding: 16px 24px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(23, 33, 43, 0.06);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.chat-wallet-transfer-btn {
  min-width: 112px;
  min-height: 52px;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.chat-wallet-transfer-btn-secondary {
  background: rgba(23, 33, 43, 0.05);
  color: #1e2937;
}

.chat-wallet-transfer-btn-primary {
  background: linear-gradient(135deg, var(--transfer-accent) 0%, var(--transfer-accent-deep) 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(6, 199, 85, 0.28);
}

.chat-wallet-transfer-btn-primary:disabled {
  opacity: 0.56;
  box-shadow: none;
}

.chat-wallet-transfer-btn:not(:disabled):active {
  transform: translateY(1px) scale(0.985);
}

.chat-wallet-transfer-action-modal {
  align-self: center;
  width: 90%;
  max-width: 360px;
  max-height: 80vh;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
  transform: scale(0.94);
}

.message-modal-backdrop.show .chat-wallet-transfer-action-modal {
  transform: scale(1);
}

.chat-wallet-transfer-action-modal .chat-wallet-transfer-modal-body {
  display: grid;
  gap: 14px;
}

.chat-wallet-transfer-balance-card {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f6f9ff 0%, #eef5ff 100%);
  border: 1px solid rgba(160, 186, 255, 0.28);
}

.chat-wallet-transfer-balance-value {
  font-size: 28px;
  font-weight: 800;
  color: #1e2d49;
  letter-spacing: -0.03em;
}

.chat-wallet-transfer-bubble-shell {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.chat-wallet-transfer-balance-card.is-action-sheet {
  gap: 8px;
  text-align: center;
}

.chat-wallet-transfer-sheet-note {
  font-size: 13px;
  line-height: 1.6;
  color: #6b7380;
  text-align: center;
}

@media (max-width: 480px) {
  .chat-wallet-transfer-backdrop {
    padding-top: 24px;
  }

  .chat-wallet-transfer-modal {
    width: 100%;
    max-width: 100%;
  }

  .chat-wallet-transfer-header {
    padding: 12px 20px 0;
  }

  .chat-wallet-transfer-header .message-modal-title {
    font-size: 26px;
  }

  .chat-wallet-transfer-modal:not(.chat-wallet-transfer-action-modal) .chat-wallet-transfer-modal-body {
    padding: 18px 20px 16px;
  }

  .chat-wallet-transfer-footer {
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  }

  .chat-wallet-transfer-btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

.chat-wallet-transfer-backdrop {
  align-items: stretch;
  padding-top: 0;
  background: rgba(234, 237, 232, 0.92);
}

.chat-wallet-transfer-modal {
  --transfer-accent: #5d7a68;
  --transfer-accent-deep: #4a6555;
  --transfer-accent-soft: rgba(93, 122, 104, 0.1);
  --transfer-accent-quiet: #e5ebe5;
  --transfer-accent-quiet-deep: #dde4dc;
  --transfer-surface: #f2f3ee;
  --transfer-surface-2: #eff0ea;
  --transfer-ink: #16212b;
  --transfer-muted: #67727c;
  --transfer-line: rgba(22, 33, 43, 0.06);
  --transfer-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transfer-ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
  --transfer-ease-swift: cubic-bezier(0.16, 1, 0.3, 1);
  align-self: stretch;
  width: min(100%, 430px);
  max-width: min(100%, 430px);
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  margin: 0 auto;
  border-radius: 24px 24px 0 0;
  border: 1px solid rgba(199, 205, 197, 0.72);
  border-bottom: none;
  background: var(--transfer-surface);
  box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0.92;
  transform: translateY(28px) scale(0.986);
  transition: transform 360ms var(--transfer-ease), opacity 280ms var(--transfer-ease-soft);
  overscroll-behavior: contain;
  will-change: transform, opacity;
}

.chat-wallet-transfer-backdrop.show .chat-wallet-transfer-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.chat-wallet-transfer-sheet-grip {
  display: none;
}

.chat-wallet-transfer-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 22px 8px;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(242, 243, 238, 0.98);
}

.chat-wallet-transfer-backdrop:not(.is-verify-step) .chat-wallet-transfer-header {
  grid-template-columns: minmax(0, 1fr) 40px;
}

.chat-wallet-transfer-backdrop:not(.is-verify-step) .chat-wallet-transfer-nav {
  display: none;
}

.chat-wallet-transfer-backdrop:not(.is-verify-step) .chat-wallet-transfer-heading {
  grid-column: 1;
}

.chat-wallet-transfer-backdrop:not(.is-verify-step) .chat-wallet-transfer-close {
  grid-column: 2;
}

.chat-wallet-transfer-nav,
.chat-wallet-transfer-close {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(22, 33, 43, 0.04);
  border-radius: 50%;
  background: rgba(247, 248, 244, 0.92);
  color: rgba(22, 33, 43, 0.54);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.chat-wallet-transfer-nav {
  font-size: 28px;
  line-height: 1;
}

.chat-wallet-transfer-nav.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.chat-wallet-transfer-heading {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding-top: 0;
}

.chat-wallet-transfer-backdrop.is-verify-step .chat-wallet-transfer-heading {
  text-align: center;
}

.chat-wallet-transfer-header .message-modal-title {
  color: var(--transfer-ink);
  font-size: 21px;
  font-weight: 670;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.chat-wallet-transfer-subtitle {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(22, 33, 43, 0.4);
}

.chat-wallet-transfer-modal:not(.chat-wallet-transfer-action-modal) .chat-wallet-transfer-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 12px 22px calc(22px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-wallet-transfer-step {
  display: none;
}

.chat-wallet-transfer-step.is-active {
  display: grid;
  gap: clamp(14px, 1.8vh, 18px);
  flex: 1;
  min-height: 100%;
  align-content: start;
}

.chat-wallet-transfer-recipient-panel,
.chat-wallet-transfer-primary-panel,
.chat-wallet-transfer-keypad-wrap,
.chat-wallet-transfer-verify-panel,
.chat-wallet-transfer-pin-panel {
  transform-origin: top center;
}

.chat-wallet-transfer-recipient-panel,
.chat-wallet-transfer-verify-panel {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.chat-wallet-transfer-recipient-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.chat-wallet-transfer-recipient-avatar {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  overflow: hidden;
  background: #e4e7e1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-wallet-transfer-recipient-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.chat-wallet-transfer-recipient-avatar-fallback {
  font-size: 18px;
  font-weight: 700;
  color: #2b3645;
}

.chat-wallet-transfer-recipient-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.chat-wallet-transfer-recipient-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(22, 33, 43, 0.4);
}

.chat-wallet-transfer-recipient-name {
  font-size: 14px;
  font-weight: 620;
  color: var(--transfer-ink);
  line-height: 1.1;
}

.chat-wallet-transfer-recipient-meta,
.chat-wallet-transfer-balance-mask {
  font-size: 11px;
  color: rgba(22, 33, 43, 0.48);
  line-height: 1.4;
}

.chat-wallet-transfer-primary-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.chat-wallet-transfer-panel-label,
.chat-wallet-transfer-label,
.chat-wallet-transfer-verify-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(22, 33, 43, 0.42);
}

.chat-wallet-transfer-amount-shell {
  position: relative;
  min-height: 138px;
  padding: 0 28px;
  border-radius: 24px;
  background: #f6f6f1;
  border: 1px solid rgba(22, 33, 43, 0.05);
  box-shadow: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: end;
  column-gap: 4px;
  cursor: text;
  transition:
    transform 220ms var(--transfer-ease-soft),
    border-color 180ms var(--transfer-ease-soft),
    box-shadow 180ms var(--transfer-ease-soft),
    background-color 180ms var(--transfer-ease-soft);
  will-change: transform;
}

.chat-wallet-transfer-amount-shell::after {
  content: none;
}

.chat-wallet-transfer-amount-shell:focus {
  outline: none;
  border-color: rgba(93, 122, 104, 0.16);
  box-shadow: 0 0 0 2px rgba(93, 122, 104, 0.05);
  transform: translateY(-1px);
}

.chat-wallet-transfer-amount-shell.is-invalid {
  border-color: rgba(197, 92, 92, 0.24);
}

.chat-wallet-transfer-currency {
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 0.9;
  color: var(--transfer-ink);
  letter-spacing: -0.03em;
  margin-right: 0.02em;
  padding-bottom: 0.42rem;
  font-variant-numeric: lining-nums;
}

.chat-wallet-transfer-amount-display {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  line-height: 0.88;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  color: var(--transfer-ink);
  white-space: nowrap;
  word-break: break-all;
  transform-origin: left bottom;
  will-change: transform, opacity;
}

.chat-wallet-transfer-amount-major {
  font-size: 3.85rem;
  font-weight: 680;
  letter-spacing: -0.07em;
}

.chat-wallet-transfer-amount-decimal {
  font-size: 1.6rem;
  font-weight: 610;
  letter-spacing: -0.04em;
  color: rgba(22, 33, 43, 0.42);
  margin-left: 0.02em;
  padding-bottom: 0.22rem;
}

.chat-wallet-transfer-amount-display.is-empty {
  color: rgba(22, 33, 43, 0.18);
}

.chat-wallet-transfer-amount-display.is-empty .chat-wallet-transfer-amount-major {
  color: rgba(22, 33, 43, 0.18);
}

.chat-wallet-transfer-amount-display.is-empty .chat-wallet-transfer-amount-decimal {
  color: rgba(22, 33, 43, 0.14);
}

.chat-wallet-transfer-amount-display.is-integral .chat-wallet-transfer-amount-decimal {
  color: rgba(22, 33, 43, 0.28);
}

.chat-wallet-transfer-amount-display.has-fraction .chat-wallet-transfer-amount-decimal {
  color: rgba(22, 33, 43, 0.46);
}

.chat-wallet-transfer-amount-shell.is-input-bump {
  animation: transfer-amount-shell-breathe 240ms var(--transfer-ease-soft);
}

.chat-wallet-transfer-amount-display.is-input-bump {
  animation: transfer-amount-value-settle 220ms var(--transfer-ease-soft);
}

.chat-wallet-transfer-amount-shell:not(.is-filled) .chat-wallet-transfer-currency {
  color: rgba(22, 33, 43, 0.26);
}

.chat-wallet-transfer-meta-row,
.chat-wallet-transfer-pin-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
}

.chat-wallet-transfer-balance-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(22, 33, 43, 0.46);
}

.chat-wallet-transfer-balance-inline strong {
  font-size: 12px;
  font-weight: 620;
  color: var(--transfer-ink);
  font-variant-numeric: tabular-nums;
}

.chat-wallet-transfer-status,
.chat-wallet-transfer-caption,
.chat-wallet-transfer-note-helper,
.chat-wallet-transfer-pin-hint,
.chat-wallet-transfer-pin-meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--transfer-muted);
}

.chat-wallet-transfer-status {
  min-height: 1.05rem;
  font-size: 11px;
  color: #ba5f5f;
  text-align: right;
}

.chat-wallet-transfer-status.is-empty {
  opacity: 0;
}

.chat-wallet-transfer-caption {
  padding: 0 2px;
  max-width: 28ch;
  display: none;
}

.chat-wallet-transfer-status.is-error,
.chat-wallet-transfer-pin-hint.is-error {
  color: #ba5f5f;
}

.chat-wallet-transfer-inline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 1.1rem;
  margin-top: 2px;
}

.chat-wallet-transfer-note-toggle {
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(22, 33, 43, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 2px;
  text-align: left;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 560;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
  transition: color 180ms var(--transfer-ease-soft), transform 180ms var(--transfer-ease-soft);
}

.chat-wallet-transfer-note-toggle.is-open {
  color: rgba(22, 33, 43, 0.72);
  transform: translateY(-1px);
}

.chat-wallet-transfer-note-badge {
  display: none;
}

.chat-wallet-transfer-note-editor {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 2px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  opacity: 0;
  pointer-events: none;
  transition:
    grid-template-rows 280ms var(--transfer-ease-soft),
    opacity 180ms var(--transfer-ease-soft),
    padding-top 220ms var(--transfer-ease-soft);
}

.chat-wallet-transfer-note-editor.is-open {
  grid-template-rows: 1fr;
  padding-top: 8px;
  opacity: 1;
  pointer-events: auto;
}

.chat-wallet-transfer-note-editor-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 10px;
  opacity: 0.01;
  transform: translateY(-8px);
  transition: transform 280ms var(--transfer-ease-soft), opacity 180ms var(--transfer-ease-soft);
}

.chat-wallet-transfer-note-editor.is-open .chat-wallet-transfer-note-editor-inner {
  opacity: 1;
  transform: translateY(0);
}

.chat-wallet-transfer-note-helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.chat-wallet-transfer-note-helper span:last-child {
  font-variant-numeric: tabular-nums;
}

.chat-wallet-transfer-input {
  min-height: 36px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  color: var(--transfer-ink);
}

.chat-wallet-transfer-input::placeholder {
  color: rgba(22, 33, 43, 0.32);
}

.chat-wallet-transfer-input:focus {
  border-color: transparent;
  box-shadow: none;
}

.chat-wallet-transfer-keypad-wrap {
  padding-top: 6px;
}

.chat-wallet-transfer-step[data-wallet-transfer-step="compose"] .chat-wallet-transfer-keypad-wrap {
  margin-top: auto;
  padding-top: clamp(14px, 2.2vh, 22px);
}

.chat-wallet-transfer-keypad,
.chat-wallet-transfer-pin-keypad {
  display: grid;
  gap: 10px;
}

.chat-wallet-transfer-keypad {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(56px, auto);
}

.chat-wallet-transfer-pin-keypad {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chat-wallet-transfer-keypad-btn {
  min-height: 56px;
  border: 1px solid rgba(22, 33, 43, 0.04);
  border-radius: 15px;
  background: #f7f7f3;
  color: #253342;
  font-size: 19px;
  font-weight: 610;
  display: grid;
  place-items: center;
  padding: 0;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-kerning: normal;
  text-rendering: geometricPrecision;
  transition:
    transform 130ms var(--transfer-ease-soft),
    box-shadow 220ms var(--transfer-ease),
    background-color 220ms var(--transfer-ease-soft),
    color 220ms var(--transfer-ease-soft),
    border-color 220ms var(--transfer-ease-soft);
  will-change: transform;
}

.chat-wallet-transfer-keypad-btn.is-digit {
  font-size: 1.95rem;
  font-weight: 615;
  letter-spacing: -0.02em;
}

.chat-wallet-transfer-keypad-btn.is-symbol {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  padding-bottom: 0.08em;
}

.chat-wallet-transfer-keypad-btn::after {
  content: "";
  position: absolute;
  inset: auto auto -42% 50%;
  width: 78%;
  height: 78%;
  border-radius: 999px;
  transform: translateX(-50%) scale(0.72);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 72%);
  transition: opacity 220ms var(--transfer-ease-soft), transform 320ms var(--transfer-ease);
}

.chat-wallet-transfer-keypad-btn.is-action,
.chat-wallet-transfer-keypad-btn.is-delete {
  font-size: 13px;
  font-weight: 600;
  color: rgba(87, 105, 123, 0.78);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.chat-wallet-transfer-keypad-actions {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.chat-wallet-transfer-keypad-btn.is-delete {
  background: #f3f4ef;
}

.chat-wallet-transfer-keypad-btn.is-confirm {
  min-height: 56px;
  padding: 0 16px;
  border-color: rgba(93, 122, 104, 0.1);
  background: #edf1ea;
  color: #4d6658;
  font-size: 15px;
  font-weight: 640;
  letter-spacing: 0;
  line-height: 1.05;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.chat-wallet-transfer-keypad-btn.is-pressed {
  background: #e9ede8;
  color: #1f3346;
  border-color: rgba(108, 128, 119, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 0 0 1px rgba(121, 140, 130, 0.12),
    0 6px 12px rgba(78, 94, 85, 0.06);
}

.chat-wallet-transfer-keypad-btn.is-action.is-pressed,
.chat-wallet-transfer-keypad-btn.is-delete.is-pressed {
  color: #4f6478;
  background: #ecefe9;
}

.chat-wallet-transfer-keypad-btn.is-confirm.is-pressed {
  background: #dde7dc;
  color: #41594c;
  border-color: rgba(93, 122, 104, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(112, 139, 122, 0.1),
    0 7px 16px rgba(93, 122, 104, 0.07);
}

.chat-wallet-transfer-keypad-btn:disabled,
.chat-wallet-transfer-close:disabled,
.chat-wallet-transfer-nav:disabled,
.chat-wallet-transfer-note-toggle:disabled {
  opacity: 0.42;
  cursor: default;
  transform: none !important;
}

.chat-wallet-transfer-keypad-btn.is-pressed,
.chat-wallet-transfer-keypad-btn:active,
.chat-wallet-transfer-close.is-pressed,
.chat-wallet-transfer-nav.is-pressed,
.chat-wallet-transfer-note-toggle.is-pressed {
  transform: scale(0.968) translateY(2px);
}

.chat-wallet-transfer-close.is-pressed,
.chat-wallet-transfer-nav.is-pressed {
  background: rgba(233, 237, 232, 0.98);
  color: rgba(22, 33, 43, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 0 0 1px rgba(121, 140, 130, 0.12);
}

.chat-wallet-transfer-note-toggle.is-pressed {
  color: rgba(22, 33, 43, 0.78);
}

.chat-wallet-transfer-keypad-btn.is-pressed::after,
.chat-wallet-transfer-keypad-btn:active::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.chat-wallet-transfer-keypad-btn:focus-visible,
.chat-wallet-transfer-close:focus-visible,
.chat-wallet-transfer-nav:focus-visible,
.chat-wallet-transfer-note-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(93, 122, 104, 0.08);
}

.chat-wallet-transfer-verify-panel {
  display: grid;
  gap: 4px;
  text-align: center;
  justify-items: center;
  will-change: transform, opacity;
}

.chat-wallet-transfer-verify-amount {
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--transfer-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.chat-wallet-transfer-verify-recipient {
  font-size: 14px;
  font-weight: 620;
  color: var(--transfer-ink);
  margin-top: 8px;
}

.chat-wallet-transfer-verify-note {
  font-size: 12px;
  color: var(--transfer-muted);
  margin-top: 2px;
}

.chat-wallet-transfer-pin-panel {
  display: grid;
  gap: 8px;
  padding: 4px 0 0;
  justify-items: center;
}

.chat-wallet-transfer-pin-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.chat-wallet-transfer-pin-row.is-error {
  animation: wallet-pin-shake 0.34s var(--transfer-ease-soft);
}

.chat-wallet-transfer-pin-slot {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #f6f6f1;
  border: 1px solid rgba(22, 33, 43, 0.06);
  box-shadow: none;
  transition:
    border-color 0.18s var(--transfer-ease-soft),
    transform 0.18s var(--transfer-ease-soft),
    background-color 0.18s var(--transfer-ease-soft),
    box-shadow 0.22s var(--transfer-ease-soft);
}

.chat-wallet-transfer-pin-slot.is-filled {
  border-color: rgba(92, 109, 123, 0.3);
  background: #f1f2ee;
  box-shadow: none;
}

.chat-wallet-transfer-pin-slot.is-pulse-error {
  border-color: rgba(205, 93, 93, 0.38);
}

.chat-wallet-transfer-pin-slot.is-latest {
  border-color: rgba(93, 122, 104, 0.28);
  background: #eef1eb;
  box-shadow: 0 0 0 3px rgba(93, 122, 104, 0.05);
  animation: wallet-activation-pin-slot-pop 180ms var(--transfer-ease-soft) both;
}

.chat-wallet-transfer-pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4d6277;
  opacity: 0;
  transform: scale(0.45);
  transition: opacity 0.18s var(--transfer-ease-soft), transform 0.18s var(--transfer-ease-soft);
}

.chat-wallet-transfer-pin-slot.is-filled .chat-wallet-transfer-pin-dot {
  opacity: 1;
  transform: scale(1);
}

.chat-wallet-transfer-pin-slot.is-latest .chat-wallet-transfer-pin-dot {
  animation: wallet-activation-pin-dot-in 180ms var(--transfer-ease-soft) both;
}

.chat-wallet-transfer-pin-meta {
  justify-content: center;
  gap: 14px;
  width: 100%;
  font-size: 11px;
}

.chat-wallet-transfer-pin-hint {
  width: 100%;
  text-align: center;
  font-size: 11px;
}

.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-heading,
.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-close {
  animation: transfer-fade-rise 420ms var(--transfer-ease-soft) both;
}

.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-recipient-panel {
  animation: transfer-fade-rise 420ms var(--transfer-ease-soft) both;
}

.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-primary-panel {
  animation: transfer-fade-rise 480ms var(--transfer-ease-soft) 40ms both;
}

.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-step[data-wallet-transfer-step="compose"] .chat-wallet-transfer-keypad-wrap {
  animation: transfer-fade-rise 520ms var(--transfer-ease) 110ms both;
}

.chat-wallet-transfer-backdrop.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-nav,
.chat-wallet-transfer-backdrop.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-heading,
.chat-wallet-transfer-backdrop.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-close {
  animation: transfer-fade-rise 320ms var(--transfer-ease-soft) both;
}

.chat-wallet-transfer-backdrop.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-verify-panel {
  animation: transfer-verify-rise 360ms var(--transfer-ease) both;
}

.chat-wallet-transfer-backdrop.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-pin-panel {
  animation: transfer-fade-rise 360ms var(--transfer-ease-soft) 40ms both;
}

.chat-wallet-transfer-backdrop.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-keypad-wrap.is-pin {
  animation: transfer-fade-rise 420ms var(--transfer-ease) 90ms both;
}

.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-heading,
.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-close,
.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-recipient-panel,
.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-primary-panel,
.chat-wallet-transfer-backdrop.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-step[data-wallet-transfer-step="compose"] .chat-wallet-transfer-keypad-wrap {
  animation: transfer-fade-rise 340ms var(--transfer-ease-soft) both;
}

.chat-wallet-transfer-backdrop.is-submitting .chat-wallet-transfer-verify-amount {
  animation: transfer-verify-breathe 900ms var(--transfer-ease-soft) infinite alternate;
}

.chat-wallet-transfer-backdrop.is-submitting .chat-wallet-transfer-pin-slot.is-filled {
  animation: transfer-pin-breathe 760ms var(--transfer-ease-soft) infinite alternate;
}

@media (hover: hover) and (pointer: fine) {
  .chat-wallet-transfer-keypad-btn:hover,
  .chat-wallet-transfer-close:hover,
  .chat-wallet-transfer-nav:hover,
  .chat-wallet-transfer-note-toggle:hover {
    transform: translateY(-1px);
  }

  .chat-wallet-transfer-keypad-btn:hover {
    background: #f8f8f4;
    box-shadow: 0 2px 6px rgba(22, 33, 43, 0.02);
  }

  .chat-wallet-transfer-keypad-btn.is-confirm:hover {
    background: #eaeee8;
    box-shadow: 0 2px 6px rgba(93, 122, 104, 0.035);
  }
}

@media (max-width: 480px) {
  .chat-wallet-transfer-backdrop {
    padding-top: 0;
  }

  .chat-wallet-transfer-modal {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 24px 24px 0 0;
  }

  .chat-wallet-transfer-header {
    padding: calc(16px + env(safe-area-inset-top)) 18px 8px;
  }

  .chat-wallet-transfer-header .message-modal-title {
    font-size: 21px;
  }

  .chat-wallet-transfer-modal:not(.chat-wallet-transfer-action-modal) .chat-wallet-transfer-modal-body {
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  }

  .chat-wallet-transfer-keypad {
    grid-auto-rows: minmax(52px, auto);
  }

  .chat-wallet-transfer-keypad-btn {
    min-height: 52px;
    border-radius: 14px;
  }

  .chat-wallet-transfer-keypad-btn.is-digit {
    font-size: 1.82rem;
  }

  .chat-wallet-transfer-keypad-btn.is-symbol {
    font-size: 1.86rem;
  }

  .chat-wallet-transfer-keypad-actions {
    grid-template-columns: minmax(0, 116px) minmax(0, 1fr);
    gap: 8px;
    margin-top: 10px;
  }

  .chat-wallet-transfer-currency {
    font-size: 1.42rem;
    padding-bottom: 0.34rem;
  }

  .chat-wallet-transfer-amount-major {
    font-size: 3.35rem;
  }

  .chat-wallet-transfer-amount-decimal {
    font-size: 1.35rem;
    padding-bottom: 0.18rem;
  }

  .chat-wallet-transfer-pin-row {
    gap: 8px;
  }
}

@keyframes wallet-pin-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
}

@keyframes wallet-activation-pin-slot-pop {
  0% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@keyframes wallet-activation-pin-dot-in {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes transfer-fade-rise {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.988);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes transfer-verify-rise {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.986);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes transfer-amount-shell-breathe {
  0% {
    transform: translateY(0) scale(0.995);
    border-color: rgba(93, 122, 104, 0.08);
  }
  55% {
    transform: translateY(-1px) scale(1);
    border-color: rgba(93, 122, 104, 0.18);
  }
  100% {
    transform: translateY(0) scale(1);
    border-color: rgba(22, 33, 43, 0.05);
  }
}

@keyframes transfer-amount-value-settle {
  0% {
    opacity: 0.72;
    transform: translateY(5px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes transfer-verify-breathe {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0.82;
    transform: translateY(-1px);
  }
}

@keyframes transfer-pin-breathe {
  0% {
    transform: translateY(0);
    box-shadow: none;
  }
  100% {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(93, 122, 104, 0.04);
  }
}

.chat-wallet-transfer-action-modal {
  align-self: center;
  width: 90%;
  max-width: 360px;
  min-height: 0;
  height: auto;
  max-height: 80vh;
  border-radius: 24px;
  border: 1px solid rgba(199, 205, 197, 0.72);
  border-bottom: 1px solid rgba(199, 205, 197, 0.72);
  background: #f3f4ef;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  transform: scale(0.94);
}

.message-modal-backdrop.show .chat-wallet-transfer-action-modal {
  transform: scale(1);
}

.chat-wallet-transfer-action-modal .chat-wallet-transfer-modal-body {
  display: grid;
  gap: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .chat-wallet-transfer-modal,
  .chat-wallet-transfer-heading,
  .chat-wallet-transfer-recipient-panel,
  .chat-wallet-transfer-primary-panel,
  .chat-wallet-transfer-keypad-wrap,
  .chat-wallet-transfer-verify-panel,
  .chat-wallet-transfer-pin-panel,
  .chat-wallet-transfer-keypad-btn,
  .chat-wallet-transfer-close,
  .chat-wallet-transfer-nav,
  .chat-wallet-transfer-note-toggle,
  .chat-wallet-transfer-amount-shell,
  .chat-wallet-transfer-pin-slot,
  .chat-wallet-transfer-pin-dot,
  .chat-wallet-transfer-note-editor,
  .chat-wallet-transfer-note-editor-inner,
  .chat-wallet-transfer-amount-display {
    transition: none !important;
    animation: none !important;
  }

  .chat-wallet-transfer-keypad-btn::after {
    display: none !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-modal,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-keypad-btn,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-close,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-nav,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-note-toggle,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-amount-shell,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-pin-slot,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-pin-dot,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-note-editor,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-note-editor-inner,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-amount-display {
    transition: initial !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-modal {
    transition: transform 360ms var(--transfer-ease) !important, opacity 280ms var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-keypad-btn {
    transition:
      transform 130ms var(--transfer-ease-soft),
      box-shadow 220ms var(--transfer-ease),
      background-color 220ms var(--transfer-ease-soft),
      color 220ms var(--transfer-ease-soft),
      border-color 220ms var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-close,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-nav,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-note-toggle {
    transition: transform 160ms var(--transfer-ease-soft), background-color 160ms var(--transfer-ease-soft), box-shadow 160ms var(--transfer-ease-soft), color 180ms var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-amount-shell {
    transition:
      transform 220ms var(--transfer-ease-soft),
      border-color 180ms var(--transfer-ease-soft),
      box-shadow 180ms var(--transfer-ease-soft),
      background-color 180ms var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-pin-slot {
    transition:
      border-color 0.18s var(--transfer-ease-soft),
      transform 0.18s var(--transfer-ease-soft),
      background-color 0.18s var(--transfer-ease-soft),
      box-shadow 0.22s var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-pin-dot {
    transition: opacity 0.18s var(--transfer-ease-soft), transform 0.18s var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-note-editor {
    transition:
      grid-template-rows 280ms var(--transfer-ease-soft),
      opacity 180ms var(--transfer-ease-soft),
      padding-top 220ms var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-note-editor-inner {
    transition: transform 280ms var(--transfer-ease-soft), opacity 180ms var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-keypad-btn::after {
    display: block !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-amount-shell.is-input-bump {
    animation: transfer-amount-shell-breathe 240ms var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-amount-display.is-input-bump {
    animation: transfer-amount-value-settle 220ms var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-pin-row.is-error {
    animation: wallet-pin-shake 0.34s var(--transfer-ease-soft) !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-pin-slot.is-latest {
    animation: wallet-activation-pin-slot-pop 180ms var(--transfer-ease-soft) both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion .chat-wallet-transfer-pin-slot.is-latest .chat-wallet-transfer-pin-dot {
    animation: wallet-activation-pin-dot-in 180ms var(--transfer-ease-soft) both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-heading,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-close,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-recipient-panel,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-primary-panel,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-step[data-wallet-transfer-step="compose"] .chat-wallet-transfer-keypad-wrap,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-nav,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-heading,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-close,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-verify-panel,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-pin-panel,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-keypad-wrap.is-pin,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-heading,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-close,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-recipient-panel,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-primary-panel,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-step[data-wallet-transfer-step="compose"] .chat-wallet-transfer-keypad-wrap,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.is-submitting .chat-wallet-transfer-verify-amount,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.is-submitting .chat-wallet-transfer-pin-slot.is-filled {
    animation-duration: initial !important;
    animation-iteration-count: initial !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-heading,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-close,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-recipient-panel {
    animation: transfer-fade-rise 420ms var(--transfer-ease-soft) both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-primary-panel {
    animation: transfer-fade-rise 480ms var(--transfer-ease-soft) 40ms both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-enter"] .chat-wallet-transfer-step[data-wallet-transfer-step="compose"] .chat-wallet-transfer-keypad-wrap {
    animation: transfer-fade-rise 520ms var(--transfer-ease) 110ms both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-nav,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-heading,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-close {
    animation: transfer-fade-rise 320ms var(--transfer-ease-soft) both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-verify-panel {
    animation: transfer-verify-rise 360ms var(--transfer-ease) both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-pin-panel {
    animation: transfer-fade-rise 360ms var(--transfer-ease-soft) 40ms both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="verify-enter"] .chat-wallet-transfer-keypad-wrap.is-pin {
    animation: transfer-fade-rise 420ms var(--transfer-ease) 90ms both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-heading,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-close,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-recipient-panel,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-primary-panel,
  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.show[data-transfer-motion="compose-return"] .chat-wallet-transfer-step[data-wallet-transfer-step="compose"] .chat-wallet-transfer-keypad-wrap {
    animation: transfer-fade-rise 340ms var(--transfer-ease-soft) both !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.is-submitting .chat-wallet-transfer-verify-amount {
    animation: transfer-verify-breathe 900ms var(--transfer-ease-soft) infinite alternate !important;
  }

  .chat-wallet-transfer-backdrop.chat-wallet-transfer-force-motion.is-submitting .chat-wallet-transfer-pin-slot.is-filled {
    animation: transfer-pin-breathe 760ms var(--transfer-ease-soft) infinite alternate !important;
  }
}

.transfer-card {
  min-width: 200px;
  width: fit-content;
  max-width: 85vw;
  padding: 14px 16px 10px;
  border-radius: 18px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 34%, rgba(255, 255, 255, 0.02) 60%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(circle at 100% 0%, rgba(255, 176, 206, 0.16) 0%, rgba(255, 176, 206, 0.07) 24%, transparent 58%),
    radial-gradient(circle at 0% 100%, rgba(168, 238, 206, 0.24) 0%, rgba(168, 238, 206, 0.12) 26%, transparent 62%),
    radial-gradient(circle at 52% 50%, rgba(185, 192, 255, 0.2) 0%, rgba(185, 192, 255, 0.08) 30%, transparent 72%),
    linear-gradient(180deg, #edf1f5 0%, #e6eaef 100%);
  box-shadow:
    8px 12px 24px rgba(0, 0, 0, 0.08),
    2px 4px 10px rgba(0, 0, 0, 0.05),
    inset 0 1px 2px rgba(255, 255, 255, 0.96),
    inset 0 -1px 2px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.52);
}

.transfer-card:not(.transfer-confirm-card)::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.16) 22%, transparent 42%),
    radial-gradient(circle at 84% 15%, rgba(255, 198, 218, 0.11) 0%, transparent 34%),
    radial-gradient(circle at 16% 84%, rgba(191, 245, 221, 0.16) 0%, transparent 40%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 34%, rgba(255, 255, 255, 0) 58%);
  opacity: 0.95;
}

.transfer-card > * {
  position: relative;
  z-index: 1;
}

.transfer-card.is-clickable {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.transfer-card.is-clickable:active {
  transform: scale(0.985);
}

.transfer-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.transfer-card-icon-container {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background-image: url('https://i.ibb.co/0y21fYRB/IMG-5044.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    7px 7px 14px rgba(0, 0, 0, 0.15),
    -5px -5px 12px rgba(255, 255, 255, 0.95);
  font-size: 0;
}

.transfer-card-icon-container svg {
  display: none;
}

.transfer-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.transfer-card-amount {
  white-space: nowrap;
  font-size: 23px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: -0.5px;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.transfer-card-remark {
  font-size: 13px;
  color: #555555;
  font-weight: 400;
  white-space: nowrap;
}

.transfer-card-footer {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #444444;
  font-weight: 500;
  padding-top: 0;
}

.transfer-card-footer::before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: #667085;
  border-radius: 50%;
  margin-right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'%3E%3C/circle%3E%3Cpath d='M12 8.5v4.2l2.8 1.8'%3E%3C/path%3E%3C/svg%3E");
  background-size: 8px;
  background-position: center;
  background-repeat: no-repeat;
}

.transfer-card-footer::after {
  content: 'Pay';
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: #8e8e93;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  letter-spacing: -0.5px;
}

.transfer-card.is-accepted .transfer-card-footer::before {
  background-color: #35b36f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.transfer-card.is-returned .transfer-card-footer::before {
  background-color: #f59e0b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7 4 12l5 5'%3E%3C/path%3E%3Cpath d='M20 12H5'%3E%3C/path%3E%3C/svg%3E");
}

.transfer-card.is-expired .transfer-card-footer::before {
  background-color: #9aa3b2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'%3E%3C/circle%3E%3Cpath d='M12 8.5v4.2'%3E%3C/path%3E%3Cpath d='M9 3h6'%3E%3C/path%3E%3C/svg%3E");
}

.transfer-confirm-card {
  width: fit-content;
  min-width: 160px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #e8ebef;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.03),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.transfer-confirm-card .transfer-card-footer {
  display: none;
}

.transfer-confirm-card .transfer-card-body {
  margin: 0;
}

.transfer-confirm-card .transfer-card-icon-container {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-image: url('https://i.ibb.co/zhtVnMjz/IMG-5057.png');
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.12),
    -3px -3px 8px rgba(255, 255, 255, 0.9);
}

.transfer-confirm-info {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  justify-content: center;
  flex-grow: 1;
}

.transfer-card-status {
  font-size: 16px;
  font-weight: 600;
  color: #3b3b3b;
  line-height: 1.2;
}

.transfer-confirm-card .transfer-card-amount {
  font-size: 13px;
  font-weight: 400;
  color: #888888;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  letter-spacing: 0;
}

.transfer-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.transfer-card-action {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.65);
  color: #2b3140;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.88);
}

.transfer-card-action.primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 247, 251, 0.9) 100%);
}

.transfer-card-action:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

/* 确认对话框样式 */
.message-confirm-dialog {
  background: #ffffff;
  border-radius: 16px;
  width: 90%;
  max-width: 320px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.message-modal-backdrop.show .message-confirm-dialog {
  transform: scale(1);
}

.chat-photo-sheet-backdrop {
  background: rgba(15, 23, 42, 0.05);
  transition: opacity 0.18s ease;
}

.chat-photo-sheet {
  position: fixed;
  width: 144px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 24px rgba(18, 27, 44, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(6px) scale(0.97);
  opacity: 0;
  transform-origin: bottom center;
  transition: transform 0.18s ease, opacity 0.18s ease;
  z-index: 3200;
}

.chat-photo-sheet-backdrop.show .chat-photo-sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.chat-photo-sheet::after {
  content: '';
  position: absolute;
  left: calc(var(--chat-photo-arrow-left, 50%) - 7px);
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.98);
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  transform: rotate(45deg);
  border-radius: 3px;
}

.chat-photo-sheet-option {
  border: none;
  border-radius: 12px;
  background: transparent;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font: inherit;
  color: #1b2536;
}

.chat-photo-sheet-option:hover {
  background: rgba(244, 247, 251, 0.8);
}

.chat-photo-sheet-option:active {
  background: rgba(236, 241, 247, 0.95);
}

.chat-photo-sheet-icon {
  width: 20px;
  height: 20px;
  color: #51627b;
  flex-shrink: 0;
}

.chat-photo-sheet-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.chat-photo-sheet-title {
  font-size: 13px;
  font-weight: 600;
  color: #1b2536;
}

.message-confirm-title {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 12px;
}

.message-confirm-text {
  font-size: 15px;
  color: #8e8e93;
  margin-bottom: 24px;
  line-height: 1.5;
}

.message-confirm-buttons {
  display: flex;
  gap: 12px;
}

.message-confirm-buttons .message-modal-btn {
  flex: 1;
}

.geography-item-btn.primary {
  color: #34C759;
}

/* 主要地点标记 */
.geography-item.primary .geography-item-name {
  color: #007AFF;
}

.geography-item.primary .geography-item-icon {
  background: rgba(0, 122, 255, 0.1);
}

/* 地理信息编辑模态框 */
.geography-edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: flex-end;
  z-index: var(--z-index-modal);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.geography-edit-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.geography-edit-modal.active {
  opacity: 1;
  visibility: visible;
}

.geography-edit-modal.active .geography-edit-body {
  transform: translateY(0);
}

/* 地理信息编辑模态框头部 */
.geography-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #e5e5ea;
  position: relative;
  width: 100%; /* 修复：添加宽度约束防止布局崩塌 */
  box-sizing: border-box; /* 修复：确保padding包含在宽度内 */
}

.geography-edit-cancel,
.geography-edit-save {
  background: none;
  border: none;
  font-size: 17px;
  cursor: pointer;
  padding: 8px 12px;
  -webkit-tap-highlight-color: transparent;
  min-width: 60px;
  text-align: center;
}

.geography-edit-cancel {
  color: #007AFF;
}

.geography-edit-save {
  color: #007AFF;
  font-weight: 600;
}

.geography-edit-save:disabled {
  color: #c7c7cc;
}

.geography-edit-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: #000000;
  text-align: center;
}

/* 地理信息编辑模态框主体 */
.geography-edit-body {
  background: #ffffff;
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px 16px 0 0;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .geography-edit-body {
    max-height: 85vh;
    padding: 12px;
  }

  .geography-edit-header {
    height: 52px;
    padding: 0 12px;
    width: 100%; /* 修复：响应式设计中也保持宽度约束 */
    box-sizing: border-box;
  }

  .geography-edit-cancel,
  .geography-edit-save {
    font-size: 16px;
    padding: 6px 10px;
    min-width: 50px;
  }

  .geography-edit-title {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .geography-edit-body {
    max-height: 90vh;
    padding: 10px;
  }

  .geography-edit-header {
    height: 48px;
    padding: 0 8px;
    width: 100%; /* 修复：小屏幕响应式设计中也保持宽度约束 */
    box-sizing: border-box;
  }

  .geography-edit-cancel,
  .geography-edit-save {
    font-size: 15px;
    padding: 4px 8px;
    min-width: 45px;
  }

  .geography-edit-title {
    font-size: 15px;
  }
}

/* 地理信息表单组 */
.geography-form-group {
  margin-bottom: 20px;
}

.geography-form-group:last-child {
  margin-bottom: 0;
}

.geography-form-label {
  display: block;
  font-size: 13px;
  color: #8e8e93;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.geography-form-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  font-size: 15px;
  color: #000000;
  background: #ffffff;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.geography-form-input:focus {
  outline: none;
  border-color: #007AFF;
}

.geography-form-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 16px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  font-size: 15px;
  color: #000000;
  background: #ffffff;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
  font-family: inherit;
  line-height: 1.5;
}

.geography-form-textarea:focus {
  outline: none;
  border-color: #007AFF;
}

/* 地点类型选择器 */
.geography-type-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.geography-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 70px;
}

.geography-type-btn:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.geography-type-btn.active {
  background: #EFF6FF;
  border-color: #3B82F6;
}

.geography-type-btn:active {
  transform: scale(0.95);
}

/* 地理信息图标容器 */
.geography-type-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.geography-type-icon-wrap .material-icons-round,
.geography-type-icon-wrap svg {
  font-size: 20px;
  width: 20px;
  height: 20px;
  display: block;
  color: inherit;
}

/* 图标颜色主题 */
.geography-icon-home {
  background: #FEF3C7;
}

.geography-icon-home .material-icons-round,
.geography-icon-home svg {
  color: #F59E0B;
}

.geography-icon-work {
  background: #DBEAFE;
}

.geography-icon-work .material-icons-round,
.geography-icon-work svg {
  color: #3B82F6;
}

.geography-icon-school {
  background: #E0E7FF;
}

.geography-icon-school .material-icons-round,
.geography-icon-school svg {
  color: #6366F1;
}

.geography-icon-entertainment {
  background: #FCE7F3;
}

.geography-icon-entertainment .material-icons-round,
.geography-icon-entertainment svg {
  color: #EC4899;
}

.geography-icon-restaurant {
  background: #FED7AA;
}

.geography-icon-restaurant .material-icons-round,
.geography-icon-restaurant svg {
  color: #EA580C;
}

.geography-icon-outdoor {
  background: #D1FAE5;
}

.geography-icon-outdoor .material-icons-round,
.geography-icon-outdoor svg {
  color: #10B981;
}

.geography-icon-other {
  background: #E8F0FF;
}

.geography-icon-other .material-icons-round,
.geography-icon-other svg {
  color: #0B7A2A;
}

/* 激活状态的图标增强 */
.geography-type-btn.active .geography-type-icon-wrap {
  transform: scale(1.05);
}

.geography-type-btn.active .geography-icon-other {
  background: rgba(59, 130, 246, 0.18);
}

.geography-type-btn.active .geography-icon-other .material-icons-round,
.geography-type-btn.active .geography-icon-other svg {
  color: #0B7A2A;
}

.geography-type-icon {
  font-size: 20px;
}

.geography-type-btn span:last-child {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
}

.geography-type-btn.active span:last-child {
  color: #3B82F6;
  font-weight: 600;
}

/* 地理信息复选框 */
.geography-form-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.geography-form-checkbox input[type="checkbox"] {
  display: none;
}

.geography-checkbox-checkmark {
  width: 22px;
  height: 22px;
  border: 2px solid #e5e5ea;
  border-radius: 6px;
  position: relative;
  transition: all 0.2s ease;
}

.geography-form-checkbox input[type="checkbox"]:checked + .geography-checkbox-checkmark {
  background: #007AFF;
  border-color: #007AFF;
}

.geography-form-checkbox input[type="checkbox"]:checked + .geography-checkbox-checkmark::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.geography-form-checkbox span:last-child {
  font-size: 15px;
  color: #000000;
}

/* ——————————————————————————————————————————————
 *  编辑按钮样式
 * —————————————————————————————————————————————— */

.chat-edit-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: #FF9500;
  color: #ffffff;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-edit-btn:active {
  background: #E6850E;
}

.chat-edit-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.chat-edit-text {
  font-size: 12px;
  font-weight: 500;
}

/* 地理信息空状态 */
.geography-empty {
  padding: 16px;
  text-align: center;
  color: #8e8e93;
  font-size: 14px;
}

/* ——————————————————————————————————————————————
 *  消息引用系统样式
 * —————————————————————————————————————————————— */

/* 消息引用系统CSS变量 */
:root {
  /* 引用预览区域变量 */
  --quote-preview-bg: rgba(255, 255, 255, 0.95);
  --quote-preview-border: #e0e0e0;
  --quote-preview-avatar-size: 32px;
  --quote-preview-sender-size: 12px;
  --quote-preview-text-size: 13px;
  --quote-preview-close-size: 24px;

  /* 气泡内引用块变量 */
  --quote-block-bg: #f5f5f5;
  --quote-block-border-user: #007AFF; /* 用户消息引用边框颜色 */
  --quote-block-border-assistant: #34C759; /* 角色消息引用边框颜色 */
  --quote-block-avatar-size: 20px;
  --quote-block-sender-size: 12px;
  --quote-block-text-size: 12px;

  /* 高亮动画变量 */
  --highlight-color: #fff3cd;
  --highlight-duration: 3s;
}

/* 引用预览区域样式（输入框上方）- 玻璃质感悬浮条 */
.chat-quote-preview {
  position: absolute;
  bottom: 100%;
  left: 10px;
  right: 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  z-index: 100;
  animation: slideUp 0.3s ease-out;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* 引用预览动画 - 从下向上滑入 */
@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 引用标签 */
.chat-quote-preview-label {
  font-size: 13px;
  font-weight: 600;
  color: #007AFF;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.chat-quote-preview-label svg {
  width: 14px;
  height: 14px;
  margin-right: 2px;
}

/* 引用预览发送者名字 */
.chat-quote-preview-sender {
  font-size: 13px;
  font-weight: 600;
  color: #333333; /* 深灰色，比文字(#666666)深一个度 */
  flex-shrink: 0;
}

/* 引用预览文字内容 */
.chat-quote-preview-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 引用预览关闭按钮 */
.chat-quote-preview-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: none;
  border: none;
  color: #8e8e93;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.chat-quote-preview-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.chat-quote-preview-close:active {
  transform: scale(0.9);
}

/* 气泡内引用块样式 - LINE风格 */
.chat-msg-quote-block {
  background: transparent; /* 透明背景 */
  border-radius: 0;
  padding: 0 0 12px 0; /* 移除上padding，让文字与头像顶部对齐，收窄底部空间 */
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 底部分隔线 */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px; /* 增加间距 */
  cursor: pointer;
  /* 移除所有过渡效果，避免检查元素时的跳动 */
}

/* 引用块悬停效果 - 移除透明度变化 */
.chat-msg-quote-block:hover {
  /* 移除所有效果，保持稳定 */
}

/* 引用块焦点效果 - 简化 */
.chat-msg-quote-block:focus {
  outline: none;
  /* 移除透明度变化 */
}

/* 引用块点击效果 - 简化 */
.chat-msg-quote-block:active {
  /* 移除透明度变化 */
}

/* 撤回消息的引用块样式 */
.chat-msg-quote-recalled {
  opacity: 0.6;
  pointer-events: none;
}

.chat-msg-quote-deleted {
  opacity: 0.6;
  pointer-events: none;
}

.chat-msg-quote-recalled .chat-msg-quote-text,
.chat-msg-quote-deleted .chat-msg-quote-text {
  color: #999 !important;
  font-style: italic;
}

.chat-msg-quote-recalled:hover,
.chat-msg-quote-deleted:hover {
  background-color: transparent !important;
  transform: none !important;
}

.chat-msg-quote-recalled:focus,
.chat-msg-quote-deleted:focus {
  outline: none !important;
}

/* 引用块小头像 - LINE风格 */
.chat-msg-quote-avatar {
  width: 19px; /* 缩小1像素 */
  height: 19px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px; /* 向下移动2像素 */
}

.chat-msg-quote-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 引用块内容区域 */
.chat-msg-quote-content {
  flex: 1;
  min-width: 0;
}

/* 引用块角色名 - LINE风格 */
.chat-msg-quote-sender {
  font-size: 11px; /* 缩小1像素 */
  font-weight: 600;
  color: #000000; /* 黑色 */
  margin-bottom: 2px; /* 增加间距 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 引用块预览文本 - LINE风格 */
.chat-msg-quote-text {
  font-size: 12px; /* 缩小1像素 */
  color: #555555; /* 深灰色 */
  line-height: 1.4; /* 增加行高 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* 跳转高亮动画 */
.highlight-flash {
  animation: highlightPulse var(--highlight-duration) ease-in-out;
}

@keyframes highlightPulse {
  0% {
    background-color: var(--highlight-color); /* 黄色背景 */
  }
  50% {
    background-color: var(--highlight-color); /* 保持黄色背景 */
  }
  100% {
    background-color: transparent; /* 渐变到透明 */
  }
}

/* 消息行高亮效果 */
.chat-msg-row.highlight-flash {
  position: relative;
}

.chat-msg-row.highlight-flash::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background-color: var(--highlight-color);
  border-radius: 12px;
  z-index: -1;
  animation: highlightPulse var(--highlight-duration) ease-in-out;
}

/* ——————————————————————————————————————————————
 *  消息引用系统响应式适配
 * —————————————————————————————————————————————— */

/* 小屏幕适配 (<375px) */
@media screen and (max-width: 374px) {
  /* 引用预览区域小屏幕适配 */
  .chat-quote-preview {
    padding: 10px 12px;
    gap: 10px;
  }

  .chat-quote-preview-avatar {
    width: 28px;
    height: 28px;
  }

  .chat-quote-preview-sender {
    font-size: 11px;
  }

  .chat-quote-preview-text {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }

  .chat-quote-preview-close {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  /* 气泡内引用块小屏幕适配 */
  .chat-msg-quote-block {
    padding: 0 0 12px 0; /* 小屏幕也保持顶部对齐，收窄空间 */
    gap: 6px;
  }

  .chat-msg-quote-avatar {
    width: 17px; /* 缩小1像素 */
    height: 17px;
    margin-top: 2px; /* 向下移动2像素 */
  }

  .chat-msg-quote-sender {
    font-size: 10px; /* 缩小1像素 */
  }

  .chat-msg-quote-text {
    font-size: 11px;
    -webkit-line-clamp: 2;
  }
}

/* 大屏幕适配 (>768px) */
@media screen and (min-width: 769px) {
  /* 引用预览区域大屏幕适配 */
  .chat-quote-preview {
    padding: 14px 20px;
    gap: 14px;
  }

  .chat-quote-preview-avatar {
    width: 36px;
    height: 36px;
  }

  .chat-quote-preview-sender {
    font-size: 13px;
  }

  .chat-quote-preview-text {
    font-size: 14px;
    -webkit-line-clamp: 2;
  }

  .chat-quote-preview-close {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  /* 气泡内引用块大屏幕适配 */
  .chat-msg-quote-block {
    padding: 0 0 12px 0; /* 保持LINE风格：透明背景，无左右padding，顶部对齐，收窄空间 */
    gap: 10px;
    border-radius: 10px;
  }

  .chat-msg-quote-avatar {
    width: 23px; /* 缩小1像素 */
    height: 23px;
    margin-top: 2px; /* 向下移动2像素 */
  }

  .chat-msg-quote-sender {
    font-size: 12px; /* 缩小1像素 */
  }

  .chat-msg-quote-text {
    font-size: 13px;
    -webkit-line-clamp: 3; /* 大屏幕显示更多行 */
  }
}

/* 横屏适配 */
@media screen and (orientation: landscape) and (max-height: 500px) {
  /* 引用预览区域横屏适配 */
  .chat-quote-preview {
    padding: 8px 12px;
    min-height: 48px;
  }

  .chat-quote-preview-avatar {
    width: 24px;
    height: 24px;
  }

  .chat-quote-preview-sender {
    font-size: 11px;
    margin-bottom: 1px;
  }

  .chat-quote-preview-text {
    font-size: 12px;
    -webkit-line-clamp: 1; /* 横屏只显示一行 */
  }

  /* 气泡内引用块横屏适配 */
  .chat-msg-quote-block {
    padding: 0 0 12px 0; /* 横屏也保持顶部对齐，收窄空间 */
    margin-bottom: 6px;
  }

  .chat-msg-quote-text {
    -webkit-line-clamp: 1; /* 横屏只显示一行 */
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  /* 增大触摸区域 */
  .chat-quote-preview-close {
    width: 32px;
    height: 32px;
  }

  .chat-msg-quote-block {
    padding: 0 0 12px 0; /* 保持LINE风格：透明背景，无左右padding，顶部对齐，收窄空间 */
  }

  /* 移除悬停效果 */
  .chat-quote-preview-close:hover,
  .chat-msg-quote-block:hover {
    background-color: transparent;
  }

  /* 增强点击反馈 */
  .chat-quote-preview-close:active {
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
  }

  .chat-msg-quote-block:active {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(0.98);
  }
}

/* ——————————————————————————————————————————————
 *  消息引用系统辅助样式
 * —————————————————————————————————————————————— */

/* 引用状态指示器 */
.chat-quote-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #8e8e93;
  margin-left: 4px;
}

.chat-quote-indicator::before {
  content: '↩';
  font-size: 12px;
}

/* 引用计数标签 */
.chat-quote-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background-color: #007AFF;
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  margin-left: 4px;
}

/* 引用链指示器 */
.chat-quote-chain {
  position: relative;
  padding-left: 12px;
}

.chat-quote-chain::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e0e0e0;
}

/* 引用加载状态 */
.chat-quote-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: #8e8e93;
  font-size: 12px;
}

.chat-quote-loading::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid #e0e0e0;
  border-top-color: #007AFF;
  border-radius: 50%;
  margin-right: 6px;
  animation: quoteSpin 1s linear infinite;
}

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

/* 引用错误状态 */
.chat-quote-error {
  background-color: #ffebee;
  color: #d32f2f;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-quote-error::before {
  content: '⚠';
  font-size: 14px;
}

/* 深色主题支持 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 引用预览区域变量 - 深色主题 */
    --quote-preview-bg: rgba(28, 28, 30, 0.95);
    --quote-preview-border: #38383a;

    /* 气泡内引用块变量 - 深色主题 */
    --quote-block-bg: #2c2c2e;

    /* 高亮动画变量 - 深色主题 */
    --highlight-color: rgba(255, 243, 205, 0.3);
  }

  /* 深色主题下的文本颜色调整 */
  .chat-quote-preview-sender {
    color: #636366; /* 比文字(#98989d)更深（更暗），形成正确对比 */
  }

  .chat-quote-preview-text {
    color: #98989d;
  }

  /* 消息气泡中的引用块保持LINE风格颜色 */
  .chat-msg-quote-sender {
    color: #000000 !important; /* 黑色 */
  }

  .chat-msg-quote-text {
    color: #555555 !important; /* 深灰色 */
  }

  .chat-quote-preview-close {
    color: #98989d;
  }

  .chat-quote-preview-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .chat-msg-quote-block:hover {
    background-color: #3a3a3c;
  }
}

/* ============================================================
 * 语音消息条样式 (LINE 风格)
 * ============================================================ */

/* 语音消息容器 */
.voice-message-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 防止子项被拉伸导致语音条错位 */
  width: fit-content;       /* 锁定容器宽度为语音条宽度，避免被转文字胶囊横向撑开 */
  max-width: 70vw;
  gap: 4px;
}

/* 按消息方向控制语音胶囊对齐 */
.chat-msg-row.assistant .voice-message-wrap {
  align-items: flex-start;
}

.chat-msg-row.user .voice-message-wrap {
  align-items: flex-end;
}

/* 语音消息条 */
.voice-message-bar {
  --voice-bg: rgba(255, 255, 255, 0.94);
  --voice-bg-strong: rgba(248, 251, 255, 0.98);
  --voice-border: rgba(199, 199, 204, 0.48);
  --voice-wave-start: #8E8E93;
  --voice-wave-end: #C7C7CC;
  --voice-icon: #3a4351;
  --voice-glow: rgba(82, 128, 255, 0.14);
  --voice-ring: rgba(82, 128, 255, 0.26);
  --voice-shadow: 0 10px 24px rgba(60, 72, 88, 0.08);
  background: var(--voice-bg);
  border: 1px solid var(--voice-border);
  border-radius: 18px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 120px;
  max-width: 70vw;
  user-select: none;
  box-shadow: var(--voice-shadow);
  color: var(--voice-icon);
}

.voice-message-bar:hover {
  filter: brightness(0.985);
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.voice-message-bar:active {
  box-shadow: 0 0 0 4px var(--voice-ring);
  transform: scale(0.98);
  transition: all 0.1s ease;
}

/* 语音消息条状态 */
.voice-message-bar.loading {
  border-color: var(--voice-border);
}

.voice-message-bar.error {
  background: rgba(255, 245, 245, 0.98);
  border-color: rgba(255, 59, 48, 0.42);
  color: #cc3b33;
}

.voice-message-bar.error:hover {
  background-color: #FFEDED;  /* 错误状态hover的红色背景 */
  border-color: #E62E24;
}

/* 语音消息行：仅锚定“行直属时间戳”，避免误作用到胶囊内部时间 */
.chat-msg-row.voice-row {
  align-items: flex-start !important;
}

.chat-msg-row.voice-row > .chat-msg-time {
  align-self: flex-start !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

/* 保持两侧既有细微间距逻辑（仅直属时间戳） */
.chat-msg-row.assistant.voice-row > .chat-msg-time {
  margin-left: -4px !important;
}

.chat-msg-row.user.voice-row > .chat-msg-time {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  align-self: flex-end !important;
  margin-top: auto !important;
  margin-bottom: 4px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* 语音主行：把时间戳与语音条绑在同一行，胶囊下展开时不再带飞时间戳 */
.voice-main-line {
  display: inline-flex;
  align-items: flex-end;
  width: fit-content;
  gap: 2px;
}

.chat-msg-row.assistant .voice-main-line {
  align-self: flex-start;
}

.chat-msg-row.user .voice-main-line {
  align-self: flex-end;
}

.voice-main-line > .chat-msg-time.voice-time {
  display: block !important;
  align-self: flex-end !important;
  margin: 0 0 4px 0 !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  position: static !important;
}

.chat-msg-row.user .voice-main-line > .chat-msg-time.voice-time {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  margin: 0 2px 4px 0 !important;
  padding: 0 2px 0 0 !important;
  min-width: 28px;
}

/* 播放按钮 */
.voice-play-button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  border-radius: 999px;
}

.voice-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: currentColor;
}

/* 波形容器 */
.voice-waveform {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 18px;
  min-width: 44px;
  padding: 0 1px;
}

/* 单个波形条 - 新版本 */
.voice-wave-bar {
  width: 2px;
  height: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--voice-wave-end) 88%, #ffffff 12%) 0%, var(--voice-wave-start) 100%);
  border-radius: 999px;
  transition:
    height 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease,
    filter 0.18s ease,
    transform 0.18s ease;
  flex-shrink: 0;
  transform-origin: center bottom;
  opacity: 0.9;
  will-change: height, opacity, filter;
}

/* 兼容旧版本的wave-bar类 */
.wave-bar {
  width: 2px;
  height: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--voice-wave-end) 88%, #ffffff 12%) 0%, var(--voice-wave-start) 100%);
  border-radius: 999px;
  transition:
    height 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease,
    filter 0.18s ease,
    transform 0.18s ease;
  flex-shrink: 0;
  opacity: 0.9;
}

/* 静态状态不使用动画 */
.voice-message-bar:not(.playing) .voice-wave-bar,
.voice-message-bar:not(.playing) .wave-bar {
  animation: none;
}

/* Loading 状态的波形动画 */
.voice-message-bar.loading .voice-wave-bar,
.voice-message-bar.loading .wave-bar {
  opacity: 0.72;
  filter: saturate(0.88);
  animation: voice-loading-meter 1.28s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes voice-loading-meter {
  0%, 100% {
    opacity: 0.46;
    transform: scaleY(0.62);
  }
  35% {
    opacity: 0.82;
    transform: scaleY(1.04);
  }
  60% {
    opacity: 1;
    transform: scaleY(1.32);
  }
}

.voice-message-bar.loading .voice-wave-bar:nth-child(odd),
.voice-message-bar.loading .wave-bar:nth-child(odd) {
  animation-duration: 1.18s;
  animation-delay: -0.16s;
}

.voice-message-bar.loading .voice-wave-bar:nth-child(3n),
.voice-message-bar.loading .wave-bar:nth-child(3n) {
  animation-duration: 1.42s;
  animation-delay: -0.28s;
}

.voice-message-bar.loading .voice-wave-bar:nth-child(4n),
.voice-message-bar.loading .wave-bar:nth-child(4n) {
  animation-duration: 1.56s;
  animation-delay: -0.34s;
}

.chat-msg-row.assistant .voice-message-bar[data-playback-kind="tts"] .voice-icon {
  position: static;
  z-index: auto;
}

.chat-msg-row.assistant .voice-message-bar[data-playback-kind="tts"].loading .voice-wave-bar,
.chat-msg-row.assistant .voice-message-bar[data-playback-kind="tts"].loading .wave-bar {
  animation-duration: 1.36s;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  filter: saturate(0.94);
}

.chat-msg-row.assistant .voice-message-bar[data-playback-kind="tts"] .voice-play-button::before,
.chat-msg-row.assistant .voice-message-bar[data-playback-kind="tts"] .voice-play-button::after {
  content: none;
}

/* 优雅的语音条胶囊弹出动画 */
.voice-message-bar.entering {
  animation: voice-capsule-elegant-pop-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transform-origin: center;
}

@keyframes voice-capsule-elegant-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(8px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 优雅的语音条胶囊移除动画 */
.voice-message-bar.exiting {
  animation: voice-capsule-elegant-pop-out 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  transform-origin: center;
}

@keyframes voice-capsule-elegant-pop-out {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.9) translateY(-8px);
  }
}

/* 播放状态的波形条样式 - 移除background以允许JavaScript控制 */
.voice-message-bar.playing .voice-wave-bar,
.voice-message-bar.playing .wave-bar,
.voice-message-bar.visualizing .voice-wave-bar,
.voice-message-bar.visualizing .wave-bar {
  opacity: 1;
  filter: saturate(1.08) brightness(1.02);
  box-shadow: 0 0 4px color-mix(in srgb, var(--voice-glow) 42%, transparent 58%);
}

.voice-message-bar.playing .voice-waveform,
.voice-message-bar.visualizing .voice-waveform {
  animation: none;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--voice-glow) 28%, transparent 72%));
}

/* 播放状态下的语音条整体效果 */
.voice-message-bar.playing,
.voice-message-bar.visualizing {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--voice-bg) 92%, #ffffff 8%) 0%, var(--voice-bg-strong) 100%);
  box-shadow:
    0 0 0 4px var(--voice-ring),
    0 10px 26px -6px var(--voice-glow),
    var(--voice-shadow);
  filter: saturate(1.05) brightness(1.02);
}

/* 移除播放时的微光效果 - 这是导致白色动画条的原因 */

/* 语音时长 */
.voice-duration {
  font-size: 13px;
  color: color-mix(in srgb, var(--voice-icon) 82%, #1f2937 18%);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 20px;
  text-align: right;
}

/* 转文字气泡 */
.transcript-bubble {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  color: #666;
  width: fit-content;        /* 允许胶囊按内容自然舒展 */
  max-width: 70vw;           /* 但限制上限，避免撑爆视口 */
  box-sizing: border-box;
  align-self: flex-start; /* 默认与左侧语音条左对齐，避免整行拉伸 */
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-top: 6px;
  overflow: hidden;
  will-change: max-height, opacity, transform, margin-top;
  transition: none; /* 由 JS 精确控制 240ms/160ms/120ms 节奏 */
}

.chat-msg-row.user .transcript-bubble {
  align-self: flex-end; /* 右侧消息保持右对齐 */
}

.chat-voice-composer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 30;
}

.chat-voice-composer {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  z-index: 31;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  padding: 12px;
}

.chat-voice-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 2px;
}

.chat-voice-stage-meta {
  display: none;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.chat-voice-stage-meta.is-visible {
  display: inline-flex;
}

.chat-voice-panel-duration {
  min-width: 52px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #111827;
}

.chat-voice-panel-subtitle {
  min-height: 14px;
  font-size: 12px;
  line-height: 1;
  color: #64748b;
}

.chat-voice-live-waveform {
  display: none;
  align-items: end;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(248, 250, 252, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.88);
}

.chat-voice-live-waveform.is-visible {
  display: flex;
}

.chat-voice-wave {
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(to top, var(--voice-wave-start, #5b7cff), var(--voice-wave-end, #bbcbff));
  box-shadow: 0 0 8px var(--voice-glow, rgba(91, 124, 255, 0.16));
  animation: chat-voice-wave-breathe 1.1s ease-in-out infinite;
}

@keyframes chat-voice-wave-breathe {
  0%, 100% {
    transform: scaleY(0.88);
    opacity: 0.86;
  }
  50% {
    transform: scaleY(1.08);
    opacity: 1;
  }
}

.chat-voice-transcript-input {
  width: 100%;
  min-height: 88px;
  border-radius: 20px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  background: rgba(255, 255, 255, 0.96);
  color: #18212f;
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 15px;
  resize: none;
  outline: none;
}

.chat-voice-transcript-input:focus {
  border-color: var(--voice-border, rgba(148, 163, 184, 0.9));
  box-shadow: 0 0 0 3px var(--voice-ring, rgba(82, 128, 255, 0.18));
}

.chat-voice-minimal-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.chat-voice-minimal-actions-text {
  justify-content: space-between;
}

.chat-voice-icon-btn,
.chat-voice-record-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, opacity 160ms ease;
}

.chat-voice-icon-btn {
  background: rgba(243, 246, 250, 0.98);
  color: #465468;
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.92);
}

.chat-voice-icon-btn svg,
.chat-voice-record-btn {
  color: currentColor;
}

.chat-voice-icon-btn svg,
.chat-voice-record-btn svg {
  width: 20px;
  height: 20px;
}

.chat-voice-icon-btn-placeholder {
  visibility: hidden;
}

.chat-voice-record-btn {
  width: 76px;
  height: 76px;
  color: var(--voice-icon, #1f2937);
  background: var(--voice-bg, #6ce579);
  box-shadow:
    0 14px 28px var(--voice-glow, rgba(108, 229, 121, 0.2)),
    inset 0 0 0 1px var(--voice-border, rgba(44, 124, 55, 0.14));
}

.chat-voice-record-core {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-voice-record-btn.is-recording {
  background: linear-gradient(135deg, rgba(255, 108, 107, 0.94) 0%, rgba(255, 142, 120, 0.98) 100%);
  border-color: rgba(255, 108, 107, 0.2);
  color: #fff;
  box-shadow:
    0 0 0 7px rgba(255, 108, 107, 0.14),
    0 18px 36px rgba(255, 108, 107, 0.24);
}

.chat-voice-record-btn-send {
  background: var(--voice-bg, #6ce579);
  color: var(--voice-icon, #17361A);
}

.chat-voice-stop-bars {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.chat-voice-stop-bars::before,
.chat-voice-stop-bars::after {
  content: '';
  position: absolute;
  top: 0;
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: currentColor;
}

.chat-voice-stop-bars::before {
  left: 3px;
}

.chat-voice-stop-bars::after {
  right: 3px;
}

.chat-voice-icon-btn:hover,
.chat-voice-record-btn:hover {
  transform: translateY(-1px);
}

.chat-voice-icon-btn:active,
.chat-voice-record-btn:active {
  transform: scale(0.97);
}

.chat-voice-icon-btn:disabled,
.chat-voice-record-btn:disabled {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 520px) {
  .chat-voice-composer {
    left: 12px;
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .chat-voice-composer {
    border-radius: 28px;
  }

  .chat-voice-record-btn {
    width: 72px;
    height: 72px;
  }
}

/* 转文字气泡动画初始状态 */
.transcript-bubble.entering {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
}

/* 转文字气泡动画结束状态 */
.transcript-bubble.entered {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .voice-message-bar {
    max-width: 80vw;
  }
}

@media (max-width: 480px) {
  .voice-message-bar {
    max-width: 85vw;
    padding: 6px 10px;
  }

  .voice-duration {
    font-size: 12px;
  }

  .transcript-bubble {
    font-size: 12px;
    padding: 6px 10px;
  }
}

.mask-edit-avatar-image-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card-select-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 24px;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  font-size: 16px;
  color: #111827;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#contact-mask-text.is-placeholder {
  color: #9ca3af;
}

.contact-mask-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.contact-mask-sheet-mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.contact-mask-sheet.active {
  pointer-events: auto;
}

.contact-mask-sheet.active .contact-mask-sheet-mask {
  opacity: 1;
}

.contact-mask-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: #f8fafc;
  box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.18);
  transform: translateY(100%);
  transition: transform 0.24s ease;
}

.contact-mask-sheet.active .contact-mask-sheet-panel {
  transform: translateY(0);
}

.contact-mask-sheet-handle {
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.9);
  margin: 0 auto 14px;
}

.contact-mask-sheet-title {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
}

.contact-mask-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 48vh;
  overflow-y: auto;
}

.contact-mask-sheet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 62px;
  padding: 0 16px;
  border: none;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(148, 163, 184, 0.12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.contact-mask-sheet-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.contact-mask-sheet-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #dbeafe, #eef2ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
}

.contact-mask-sheet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-mask-sheet-name {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.contact-mask-sheet-check {
  min-width: 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
}

.contact-mask-sheet-cancel {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border: none;
  border-radius: 20px;
  background: #ffffff;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* ========================================
   角色详情页样式
   ======================================== */

/* 详情页根容器 — 右侧滑入，覆盖整个 App */
.character-detail-page {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.character-detail-page.active {
  transform: translateX(0);
}

/* 详情页容器 */
.character-detail-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 头部导航栏 */
.character-detail-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(56px + var(--safe-area-top));
  padding-top: var(--safe-area-top);
  padding-left: 16px;
  padding-right: 16px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

.character-detail-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #007AFF;
  cursor: pointer;
  transition: opacity 0.2s;
}

/* 调整返回按钮内 SVG 的大小 */
.character-detail-back svg {
  width: 16px;
  height: 16px;
}

.character-detail-back:active {
  opacity: 0.6;
}

.character-detail-title {
  font-size: 17px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.character-detail-header-spacer {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* 滚动区域 */
.character-detail-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 名片包装器（用于视差滚动） */
.character-card-wrapper {
  padding: 20px 12px 16px;
  will-change: transform, opacity;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

/* 名片容器 */
.character-card-container {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 2 / 1;
  min-height: 120px;
}

/* 毛玻璃主卡片 */
.character-card-glass {
  position: absolute;
  inset: 0 0 0 24px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-top: 1.5px solid rgba(255, 255, 255, 0.9);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  box-shadow:
    0 20px 40px rgba(20, 30, 80, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  display: flex;
}

/* 全息光晕 */
.character-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 182, 255, 0.3) 0%, rgba(182, 255, 255, 0.15) 40%, rgba(255,255,255,0) 70%);
  mix-blend-mode: color-dodge;
  opacity: 0.8;
  pointer-events: none;
}

/* 卡片内容 */
.character-card-content {
  padding: 16px 12px 16px 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  position: relative;
  z-index: 10;
  min-height: 140px;
}

/* 角色名称 */
.character-card-name {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 3px 0;
  color: transparent;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.9), -1px -1px 2px rgba(0,0,0,0.15);
  background-color: #475569;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
  letter-spacing: -0.3px;
}

/* 角色 ID */
.character-card-id {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 3px;
}

/* 角色简介 */
.character-card-bio {
  font-size: 12px;
  font-family: serif;
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  margin: 6px 0 0 0;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 标签容器 */
.character-card-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 8px;
}

/* 标签包装器 */
.character-card-tags-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* 标签行 */
.character-card-tags-row {
  display: flex;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap; /* 允许换行，以防标签过多 */
}

/* 标签 */
.character-card-tag {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2); /* 调整为0.2透明度 */
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px); /* 添加轻微模糊效果 */
  -webkit-backdrop-filter: blur(5px);
}

.character-card-tag:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.character-card-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

/* 宝丽来相框 */
.character-card-photo-frame {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-3deg);
  z-index: 20;
  width: 96px;
  height: 120px;
  background: #fff;
  padding: 8px 8px 24px 8px;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -1px 1px rgba(0,0,0,0.05),
    6px 12px 24px rgba(0,0,0,0.15),
    0 3px 8px rgba(0,0,0,0.1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

.character-card-photo {
  width: 100%;
  height: 100%;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

.character-card-avatar {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: url('/assets/ai-avatar-D-MFxYZH.svg');
  mix-blend-mode: multiply;
  opacity: 0.9;
}

.character-card-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, transparent 50%, rgba(255,255,255,0.2) 100%);
  pointer-events: none;
}

/* 设置列表区域 */
.character-settings-list {
  padding: 0 16px 32px;
}

.character-settings-section {
  margin-bottom: 24px;
}

.character-settings-group-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 8px;
  padding: 0 16px;
}

.character-settings-group {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.character-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s;
  cursor: pointer;
}

.character-settings-item:last-child {
  border-bottom: none;
}

.character-settings-item:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.character-settings-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #000;
}

.character-settings-item-left .material-symbols-outlined {
  font-size: 22px;
  color: rgba(0, 0, 0, 0.6);
}

.character-settings-item > .material-symbols-outlined {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.3);
}
/**
 * ============================================================
 *  wallet.css — Wallet 钱包 App 样式表
 * ============================================================
 *  使用通用安全区域架构，演示蓝色主题适配
 * ============================================================
 */

.wallet-notification-icon {
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  text-shadow: none;
}

.wallet-notification-icon:active {
  transform: scale(0.97);
}

#wallet-page .network-header {
  position: relative;
}

.wallet-main {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(44px + var(--safe-area-bottom));
  background: linear-gradient(180deg, #f4f8fc 0%, #eef4fb 100%);
}

.wallet-main::-webkit-scrollbar {
  display: none;
}

.wallet-dev-hotspot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0;
  z-index: 4;
  pointer-events: auto;
}

#wallet-page .network-header .wallet-dev-hotspot {
  pointer-events: none;
}

.wallet-dev-hotspot--card {
  top: 12px;
  left: 12px;
  width: 112px;
  height: 84px;
  z-index: 3;
}

/* ——————————————————————————————————————————————
 *  交易记录
 * —————————————————————————————————————————————— */

.wallet-transactions {
  margin: 0 14px 18px;
  padding: 20px 14px 22px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  box-shadow: 0 22px 40px rgba(129, 144, 168, 0.08);
}

.wallet-empty-state {
  padding: 18px 14px;
  border-radius: 16px;
  background: #f7f8fc;
  color: #697189;
  font-size: 13px;
  line-height: 1.6;
}

.wallet-inline-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef2ff, #f7f8ff);
  border: 1px solid rgba(99, 102, 241, 0.12);
  margin-bottom: 16px;
}

.wallet-inline-action-card-warning {
  background: linear-gradient(135deg, #fff7e8, #fffdf5);
  border-color: rgba(211, 151, 55, 0.2);
}

.wallet-inline-action-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wallet-inline-action-copy strong {
  font-size: 14px;
  color: #111827;
}

.wallet-inline-action-copy span {
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.wallet-inline-action-btn {
  flex-shrink: 0;
  min-width: 92px;
  min-height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #5066ff, #7c3aed);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.wallet-transaction-icon.positive {
  background: linear-gradient(145deg, rgba(216, 239, 237, 0.92), rgba(255, 255, 255, 0.76));
  color: #5f7d84;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 18px rgba(132, 152, 160, 0.08);
}

.wallet-transfer-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #7c3aed);
  color: #fff;
  font-weight: 700;
}

.wallet-pending-transfer-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wallet-pending-transfer-copy strong {
  font-size: 14px;
  color: #fff;
}

.wallet-pending-transfer-copy span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}

.wallet-pending-transfer-copy em {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
}

.wallet-pending-transfer-card {
  cursor: pointer;
}

.wallet-pending-transfer-card[data-wallet-pending-actionable="1"] {
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.14);
}

.wallet-pending-transfer-card .wallet-refund-btn {
  min-width: 88px;
}

.wallet-transaction-info p {
  line-height: 1.5;
}

.wallet-pending-group + .wallet-pending-group {
  margin-top: 16px;
}

.wallet-pending-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wallet-pending-group-head h4 {
  margin: 0;
  font-size: 14px;
  color: #111827;
}

.wallet-pending-group-head p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  text-align: right;
}

.wallet-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(10px);
  background: rgba(17, 24, 39, 0.94);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 3000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.wallet-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.wallet-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 13, 26, 0.42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 10005;
}

.wallet-sheet-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.wallet-sheet {
  width: min(100%, 520px);
  max-height: min(82vh, 760px);
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  padding: 22px 18px 18px;
  overflow: hidden;
  transform: translateY(22px);
  transition: transform 0.18s ease;
}

.wallet-sheet-backdrop.show .wallet-sheet {
  transform: translateY(0);
}

.wallet-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.wallet-sheet-header h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #111827;
}

.wallet-sheet-header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.wallet-sheet-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: #eef2ff;
  color: #4350b9;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.wallet-sheet-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.wallet-sheet-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-sheet-field span {
  font-size: 13px;
  color: #4b5563;
  font-weight: 600;
}

.wallet-sheet-field input,
.wallet-sheet-field select {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(99, 102, 241, 0.16);
  background: #fff;
  padding: 0 14px;
  color: #111827;
  font-size: 14px;
  outline: none;
}

.wallet-sheet-field input:focus,
.wallet-sheet-field select:focus {
  border-color: rgba(99, 102, 241, 0.42);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.wallet-sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.wallet-sheet-actions.sticky {
  margin-top: 16px;
}

.wallet-sheet-submit,
.wallet-sheet-secondary {
  flex: 1;
  min-height: 46px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.wallet-sheet-submit {
  background: linear-gradient(135deg, #5066ff, #7c3aed);
  color: #fff;
}

.wallet-sheet-submit:disabled,
.wallet-sheet-secondary:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  filter: saturate(0.8);
}

.wallet-sheet-secondary {
  background: #edf1ff;
  color: #34407a;
}

.wallet-sheet-hint {
  padding: 10px 12px;
  border-radius: 14px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
  line-height: 1.5;
}

.wallet-sheet-scroller {
  max-height: min(50vh, 420px);
  overflow-y: auto;
  padding-right: 2px;
}

.wallet-sheet-backdrop--activation {
  align-items: stretch;
  padding: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(173, 191, 210, 0.18), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(194, 218, 221, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(229, 235, 242, 0.86) 0%, rgba(243, 246, 249, 0.96) 38%, rgba(248, 249, 251, 1) 100%);
  backdrop-filter: blur(8px);
}

.wallet-sheet-fullscreen.wallet-activation-sheet {
  --wallet-activation-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wallet-activation-ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
  --wallet-activation-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  width: min(100%, 560px);
  min-height: 100%;
  max-height: none;
  border-radius: 0;
  padding: 0;
  background: linear-gradient(180deg, #eef3f7 0%, #f7f9fb 44%, #ffffff 100%);
  box-shadow: none;
  overflow-y: auto;
}

.wallet-sheet-backdrop--activation .wallet-sheet-fullscreen.wallet-activation-sheet {
  opacity: 0.92;
  transform: translate3d(0, 26px, 0) scale(0.988);
  transition:
    transform 360ms var(--wallet-activation-ease),
    opacity 360ms var(--wallet-activation-ease-soft);
}

.wallet-sheet-backdrop--activation.show .wallet-sheet-fullscreen.wallet-activation-sheet {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.wallet-activation-shell {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding:
    calc(28px + env(safe-area-inset-top, 0px))
    26px
    calc(24px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-bottom, 0px)))
    26px;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.wallet-activation-shell--intro {
  gap: 0;
}

.wallet-activation-body {
  width: 100%;
  max-width: 468px;
  display: grid;
  gap: 24px;
  margin: 42px auto 0;
}

.wallet-activation-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(14px);
  opacity: 0.54;
}

.wallet-activation-orb-a {
  top: 84px;
  right: -44px;
  width: 148px;
  height: 148px;
  background: radial-gradient(circle at 30% 30%, rgba(190, 214, 221, 0.64), rgba(190, 214, 221, 0));
  animation: wallet-activation-orb-float-a 11.5s ease-in-out infinite;
}

.wallet-activation-orb-b {
  top: 242px;
  left: -60px;
  width: 174px;
  height: 174px;
  background: radial-gradient(circle at 40% 40%, rgba(175, 192, 215, 0.52), rgba(175, 192, 215, 0));
  animation: wallet-activation-orb-float-b 13s ease-in-out infinite;
}

.wallet-activation-header-top,
.wallet-activation-header-bottom,
.wallet-activation-header-slot,
.wallet-activation-progress-copy,
.wallet-activation-card-top,
.wallet-activation-card-balance,
.wallet-activation-card-footer,
.wallet-activation-footer,
.wallet-activation-note,
.wallet-activation-inline-tip,
.wallet-activation-pin-meta,
.wallet-activation-success-list div {
  display: flex;
  align-items: center;
}

.wallet-activation-header-top,
.wallet-activation-header-bottom,
.wallet-activation-header-slot,
.wallet-activation-card-top,
.wallet-activation-card-balance,
.wallet-activation-card-footer,
.wallet-activation-footer,
.wallet-activation-success-list div {
  justify-content: space-between;
}

.wallet-activation-progress-copy,
.wallet-activation-quiet-copy,
.wallet-activation-note,
.wallet-activation-inline-tip {
  gap: 10px;
}

.wallet-activation-header {
  position: relative;
  z-index: 1;
  width: min(100%, 296px);
  margin: 0 auto;
}

.wallet-activation-header--success {
  width: 100%;
  max-width: 468px;
}

.wallet-activation-header-inner {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
}

.wallet-activation-header-top {
  width: fit-content;
  justify-content: center;
  gap: 16px;
}

.wallet-activation-header-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.wallet-activation-header-slot {
  min-width: 0;
}

.wallet-activation-header-slot--leading {
  justify-content: flex-start;
}

.wallet-activation-header-slot--trailing {
  justify-content: flex-end;
}

.wallet-activation-progress-copy {
  flex: none;
  min-width: 0;
  justify-self: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}

.wallet-activation-step {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d8ea2;
}

.wallet-activation-progress-copy strong {
  font-size: 15px;
  line-height: 1.2;
  color: #112031;
}

.wallet-activation-progress-wrap {
  width: min(100%, 296px);
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0 auto;
}

.wallet-activation-progress-track {
  width: 90px;
  min-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.wallet-activation-progress-dot {
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: rgba(135, 154, 174, 0.2);
  transform-origin: center;
  transition:
    background-color 0.22s var(--wallet-activation-ease-soft),
    transform 0.26s var(--wallet-activation-ease),
    box-shadow 0.26s var(--wallet-activation-ease-soft);
}

.wallet-activation-progress-dot.is-current,
.wallet-activation-progress-dot.is-complete {
  background: linear-gradient(90deg, #7f9bbb, #5f7a94);
}

.wallet-activation-progress-dot.is-current {
  transform: scaleX(1.08);
  box-shadow: 0 0 0 0 rgba(108, 133, 156, 0.22);
  animation: wallet-activation-progress-pulse 1.9s ease-in-out infinite;
}

.wallet-activation-nav-btn {
  border: none;
  background: rgba(255, 255, 255, 0.68);
  color: #294055;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 12px 26px rgba(113, 133, 154, 0.14);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 140ms var(--wallet-activation-ease-soft),
    box-shadow 240ms var(--wallet-activation-ease),
    background-color 240ms var(--wallet-activation-ease),
    color 220ms var(--wallet-activation-ease-soft);
  will-change: transform;
}

.wallet-activation-nav-btn.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.wallet-activation-nav-btn::after,
.wallet-activation-primary-btn::after,
.wallet-activation-keypad-btn::after {
  content: "";
  position: absolute;
  inset: auto auto -42% 50%;
  width: 78%;
  height: 78%;
  border-radius: 999px;
  transform: translateX(-50%) scale(0.72);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 72%);
  transition:
    opacity 220ms var(--wallet-activation-ease-soft),
    transform 320ms var(--wallet-activation-ease);
}

.wallet-activation-nav-btn.is-pressed::after,
.wallet-activation-primary-btn.is-pressed::after,
.wallet-activation-keypad-btn.is-pressed::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.wallet-activation-inline-symbol,
.wallet-activation-success-symbol {
  font-size: 18px;
}

.wallet-activation-success-symbol {
  font-size: 34px;
}

.wallet-activation-hero,
.wallet-activation-trust-panel,
.wallet-activation-note,
.wallet-activation-pin-panel,
.wallet-activation-loading-card,
.wallet-activation-success-mark {
  position: relative;
  z-index: 1;
}

.wallet-activation-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}

.wallet-activation-hero--compact {
  gap: 8px;
  margin-top: 0;
}

.wallet-activation-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7d8ea2;
}

.wallet-activation-hero h3,
.wallet-activation-success-mark h3 {
  margin: 0;
  font-size: clamp(24px, 4vw, 29px);
  line-height: 1.14;
  letter-spacing: -0.04em;
  color: #122033;
}

.wallet-activation-hero--compact h3 {
  font-size: clamp(23px, 4vw, 27px);
}

.wallet-activation-hero p:last-child,
.wallet-activation-success-mark p,
.wallet-activation-note p,
.wallet-activation-inline-tip p,
.wallet-activation-loading-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #627487;
}

.wallet-activation-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(254, 255, 255, 0.96), rgba(238, 243, 247, 0.9)),
    linear-gradient(135deg, rgba(171, 196, 217, 0.12), rgba(195, 221, 223, 0.08));
  border: 1px solid rgba(160, 180, 198, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 40px rgba(120, 140, 160, 0.1);
}

.wallet-activation-card::after {
  content: "";
  position: absolute;
  inset: auto 20px 18px auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(229, 121, 119, 0.42), transparent 58%),
    radial-gradient(circle at 66% 58%, rgba(221, 169, 79, 0.42), transparent 62%);
  opacity: 0.38;
}

.wallet-activation-card-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d8ea2;
}

.wallet-activation-card-top,
.wallet-activation-card-identity,
.wallet-activation-card-balance strong {
  color: #132235;
}

.wallet-activation-card-identity {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.wallet-activation-card-name {
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.wallet-activation-card-meta {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #7d8ea2;
}

.wallet-activation-card-status {
  position: relative;
  z-index: 1;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(246, 248, 251, 0.78);
  color: #71859c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wallet-activation-card-status.is-active {
  background: rgba(215, 236, 224, 0.96);
  color: #355f4e;
}

.wallet-activation-card-balance {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 2px;
}

.wallet-activation-card-balance span,
.wallet-activation-card-footer span,
.wallet-activation-success-list span {
  color: #6b7d90;
}

.wallet-activation-card-balance span {
  font-size: 13px;
}

.wallet-activation-card-balance strong {
  position: relative;
  z-index: 1;
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: -0.06em;
}

.wallet-activation-card-footer {
  position: relative;
  z-index: 1;
  font-size: 12px;
  letter-spacing: 0.04em;
  justify-content: flex-start;
}

.wallet-activation-card-footer span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
}

.wallet-activation-quiet-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding-left: 0;
}

.wallet-activation-quiet-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d8ea2;
}

.wallet-activation-quiet-copy strong {
  font-size: 17px;
  line-height: 1.3;
  color: #18283a;
}

.wallet-activation-quiet-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #68798d;
}

.wallet-activation-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  color: #5e758f;
}

.wallet-activation-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 468px;
  gap: 12px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 26px;
}

.wallet-activation-primary-btn,
.wallet-activation-secondary-btn {
  min-height: 52px;
  border: none;
  border-radius: 17px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 140ms var(--wallet-activation-ease-soft),
    box-shadow 260ms var(--wallet-activation-ease),
    background-color 260ms var(--wallet-activation-ease),
    color 220ms var(--wallet-activation-ease-soft),
    opacity 220ms var(--wallet-activation-ease-soft);
  will-change: transform;
}

.wallet-activation-primary-btn {
  width: 100%;
  background: linear-gradient(135deg, #30485f, #6d86a0);
  color: #fff;
  box-shadow: 0 16px 28px rgba(79, 101, 124, 0.16);
}

.wallet-activation-secondary-btn {
  align-self: center;
  min-height: 22px;
  padding: 0;
  background: transparent;
  color: #6d7f93;
  font-size: 14px;
  font-weight: 600;
}

.wallet-activation-secondary-btn--ghost {
  width: auto;
}

.wallet-activation-pin-panel {
  display: grid;
  gap: 12px;
  padding: 20px 0 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.wallet-activation-pin-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.wallet-activation-pin-row.is-error {
  animation: wallet-pin-shake 0.34s ease;
}

.wallet-activation-pin-slot {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(250, 252, 253, 0.92);
  border: 1px solid rgba(163, 182, 200, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition:
    border-color 0.18s var(--wallet-activation-ease-soft),
    transform 0.18s var(--wallet-activation-ease-soft),
    background-color 0.18s var(--wallet-activation-ease-soft),
    box-shadow 0.22s var(--wallet-activation-ease-soft);
}

.wallet-activation-pin-slot.is-filled {
  border-color: rgba(108, 133, 156, 0.42);
  background: rgba(241, 246, 250, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 16px rgba(111, 132, 153, 0.06);
}

.wallet-activation-pin-slot.is-pulse-error {
  border-color: rgba(205, 93, 93, 0.38);
}

.wallet-activation-pin-slot.is-latest {
  border-color: rgba(94, 119, 143, 0.48);
  background: rgba(236, 243, 248, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px rgba(104, 126, 149, 0.1);
  animation: wallet-activation-pin-slot-pop 180ms var(--wallet-activation-ease-soft) both;
}

.wallet-activation-pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4d6277;
  opacity: 0;
  transform: scale(0.45);
  transition:
    opacity 0.18s var(--wallet-activation-ease-soft),
    transform 0.18s var(--wallet-activation-ease-soft);
}

.wallet-activation-pin-slot.is-filled .wallet-activation-pin-dot {
  opacity: 1;
  transform: scale(1);
}

.wallet-activation-pin-slot.is-latest .wallet-activation-pin-dot {
  animation: wallet-activation-pin-dot-in 180ms var(--wallet-activation-ease-soft) both;
}

.wallet-activation-pin-meta {
  font-size: 12px;
  color: #71859b;
}

.wallet-activation-hint,
.wallet-activation-error {
  min-height: 20px;
  font-size: 13px;
}

.wallet-activation-hint {
  color: #71859b;
}

.wallet-activation-error {
  color: #b85757;
}

.wallet-activation-numpad {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wallet-activation-keypad-btn,
.wallet-activation-keypad-spacer {
  min-height: 62px;
  border-radius: 20px;
}

.wallet-activation-keypad-btn {
  border: none;
  background: rgba(255, 255, 255, 0.72);
  color: #23384e;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 12px 22px rgba(112, 132, 153, 0.1);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 130ms var(--wallet-activation-ease-soft),
    box-shadow 220ms var(--wallet-activation-ease),
    background-color 220ms var(--wallet-activation-ease),
    color 220ms var(--wallet-activation-ease-soft);
  will-change: transform;
}

.wallet-activation-keypad-btn.is-action {
  font-size: 14px;
  font-weight: 700;
  color: #57708a;
}

.wallet-activation-keypad-btn.is-pressed {
  background: rgba(225, 235, 243, 0.98);
  color: #1b3047;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 0 0 1px rgba(122, 143, 164, 0.16), 0 6px 12px rgba(101, 122, 144, 0.08);
}

.wallet-activation-keypad-btn.is-action.is-pressed {
  color: #39536d;
}

.wallet-activation-nav-btn:focus-visible,
.wallet-activation-primary-btn:focus-visible,
.wallet-activation-secondary-btn:focus-visible,
.wallet-activation-keypad-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(120, 144, 168, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 30px rgba(102, 123, 146, 0.14);
}

.wallet-activation-nav-btn.is-pressed,
.wallet-activation-primary-btn.is-pressed,
.wallet-activation-secondary-btn.is-pressed,
.wallet-activation-keypad-btn.is-pressed,
.wallet-activation-keypad-btn:active,
.wallet-activation-primary-btn:active,
.wallet-activation-secondary-btn:active,
.wallet-activation-nav-btn:active {
  transform: scale(0.968) translateY(2px);
}

.wallet-activation-keypad-spacer {
  background: transparent;
}

.wallet-activation-loading-card,
.wallet-activation-success-mark {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}

.wallet-activation-loading-card {
  margin: auto 0;
  padding: 28px 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(168, 186, 203, 0.22);
  box-shadow: 0 28px 60px rgba(112, 132, 153, 0.16);
}

.wallet-activation-loading-card strong {
  font-size: 18px;
  color: #18283b;
}

.wallet-activation-loading-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(134, 154, 174, 0.22);
  border-top-color: #58728d;
  animation: wallet-activation-spin 0.9s linear infinite;
}

.wallet-activation-success-mark {
  margin-top: 10px;
}

.wallet-activation-success-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(223, 236, 228, 0.98), rgba(244, 250, 246, 0.9));
  color: #3f6e5c;
  box-shadow: 0 16px 28px rgba(101, 135, 118, 0.12);
  animation: wallet-activation-success-bloom 560ms var(--wallet-activation-ease) both;
}

@media (hover: hover) and (pointer: fine) {
  .wallet-activation-nav-btn:hover {
    background: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 16px 30px rgba(102, 123, 146, 0.16);
    transform: translateY(-1px);
  }

  .wallet-activation-nav-btn:hover::after,
  .wallet-activation-nav-btn:focus-visible::after,
  .wallet-activation-primary-btn:hover::after,
  .wallet-activation-primary-btn:focus-visible::after,
  .wallet-activation-keypad-btn:hover::after,
  .wallet-activation-keypad-btn:focus-visible::after,
  .wallet-activation-nav-btn.is-pressed::after,
  .wallet-activation-primary-btn.is-pressed::after,
  .wallet-activation-keypad-btn.is-pressed::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  .wallet-activation-primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 34px rgba(79, 101, 124, 0.2);
  }

  .wallet-activation-secondary-btn:hover {
    color: #4d657e;
    opacity: 0.92;
  }

  .wallet-activation-keypad-btn:hover {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 16px 26px rgba(112, 132, 153, 0.12);
    transform: translateY(-1px);
  }

  .wallet-activation-keypad-btn.is-action:hover {
    color: #45617d;
  }
}

.wallet-activation-summary {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  padding: 10px 0 0;
}

.wallet-activation-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(157, 176, 195, 0.16);
}

.wallet-activation-summary-row span {
  font-size: 13px;
  color: #708196;
}

.wallet-activation-summary-row strong {
  font-size: 15px;
  color: #18283a;
}

@keyframes wallet-pin-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
}

@keyframes wallet-activation-orb-float-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.98);
    opacity: 0.52;
  }

  50% {
    transform: translate3d(8px, -10px, 0) scale(1.04);
    opacity: 0.68;
  }
}

@keyframes wallet-activation-orb-float-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.48;
  }

  50% {
    transform: translate3d(-10px, 12px, 0) scale(1.06);
    opacity: 0.62;
  }
}

@keyframes wallet-activation-progress-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(108, 133, 156, 0.1);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(108, 133, 156, 0);
  }
}

@keyframes wallet-activation-pin-slot-pop {
  0% {
    transform: scale(0.94);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes wallet-activation-pin-dot-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wallet-activation-success-bloom {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.88);
    box-shadow: 0 8px 16px rgba(101, 135, 118, 0.08);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 16px 28px rgba(101, 135, 118, 0.12);
  }
}

@keyframes wallet-activation-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wallet-activation-orb-a,
  .wallet-activation-orb-b,
  .wallet-activation-progress-dot.is-current,
  .wallet-activation-pin-slot.is-latest,
  .wallet-activation-pin-slot.is-latest .wallet-activation-pin-dot,
  .wallet-activation-success-icon {
    animation: none !important;
  }

  .wallet-activation-nav-btn,
  .wallet-activation-primary-btn,
  .wallet-activation-secondary-btn,
  .wallet-activation-keypad-btn,
  .wallet-activation-pin-slot,
  .wallet-activation-pin-dot {
    transition: none !important;
  }

  .wallet-activation-nav-btn::after,
  .wallet-activation-primary-btn::after,
  .wallet-activation-keypad-btn::after {
    display: none !important;
  }
}

@media (min-width: 620px) {
  .wallet-sheet-backdrop--activation {
    align-items: center;
    padding: 18px;
  }

  .wallet-sheet-fullscreen.wallet-activation-sheet {
    min-height: min(920px, calc(100vh - 36px));
    max-height: min(920px, calc(100vh - 36px));
    border-radius: 34px;
    box-shadow: 0 34px 90px rgba(100, 122, 146, 0.22);
  }
}

@media (max-height: 760px) {
  .wallet-activation-shell {
    gap: 18px;
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .wallet-activation-body {
    gap: 22px;
    margin-top: 34px;
  }

  .wallet-activation-card {
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
  }

  .wallet-activation-card-balance strong {
    font-size: clamp(30px, 4vw, 38px);
  }

  .wallet-activation-keypad-btn,
  .wallet-activation-keypad-spacer {
    min-height: 58px;
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .wallet-activation-shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  .wallet-activation-body,
  .wallet-activation-footer {
    max-width: none;
  }

  .wallet-activation-hero h3,
  .wallet-activation-success-mark h3 {
    font-size: clamp(22px, 8vw, 27px);
  }

  .wallet-activation-card-balance strong {
    font-size: clamp(28px, 10vw, 38px);
  }

  .wallet-activation-footer {
    padding-top: 20px;
  }

  .wallet-activation-progress-copy {
    gap: 10px;
  }

  .wallet-activation-progress-track {
    width: 84px;
  }

  .wallet-activation-header-slot {
    min-width: 0;
  }
}

.wallet-source-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(99, 102, 241, 0.12);
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.08);
}

.wallet-source-card + .wallet-source-card {
  margin-top: 12px;
}

.wallet-source-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.wallet-source-card-title-row strong {
  font-size: 15px;
  color: #111827;
}

.wallet-source-card-amount {
  font-size: 14px;
  font-weight: 700;
  color: #4256d0;
}

.wallet-source-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wallet-source-card-meta span {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
}

.wallet-source-card-submeta {
  margin-top: 10px;
  font-size: 12px;
  color: #64748b;
}

.wallet-source-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.wallet-source-card-actions button {
  flex: 1;
  min-height: 36px;
  border: none;
  border-radius: 12px;
  background: #eef2ff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.wallet-source-card-actions button.danger {
  background: #fff1f2;
  color: #e11d48;
}

.wallet-mask-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wallet-mask-option {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94));
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wallet-mask-option:active {
  transform: scale(0.985);
}

.wallet-mask-option.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.16);
}

.wallet-mask-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wallet-mask-option-head strong {
  font-size: 16px;
  color: #0f172a;
}

.wallet-mask-option-head em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 4px 8px;
  border-radius: 999px;
}

.wallet-mask-option-subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

.wallet-dev-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(99, 102, 241, 0.12);
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.08);
}

.wallet-dev-card + .wallet-dev-card {
  margin-top: 12px;
}

.wallet-dev-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.wallet-dev-card-head strong {
  font-size: 15px;
  color: #111827;
}

.wallet-dev-card-head span {
  font-size: 12px;
  color: #64748b;
}

.wallet-dev-context {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
}

.wallet-dev-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wallet-dev-stat {
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8faff;
  border: 1px solid rgba(99, 102, 241, 0.12);
}

.wallet-dev-stat span {
  display: block;
  font-size: 11px;
  color: #64748b;
}

.wallet-dev-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #111827;
}

.wallet-dev-contact-picker {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.wallet-dev-contact-brief {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff, #f8faff);
  border: 1px solid rgba(99, 102, 241, 0.14);
}

.wallet-dev-contact-brief strong {
  display: block;
  font-size: 14px;
  color: #1e293b;
}

.wallet-dev-contact-brief span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #4f46e5;
}

.wallet-sheet-status {
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 14px;
  background: #eef2ff;
  color: #4256d0;
  font-size: 12px;
  line-height: 1.5;
}

.wallet-sheet-status.is-error {
  background: #fff1f2;
  color: #e11d48;
}

.wallet-filter-btn-hidden {
  display: none !important;
}

.wallet-transactions-page {
  min-height: calc(100vh - 220px);
}

.wallet-exchange-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wallet-exchange-minimal {
  padding: 20px 18px 18px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(242, 246, 249, 0.96));
  border: 1px solid rgba(188, 200, 212, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 28px rgba(113, 128, 145, 0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wallet-exchange-minimal-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wallet-exchange-minimal-head h3 {
  margin: 0;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -0.05em;
  color: #213244;
}

.wallet-exchange-minimal-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7d8c;
}

.wallet-exchange-minimal-caption {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #748694;
}

.wallet-exchange-inline-success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(191, 203, 214, 0.18);
  border-bottom: 1px solid rgba(191, 203, 214, 0.18);
}

.wallet-exchange-inline-success-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wallet-exchange-inline-success-copy strong {
  font-size: 15px;
  line-height: 1.2;
  color: #2b3c4d;
}

.wallet-exchange-inline-success-copy span {
  font-size: 11px;
  color: #758695;
}

.wallet-exchange-inline-dismiss {
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #67798a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.wallet-exchange-hero {
  padding: 20px 18px 16px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(215, 229, 243, 0.42), transparent 32%),
    linear-gradient(180deg, rgba(247, 250, 252, 0.98), rgba(238, 244, 248, 0.96));
  border: 1px solid rgba(177, 193, 208, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 28px rgba(118, 136, 153, 0.06);
}

.wallet-exchange-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.wallet-exchange-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7c8e9d;
}

.wallet-exchange-hero h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.05em;
  color: #1f2e3d;
}

.wallet-exchange-hero p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #6a7a88;
}

.wallet-exchange-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.wallet-exchange-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(188, 202, 215, 0.22);
  color: #6a7f90;
  font-size: 10px;
  font-weight: 600;
}

.wallet-exchange-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wallet-exchange-balance-card {
  padding: 14px 13px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(243, 247, 250, 0.82));
  border: 1px solid rgba(191, 204, 216, 0.2);
  box-shadow: none;
}

.wallet-exchange-balance-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a8d9d;
}

.wallet-exchange-balance-card strong {
  display: block;
  margin-top: 7px;
  font-size: 22px;
  color: #223244;
  letter-spacing: -0.04em;
}

.wallet-exchange-balance-card p {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #748696;
}

.wallet-exchange-surface {
  padding: 18px 17px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 250, 0.92));
  border: 1px solid rgba(199, 209, 219, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 24px rgba(119, 135, 150, 0.05);
}

.wallet-exchange-field input {
  min-height: 50px;
  font-size: 19px;
  font-weight: 600;
}

.wallet-exchange-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wallet-exchange-max-btn {
  flex-shrink: 0;
  min-width: 64px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(194, 206, 217, 0.22);
  border-radius: 14px;
  background: rgba(240, 244, 247, 0.88);
  color: #607485;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.wallet-exchange-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.wallet-exchange-rule-note {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.55;
  color: #7a8b99;
}

.wallet-exchange-quick-btn {
  min-width: 88px;
  padding: 9px 11px;
  border: 1px solid rgba(196, 208, 218, 0.22);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.88);
  box-shadow: none;
  color: #566d80;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 180ms ease;
}

.wallet-exchange-quick-btn strong {
  font-size: 14px;
  line-height: 1;
  color: #26384b;
}

.wallet-exchange-quick-btn span {
  font-size: 10px;
  color: #7b8c9a;
}

.wallet-exchange-quick-btn.is-active {
  border-color: rgba(155, 177, 195, 0.34);
  background: rgba(236, 242, 247, 0.94);
}

.wallet-exchange-max-btn:active,
.wallet-exchange-quick-btn:active {
  transform: scale(0.985);
}

.wallet-exchange-quick-btn:hover,
.wallet-exchange-max-btn:hover {
  transform: translateY(-0.5px);
}

.wallet-exchange-minimal-result {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(190, 203, 215, 0.18);
  border-bottom: 1px solid rgba(190, 203, 215, 0.18);
}

.wallet-exchange-minimal-result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
}

.wallet-exchange-minimal-result-row + .wallet-exchange-minimal-result-row {
  border-top: 1px solid rgba(190, 203, 215, 0.16);
}

.wallet-exchange-minimal-result-row span {
  font-size: 12px;
  color: #768897;
}

.wallet-exchange-minimal-result-row strong {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #223345;
}

.wallet-exchange-preview {
  padding: 17px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(244, 247, 250, 0.94), rgba(238, 242, 246, 0.96));
  border: 1px solid rgba(191, 204, 216, 0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wallet-exchange-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wallet-exchange-preview-head span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a8d9d;
}

.wallet-exchange-preview-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.wallet-exchange-preview-side {
  padding: 12px 11px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(198, 209, 219, 0.16);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wallet-exchange-preview-side span {
  font-size: 11px;
  color: #7a8b99;
}

.wallet-exchange-preview-side strong {
  font-size: 17px;
  line-height: 1.1;
  color: #27384a;
  letter-spacing: -0.03em;
}

.wallet-exchange-preview-side-cash {
  background: rgba(235, 241, 246, 0.78);
}

.wallet-exchange-preview-arrow {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(233, 239, 244, 0.88);
  color: #708294;
  border: 1px solid rgba(198, 208, 217, 0.2);
}

.wallet-exchange-preview-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wallet-exchange-preview-summary-item {
  padding-top: 9px;
  border-top: 1px solid rgba(190, 203, 215, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wallet-exchange-preview-summary-item span {
  font-size: 11px;
  color: #7a8d9d;
}

.wallet-exchange-preview-summary-item strong {
  font-size: 15px;
  color: #314355;
  letter-spacing: -0.03em;
}

.wallet-exchange-preview-head > strong {
  font-size: 26px;
  color: #213244;
  letter-spacing: -0.03em;
}

.wallet-exchange-hint {
  font-size: 12px;
  background: rgba(238, 243, 247, 0.86);
  color: #677b8d;
}

.wallet-exchange-assurance {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0 0;
}

.wallet-exchange-assurance-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(237, 242, 246, 0.88);
  color: #6d8193;
  border: 1px solid rgba(197, 208, 217, 0.2);
}

.wallet-exchange-assurance-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wallet-exchange-assurance-copy strong {
  font-size: 13px;
  color: #304152;
}

.wallet-exchange-assurance-copy span {
  font-size: 11px;
  line-height: 1.6;
  color: #748594;
}

.wallet-exchange-success {
  padding: 15px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(240, 245, 248, 0.96), rgba(235, 241, 245, 0.96));
  border: 1px solid rgba(191, 203, 213, 0.2);
  box-shadow: none;
}

.wallet-exchange-success-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wallet-exchange-success-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #748797;
}

.wallet-exchange-success-head strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.2;
  color: #2b3d50;
}

.wallet-exchange-success p {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #718291;
}

.wallet-exchange-success-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.wallet-exchange-success-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(196, 206, 214, 0.18);
  color: #6e8292;
  font-size: 10px;
  font-weight: 600;
}

.wallet-exchange-success-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.wallet-exchange-success-actions .wallet-sheet-submit,
.wallet-exchange-success-actions .wallet-sheet-secondary {
  min-height: 42px;
}

.wallet-exchange-success-actions .wallet-sheet-submit {
  flex: 1.1;
}

.wallet-exchange-success-actions .wallet-sheet-secondary {
  flex: 0.9;
}

.wallet-exchange-success-dismiss {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.54);
  color: #718395;
}

.wallet-exchange-footer {
  margin-top: 4px;
  padding-bottom: 4px;
}

.wallet-exchange-submit {
  min-height: 52px;
  border-radius: 18px;
  padding: 0 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #5f7488, #7f94a7);
  color: #f7fafc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 20px rgba(96, 115, 132, 0.18);
  letter-spacing: 0.01em;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    background 180ms ease;
}

.wallet-exchange-submit:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 14px 24px rgba(96, 115, 132, 0.22);
  filter: saturate(1.02);
}

.wallet-exchange-submit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(227, 236, 243, 0.96),
    0 0 0 5px rgba(112, 132, 151, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 20px rgba(96, 115, 132, 0.18);
}

.wallet-exchange-submit:active:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
  transform: translateY(0) scale(0.992);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 7px 14px rgba(96, 115, 132, 0.16);
}

.wallet-exchange-submit.is-disabled,
.wallet-exchange-submit[aria-disabled="true"] {
  opacity: 1;
  cursor: not-allowed;
  filter: none;
  background: linear-gradient(180deg, rgba(241, 245, 248, 0.98), rgba(231, 237, 242, 0.96));
  color: #8a9aa8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.wallet-exchange-submit[data-loading="1"] {
  cursor: progress;
  filter: none;
}

.wallet-income-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wallet-income-hero {
  padding: 20px 18px 16px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(225, 232, 238, 0.42), transparent 32%),
    linear-gradient(180deg, rgba(250, 248, 243, 0.98), rgba(243, 240, 232, 0.96));
  border: 1px solid rgba(191, 185, 171, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 28px rgba(118, 111, 98, 0.06);
}

.wallet-income-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-income-eyebrow,
.wallet-income-surface-kicker,
.wallet-income-empty-mark {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d816d;
}

.wallet-income-hero h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.05em;
  color: #2f2921;
}

.wallet-income-hero p,
.wallet-income-surface-copy p,
.wallet-income-summary-card p,
.wallet-income-empty p {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: #726757;
}

.wallet-income-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.wallet-income-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.72);
  border: 1px solid rgba(195, 186, 170, 0.28);
  color: #7d705f;
  font-size: 10px;
  font-weight: 700;
}

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

.wallet-income-summary-card {
  padding: 14px 13px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.82), rgba(247, 243, 235, 0.94));
  border: 1px solid rgba(199, 191, 177, 0.26);
}

.wallet-income-summary-card span,
.wallet-income-slip-item span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8c7f6f;
}

.wallet-income-summary-card strong {
  display: block;
  margin-top: 7px;
  font-size: 22px;
  color: #2c251e;
  letter-spacing: -0.04em;
}

.wallet-income-summary-card p {
  margin-top: 6px;
}

.wallet-income-summary-card-wide {
  grid-column: 1 / -1;
}

.wallet-income-surface {
  padding: 18px 17px 14px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(248, 244, 236, 0.94));
  border: 1px solid rgba(204, 196, 183, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 24px rgba(119, 109, 92, 0.05);
}

.wallet-income-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.wallet-income-surface-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wallet-income-surface-copy h4,
.wallet-income-empty strong {
  margin: 0;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: #2f2921;
}

.wallet-income-primary-btn {
  min-height: 48px;
  border: none;
  border-radius: 18px;
  padding: 0 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #877765, #6d5f51);
  color: #f8f4ee;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 18px rgba(109, 95, 81, 0.16);
  cursor: pointer;
}

.wallet-income-primary-btn--top {
  flex-shrink: 0;
}

.wallet-income-primary-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  filter: saturate(0.8);
}

.wallet-income-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wallet-income-slip {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(247, 242, 233, 0.98));
  border: 1px solid rgba(201, 192, 178, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 18px rgba(124, 113, 96, 0.05);
  overflow: hidden;
}

.wallet-income-slip::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50px;
  border-top: 1px dashed rgba(165, 151, 132, 0.34);
}

.wallet-income-slip::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  pointer-events: none;
}

.wallet-income-slip-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
}

.wallet-income-slip-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wallet-income-slip-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(249, 242, 230, 0.94);
  border: 1px solid rgba(197, 184, 164, 0.34);
  color: #8a7863;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wallet-income-slip-title strong,
.wallet-income-slip-item strong {
  color: #312b23;
}

.wallet-income-slip-title strong {
  font-size: 18px;
  line-height: 1.2;
}

.wallet-income-slip-amount {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #534637;
}

.wallet-income-slip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  padding-top: 10px;
}

.wallet-income-slip-item strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
}

.wallet-income-slip-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(180, 169, 151, 0.2);
}

.wallet-income-slip-actions button {
  flex: 1;
  min-height: 38px;
  border: 1px solid rgba(194, 186, 172, 0.3);
  border-radius: 14px;
  background: rgba(255, 251, 244, 0.88);
  color: #5d5143;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.wallet-income-slip-actions button.danger {
  background: rgba(255, 244, 242, 0.92);
  color: #9d544f;
}

.wallet-income-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 252, 248, 0.94), rgba(246, 240, 231, 0.94));
  border: 1px dashed rgba(186, 174, 153, 0.44);
}

.wallet-income-footer {
  position: sticky;
  bottom: 0;
  margin-top: 14px;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(248, 244, 236, 0), rgba(248, 244, 236, 0.92) 28%, rgba(248, 244, 236, 0.98));
}

.wallet-income-footer .wallet-income-primary-btn {
  width: 100%;
}

.wallet-income-editor-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wallet-income-editor-hero,
.wallet-income-editor-form {
  border-radius: 24px;
  border: 1px solid rgba(204, 196, 183, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(248, 244, 236, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 24px rgba(119, 109, 92, 0.05);
}

.wallet-income-editor-hero {
  padding: 20px 18px 16px;
}

.wallet-income-editor-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-income-editor-copy h3,
.wallet-income-editor-section-head h4 {
  margin: 0;
  color: #2f2921;
  letter-spacing: -0.04em;
}

.wallet-income-editor-copy h3 {
  font-size: 24px;
  line-height: 1.12;
}

.wallet-income-editor-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: #726757;
}

.wallet-income-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.wallet-income-editor-form {
  padding: 18px 17px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wallet-income-editor-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(189, 179, 160, 0.18);
}

.wallet-income-editor-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.wallet-income-editor-section-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wallet-income-editor-section-head h4 {
  font-size: 20px;
  line-height: 1.15;
}

.wallet-income-editor-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-income-editor-field span {
  font-size: 13px;
  color: #6f6252;
  font-weight: 700;
}

.wallet-income-editor-field input {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(194, 185, 171, 0.34);
  background: rgba(255, 251, 245, 0.92);
  padding: 0 15px;
  color: #30291f;
  font-size: 14px;
  outline: none;
}

.wallet-income-editor-field input:focus {
  border-color: rgba(141, 126, 108, 0.48);
  box-shadow: 0 0 0 3px rgba(182, 169, 150, 0.16);
}

.wallet-income-editor-money-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(194, 185, 171, 0.34);
  background: rgba(255, 251, 245, 0.92);
}

.wallet-income-editor-money-row em {
  flex-shrink: 0;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8b7b65;
}

.wallet-income-editor-money-row input {
  min-height: 52px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.wallet-income-editor-tag-row,
.wallet-income-editor-schedule-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wallet-income-chip {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(194, 185, 171, 0.34);
  border-radius: 999px;
  background: rgba(255, 251, 245, 0.88);
  color: #6d604f;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.wallet-income-chip.is-active {
  background: rgba(241, 231, 214, 0.92);
  border-color: rgba(155, 140, 120, 0.42);
  color: #4f4335;
}

.wallet-income-chip-schedule {
  min-height: 40px;
}

.wallet-income-editor-schedule-grid,
.wallet-income-editor-receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.wallet-income-editor-note,
.wallet-income-editor-status {
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(246, 238, 226, 0.76);
  border: 1px solid rgba(197, 184, 164, 0.24);
  color: #675948;
  font-size: 12px;
  line-height: 1.6;
}

.wallet-income-editor-receipt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(251, 248, 241, 0.96), rgba(244, 238, 227, 0.96));
  border: 1px dashed rgba(186, 174, 153, 0.42);
}

.wallet-income-editor-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wallet-income-editor-receipt-head strong,
.wallet-income-editor-receipt-grid strong {
  color: #312b23;
}

.wallet-income-editor-receipt-head strong {
  font-size: 13px;
}

.wallet-income-editor-receipt-grid span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8c7f6f;
}

.wallet-income-editor-receipt-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
}

.wallet-income-editor-footer {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}

.wallet-income-editor-secondary {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(194, 185, 171, 0.34);
  background: rgba(255, 251, 245, 0.9);
  color: #5d5143;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.wallet-income-page--distilled,
.wallet-income-editor-page--distilled {
  gap: 12px;
}

.wallet-income-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 2px 2px;
}

.wallet-income-header-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wallet-income-header-copy h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #2c251d;
}

.wallet-income-header-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #736757;
}

.wallet-income-list {
  gap: 10px;
}

.wallet-income-row {
  padding: 15px 0 14px;
  border-bottom: 1px solid rgba(187, 177, 161, 0.18);
}

.wallet-income-row:last-child {
  border-bottom: none;
}

.wallet-income-row-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wallet-income-row-copy {
  min-width: 0;
}

.wallet-income-row-copy strong {
  display: block;
  font-size: 17px;
  line-height: 1.2;
  color: #2f2921;
}

.wallet-income-row-copy p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #7a6d5d;
}

.wallet-income-row-amount {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #4e4337;
}

.wallet-income-row-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.wallet-income-row-actions button {
  border: none;
  background: transparent;
  padding: 0;
  color: #695c4c;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.wallet-income-row-actions button.danger {
  color: #9d544f;
}

.wallet-income-empty--quiet {
  padding: 20px 0 4px;
  border: none;
  background: transparent;
}

.wallet-income-empty--quiet p {
  max-width: 26ch;
}

.wallet-income-page--empty {
  gap: 18px;
  padding-top: 4px;
}

.wallet-income-empty-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 2px 0;
}

.wallet-income-empty-head h3 {
  margin: 0;
  font-size: 25px;
  line-height: 1.04;
  letter-spacing: -0.05em;
  color: #2c251d;
}

.wallet-income-eyebrow--paper {
  color: #8f826f;
  letter-spacing: 0.14em;
}

.wallet-income-empty-sheet {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(193, 182, 165, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.97), rgba(249, 243, 234, 0.96));
  box-shadow:
    0 18px 36px rgba(160, 148, 128, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.wallet-income-empty-perf {
  height: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(174, 161, 141, 0.48) 0 8px,
      transparent 8px 14px
    );
  opacity: 0.72;
}

.wallet-income-empty-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 22ch;
}

.wallet-income-empty-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a8a75;
}

.wallet-income-empty-copy strong {
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.055em;
  color: #2f2921;
}

.wallet-income-empty-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #706251;
}

.wallet-income-primary-btn--sheet {
  width: 100%;
  min-height: 46px;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 20px rgba(125, 109, 90, 0.12);
}

.wallet-income-editor-page--distilled .wallet-income-header--editor {
  align-items: flex-start;
}

.wallet-income-editor-simple {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 2px 0 8px;
}

.wallet-income-editor-simple .wallet-income-editor-field,
.wallet-income-editor-simple .wallet-income-editor-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-income-editor-page--compact {
  gap: 14px;
}

.wallet-income-editor-head {
  padding-top: 2px;
}

.wallet-income-editor-head .wallet-income-header-copy {
  gap: 5px;
}

.wallet-income-editor-head .wallet-income-header-copy h3 {
  font-size: 24px;
}

.wallet-income-editor-head .wallet-income-header-copy p {
  font-size: 13px;
}

.wallet-income-editor-simple--compact {
  gap: 14px;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 8px);
}

.wallet-income-editor-field--compact span,
.wallet-income-editor-block--compact .wallet-income-editor-label {
  font-size: 12px;
  letter-spacing: 0.01em;
}

.wallet-income-editor-field--compact input {
  min-height: 44px;
  border-radius: 14px;
  padding: 0 14px;
}

.wallet-income-editor-money-row--compact {
  min-height: 48px;
  border-radius: 16px;
  padding: 0 14px;
}

.wallet-income-editor-money-row--compact input {
  min-height: 46px;
  font-size: 20px;
}

.wallet-income-editor-chip-row--dense {
  gap: 6px;
}

.wallet-income-chip--compact {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 999px;
}

.wallet-income-editor-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-income-editor-status--compact {
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.55;
}

.wallet-income-editor-actions {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  background:
    linear-gradient(180deg, rgba(247, 243, 236, 0), rgba(247, 243, 236, 0.9) 24%, rgba(247, 243, 236, 0.98) 100%);
}

.wallet-income-editor-actions-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wallet-income-editor-secondary--quiet {
  min-height: 38px;
  padding: 0 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #6d604f;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

.wallet-income-editor-actions-spacer {
  width: 1px;
  height: 1px;
}

.wallet-income-primary-btn--block {
  width: 100%;
  min-height: 46px;
  border-radius: 16px;
}

.wallet-income-page--ledger {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 calc(env(safe-area-inset-bottom, 0px) + 10px);
}

.wallet-income-page-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 2px 0;
}

.wallet-income-page-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.wallet-income-page-title h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.04;
  letter-spacing: -0.05em;
  color: #2c251d;
}

.wallet-income-page-title p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #766958;
}

.wallet-income-list--ledger {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wallet-income-row--ledger {
  padding: 14px 0 13px;
  border-bottom: 1px solid rgba(187, 177, 161, 0.16);
}

.wallet-income-row--ledger .wallet-income-row-main {
  align-items: baseline;
  gap: 12px;
}

.wallet-income-row-title {
  display: block;
  min-width: 0;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #2f2921;
}

.wallet-income-row-meta {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #7a6d5d;
}

.wallet-income-row-actions--ledger {
  gap: 12px;
  margin-top: 10px;
}

.wallet-income-row-actions--ledger button {
  font-size: 13px;
}

.wallet-income-empty-sheet--compact {
  gap: 10px;
  padding: 16px 16px 18px;
  border-radius: 20px;
  box-shadow:
    0 12px 24px rgba(160, 148, 128, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.wallet-income-empty-copy--compact {
  max-width: 24ch;
}

.wallet-income-empty-copy--compact strong {
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.wallet-income-empty-copy--compact p {
  font-size: 13px;
  line-height: 1.55;
}

.wallet-income-page-actions {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  padding-top: 8px;
  background:
    linear-gradient(180deg, rgba(247, 243, 236, 0), rgba(247, 243, 236, 0.88) 30%, rgba(247, 243, 236, 0.98) 100%);
}

.wallet-income-primary-btn--footer {
  width: 100%;
  min-height: 46px;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 22px rgba(125, 109, 90, 0.12);
}

.wallet-income-editor-label {
  font-size: 13px;
  font-weight: 700;
  color: #6f6252;
}

.wallet-income-editor-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.wallet-income-editor-footer--simple {
  justify-content: flex-end;
}

.wallet-cards-stack {
  position: relative;
  overflow: visible;
  height: 308px;
  padding: 8px 14px 0;
  margin-bottom: 18px;
}

.wallet-cards-stack::before {
  content: '';
  position: absolute;
  inset: 28px 14px 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 28%, rgba(171, 207, 254, 0.42), transparent 42%),
    radial-gradient(circle at 78% 74%, rgba(178, 186, 252, 0.34), transparent 40%);
  filter: blur(34px);
  opacity: 1;
  pointer-events: none;
}

.wallet-card {
  border-radius: 34px !important;
}

.wallet-card.wallet-card-back-2 {
  top: 0;
  left: 50%;
  width: calc(100% - 32px);
  height: 216px;
  margin-left: calc(-50% + 16px);
  transform: rotate(-6deg) scale(0.96);
  transform-origin: center;
  background: linear-gradient(180deg, #eaf4ff 0%, #d2e4f8 100%) !important;
  box-shadow: 0 18px 34px rgba(111, 145, 186, 0.12) !important;
  opacity: 0.92;
}

.wallet-card.wallet-card-back-1 {
  top: 14px;
  left: 50%;
  width: calc(100% - 32px);
  height: 216px;
  margin-left: calc(-50% + 16px);
  transform: rotate(4deg) scale(0.98);
  transform-origin: center;
  background: linear-gradient(180deg, #edf5ff 0%, #d8e8f9 100%) !important;
  box-shadow: 0 20px 40px rgba(111, 145, 186, 0.14) !important;
}

.wallet-card.wallet-card-front {
  top: 28px;
  left: 0;
  width: 100%;
  height: 246px;
  padding: 0;
  display: block;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, #8db0d5 0%, #7398bf 38%, #5b80ab 72%, #486c97 100%) !important;
  border: 1px solid rgba(117, 146, 183, 0.95) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 26px 48px rgba(71, 103, 144, 0.24) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.wallet-card.wallet-card-front::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 40px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.wallet-card.wallet-card-front::after {
  content: '';
  position: absolute;
  top: -22px;
  right: -28px;
  width: 174px;
  height: 174px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  filter: blur(42px);
  pointer-events: none;
}

.wallet-balance-label {
  position: absolute;
  left: 34px;
  bottom: 88px;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.04em;
  font-size: 12px;
  margin: 0;
  z-index: 3;
}

.wallet-balance-amount {
  position: absolute;
  left: 34px;
  bottom: 42px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  text-shadow: 0 3px 12px rgba(16, 33, 56, 0.16);
  z-index: 3;
}

.wallet-cards-stack--image {
  position: relative;
  height: auto;
  aspect-ratio: 1284 / 846;
  margin: 0 18px 16px;
}

.wallet-cards-stack--image::before {
  content: '';
  position: absolute;
  inset: -12px -10px -20px;
  background:
    radial-gradient(circle at 22% 28%, rgba(194, 224, 255, 0.22) 0%, transparent 46%),
    radial-gradient(circle at 78% 72%, rgba(236, 208, 255, 0.2) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(113, 135, 164, 0.18) 0%, transparent 58%);
  filter: blur(26px);
  pointer-events: none;
  animation: walletGlowBreath 6.8s ease-in-out infinite;
}

.wallet-cards-stack--image .wallet-card {
  position: absolute;
  border-radius: 28px !important;
}

.wallet-card-back-2--image {
  inset: -12px 20px auto 22px !important;
  height: 186px !important;
  background: linear-gradient(180deg, rgba(239, 245, 252, 0.96), rgba(224, 234, 245, 0.9)) !important;
  box-shadow: 0 10px 22px rgba(154, 176, 201, 0.12) !important;
  transform: rotate(-4deg) scale(0.96) !important;
  animation: walletBackCardDriftA 5.8s ease-in-out infinite alternate;
}

.wallet-card-back-1--image {
  inset: -3px 14px auto 16px !important;
  height: 190px !important;
  background: linear-gradient(180deg, rgba(245, 248, 253, 0.98), rgba(233, 240, 248, 0.94)) !important;
  box-shadow: 0 12px 26px rgba(154, 176, 201, 0.14) !important;
  transform: rotate(3deg) scale(0.985) !important;
  animation: walletBackCardDriftB 6.4s ease-in-out infinite alternate;
}

.wallet-card.wallet-card-front.wallet-card-front--image {
  inset: 0 !important;
  overflow: hidden;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow:
    0 10px 18px rgba(143, 160, 184, 0.16),
    0 26px 40px rgba(122, 140, 166, 0.18),
    0 34px 54px rgba(101, 118, 145, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  animation: walletFrontCardFloat 5.8s ease-in-out infinite;
}

.wallet-card.wallet-card-front.wallet-card-front--image::before,
.wallet-card.wallet-card-front.wallet-card-front--image::after {
  content: none !important;
  display: none !important;
}

.wallet-card.wallet-card-front.wallet-card-front--image::before {
  content: none !important;
  display: none !important;
}

.wallet-card.wallet-card-front.wallet-card-front--image::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -8px;
  height: 18px;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(112, 129, 155, 0.18), rgba(112, 129, 155, 0.02));
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.wallet-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: block;
  z-index: 1;
}

.wallet-card-balance--image {
  position: absolute;
  left: 34px;
  bottom: 32px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wallet-card-front--image .wallet-balance-label {
  position: static;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.wallet-card-front--image .wallet-balance-amount {
  position: static;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-shadow: 0 6px 20px rgba(82, 85, 116, 0.18);
}

.wallet-filters {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 5px;
  margin: 36px 28px 18px;
  padding: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.78), 0 16px 32px rgba(61, 97, 138, 0.08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.wallet-filter-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(183, 196, 255, 0.82), rgba(166, 198, 255, 0.72) 45%, rgba(210, 215, 255, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    inset 0 -1px 0 rgba(110, 134, 190, 0.08),
    0 10px 24px rgba(130, 151, 216, 0.24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: none;
  z-index: 0;
  transition:
    transform 520ms cubic-bezier(0.16, 0.88, 0.2, 1),
    width 520ms cubic-bezier(0.16, 0.88, 0.2, 1),
    box-shadow 320ms ease,
    background 320ms ease;
  will-change: transform, width;
}

.wallet-filter-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #64717d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    transform 180ms ease,
    background 220ms ease,
    color 180ms ease,
    box-shadow 220ms ease,
    border-color 180ms ease;
}

.wallet-filter-btn.active {
  color: #1f466d;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.wallet-filter-btn:hover:not(.active) {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.28);
  color: #31557d;
}

.wallet-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.wallet-feature-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  min-height: 132px;
  padding: 18px 16px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(240, 244, 247, 0.88));
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.74), 0 14px 28px rgba(61, 97, 138, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.wallet-feature-entry + .wallet-feature-entry {
  margin-top: 0;
}

.wallet-feature-icon-shell {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 10px 18px rgba(61, 97, 138, 0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.wallet-feature-icon-shell-swap {
  background: linear-gradient(145deg, rgba(171, 207, 254, 0.44), rgba(212, 228, 250, 0.74));
  color: #31557d;
}

.wallet-feature-icon-shell-income {
  background: linear-gradient(145deg, rgba(178, 186, 252, 0.36), rgba(212, 228, 250, 0.78));
  color: #525b96;
}

.wallet-feature-symbol {
  font-size: 26px;
}

.wallet-feature-entry-label {
  font-size: 14px;
  font-weight: 800;
  color: #243648;
  letter-spacing: 0.02em;
}

.wallet-feature-entry-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wallet-feature-entry-subtitle {
  font-size: 11px;
  line-height: 1.4;
  color: #7a8a98;
}

.wallet-ledger-subfilters {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0 0 4px;
  min-height: 34px;
}

.wallet-ledger-subfilters::-webkit-scrollbar {
  display: none;
}

.wallet-ledger-pill {
  position: absolute;
  top: 0;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(184, 198, 255, 0.84), rgba(166, 198, 255, 0.72) 46%, rgba(213, 219, 255, 0.82) 100%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(110, 134, 190, 0.06),
    0 8px 18px rgba(130, 151, 216, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
  z-index: 0;
  transition:
    transform 520ms cubic-bezier(0.16, 0.88, 0.2, 1),
    width 520ms cubic-bezier(0.16, 0.88, 0.2, 1),
    box-shadow 320ms ease,
    background 320ms ease;
  will-change: transform, width;
}

.wallet-ledger-subfilter {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: 0 6px;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #5f6e7b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    transform 180ms ease,
    background 220ms ease,
    color 180ms ease,
    box-shadow 220ms ease;
}

.wallet-ledger-subfilter.active {
  height: 34px;
  color: #1f466d;
  background: transparent;
  box-shadow: none;
  font-weight: 600;
}

.wallet-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  color: #5f707a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.wallet-section-count {
  color: #6aa0e3;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.wallet-transaction-item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.wallet-transaction-icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 24px rgba(61, 97, 138, 0.09);
  color: #31557d;
}

.wallet-transaction-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 19px;
  line-height: 1;
  font-weight: 400;
}

.wallet-transaction-info {
  min-width: 0;
}

.wallet-transaction-info h4 {
  margin: 0 0 4px;
  color: #202a35;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.wallet-transaction-info p {
  margin: 0;
  color: #98a4af;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0;
}

.wallet-transaction-amount {
  justify-self: end;
  color: #1d2631;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.wallet-transaction-icon--income {
  background: linear-gradient(145deg, rgba(218, 239, 236, 0.88), rgba(255, 255, 255, 0.78));
  color: #5f7d84;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 24px rgba(132, 152, 160, 0.09);
}

.wallet-transaction-icon--exchange {
  background: linear-gradient(145deg, rgba(178, 186, 252, 0.34), rgba(240, 244, 247, 0.86));
  color: #525b96;
}

.wallet-transaction-icon--outgoing {
  background: linear-gradient(145deg, rgba(250, 116, 111, 0.14), rgba(255, 255, 255, 0.9));
  color: #9a4d53;
}

.wallet-transaction-icon--incoming,
.wallet-transaction-icon--refund {
  background: linear-gradient(145deg, rgba(171, 207, 254, 0.28), rgba(255, 255, 255, 0.9));
  color: #3d618a;
}

.wallet-transaction-amount.positive {
  color: #5f7d84;
}

.wallet-refund-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(240, 244, 247, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.78), 0 14px 28px rgba(61, 97, 138, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.wallet-pending-transfer-card {
  overflow: hidden;
}

.wallet-refund-left {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wallet-transfer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 22px rgba(61, 97, 138, 0.1);
}

.wallet-transfer-avatar--incoming {
  background: linear-gradient(145deg, rgba(171, 207, 254, 0.42), rgba(212, 228, 250, 0.86));
  color: #31557d;
}

.wallet-transfer-avatar--outgoing {
  background: linear-gradient(145deg, rgba(178, 186, 252, 0.34), rgba(240, 244, 247, 0.84));
  color: #525b96;
}

.wallet-transfer-symbol {
  font-size: 22px;
}

.wallet-pending-transfer-copy strong {
  display: block;
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.1;
  color: #1f2f3f;
}

.wallet-pending-transfer-copy span {
  display: block;
  margin: 0;
  color: #4e5d6f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.wallet-pending-transfer-copy em {
  display: block;
  color: #7a878f;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
}

.wallet-refund-progress,
.wallet-refund-progress-bar {
  display: none;
}

.wallet-pending-transfer-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  flex-shrink: 0;
  justify-self: end;
  width: auto;
  white-space: nowrap;
}

.wallet-transfer-status {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.wallet-transfer-status--incoming {
  background: rgba(171, 207, 254, 0.28);
  color: #31557d;
}

.wallet-transfer-status--outgoing {
  background: rgba(178, 186, 252, 0.24);
  color: #525b96;
}

.wallet-refund-btn {
  min-width: 64px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.56);
  color: #31557d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px rgba(61, 97, 138, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 220ms ease,
    color 180ms ease;
}

.wallet-refund-btn:hover {
  background: rgba(255, 255, 255, 0.72);
}

.wallet-inline-action-card,
.wallet-inline-action-btn,
.wallet-sheet-submit,
.wallet-sheet-secondary,
.wallet-exchange-balance-card,
.wallet-exchange-preview {
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    color 180ms ease;
}

.wallet-filter-btn:active,
.wallet-ledger-subfilter:active,
.wallet-inline-action-btn:active,
.wallet-refund-btn:active,
.wallet-sheet-submit:active,
.wallet-sheet-secondary:active {
  transform: scale(0.985);
}

.wallet-feature-entry:hover,
.wallet-inline-action-card:hover,
.wallet-refund-card:hover,
.wallet-exchange-balance-card:hover,
.wallet-exchange-preview:hover {
  transform: translateY(-2px);
}

.wallet-transaction-item:hover {
  transform: translateX(2px);
}

.wallet-feature-entry:hover {
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.82), 0 18px 30px rgba(61, 97, 138, 0.12);
}

.wallet-inline-action-card:hover,
.wallet-refund-card:hover,
.wallet-exchange-balance-card:hover,
.wallet-exchange-preview:hover {
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.82), 0 18px 32px rgba(61, 97, 138, 0.12);
}

.wallet-motion-enter {
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

.wallet-page-transition {
  animation: walletPageContentFade 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#wallet-page.wallet-force-motion .wallet-page-transition {
  animation: walletPageContentFade 260ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.wallet-motion-enter[data-wallet-motion="1"] {
  animation: walletFadeRise 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--wallet-motion-delay, 0ms);
}

#wallet-page.wallet-force-motion .wallet-motion-enter[data-wallet-motion="1"] {
  animation: walletFadeRise 560ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: var(--wallet-motion-delay, 0ms) !important;
}

.wallet-motion-enter--hero[data-wallet-motion="1"] {
  animation-name: walletFadeHero;
  animation-duration: 720ms;
}

#wallet-page.wallet-force-motion .wallet-motion-enter--hero[data-wallet-motion="1"] {
  animation-name: walletFadeHero !important;
  animation-duration: 720ms !important;
}

.wallet-motion-enter--soft[data-wallet-motion="1"] {
  animation-duration: 560ms;
}

#wallet-page.wallet-force-motion .wallet-motion-enter--soft[data-wallet-motion="1"] {
  animation-duration: 560ms !important;
}

.wallet-motion-enter--micro[data-wallet-motion="1"] {
  animation-duration: 420ms;
}

#wallet-page.wallet-force-motion .wallet-motion-enter--micro[data-wallet-motion="1"] {
  animation-duration: 420ms !important;
}

.wallet-motion-enter--list[data-wallet-motion="1"] {
  animation-duration: 500ms;
}

.wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter[data-wallet-motion="1"] {
  animation: walletFadeRise 560ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: var(--wallet-motion-delay, 0ms) !important;
}

.wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter--hero[data-wallet-motion="1"] {
  animation-name: walletFadeHero !important;
  animation-duration: 720ms !important;
}

.wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter--soft[data-wallet-motion="1"] {
  animation-duration: 560ms !important;
}

.wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter--micro[data-wallet-motion="1"] {
  animation-duration: 420ms !important;
}

.wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter--list[data-wallet-motion="1"] {
  animation-duration: 500ms !important;
}

#wallet-page.wallet-force-motion .wallet-motion-enter--list[data-wallet-motion="1"] {
  animation-duration: 500ms !important;
}

.wallet-motion-enter.wallet-motion-live {
  animation: none;
}

.wallet-motion-enter--hero.wallet-motion-live {
  animation: none;
}

.wallet-motion-enter--soft.wallet-motion-live {
  animation: none;
}

.wallet-motion-enter--micro.wallet-motion-live {
  animation: none;
}

.wallet-motion-enter--list.wallet-motion-live {
  animation: none;
}

#wallet-page.wallet-force-motion .wallet-cards-stack--image::before {
  animation: walletGlowBreath 6.8s ease-in-out infinite !important;
}

#wallet-page.wallet-force-motion .wallet-card-back-2--image {
  animation: walletBackCardDriftA 5.8s ease-in-out infinite alternate !important;
}

#wallet-page.wallet-force-motion .wallet-card-back-1--image {
  animation: walletBackCardDriftB 6.4s ease-in-out infinite alternate !important;
}

#wallet-page.wallet-force-motion .wallet-card.wallet-card-front.wallet-card-front--image {
  animation: walletFrontCardFloat 5.8s ease-in-out infinite !important;
}

@keyframes walletFadeRise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.986);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes walletFadeHero {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.982);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes walletPageContentFade {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes walletGlowBreath {
  0%,
  100% {
    opacity: 0.86;
    transform: scale(0.985);
  }

  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes walletBackCardDriftA {
  0%,
  100% {
    transform: rotate(-4deg) scale(0.96) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-5.8deg) scale(0.972) translate3d(-2px, 6px, 0);
  }
}

@keyframes walletBackCardDriftB {
  0%,
  100% {
    transform: rotate(3deg) scale(0.985) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(4.8deg) scale(0.995) translate3d(2px, -5px, 0);
  }
}

@keyframes walletFrontCardFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -5px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-orb-a {
    animation: wallet-activation-orb-float-a 11.5s ease-in-out infinite !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-orb-b {
    animation: wallet-activation-orb-float-b 13s ease-in-out infinite !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-progress-dot.is-current {
    animation: wallet-activation-progress-pulse 1.9s ease-in-out infinite !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-pin-slot.is-latest {
    animation: wallet-activation-pin-slot-pop 220ms var(--wallet-activation-ease) both !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-pin-slot.is-latest .wallet-activation-pin-dot {
    animation: wallet-activation-pin-dot-in 220ms var(--wallet-activation-ease) both !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-success-icon {
    animation: wallet-activation-success-bloom 560ms var(--wallet-activation-ease) both !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-nav-btn,
  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-primary-btn,
  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-secondary-btn,
  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-keypad-btn,
  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-pin-slot,
  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-pin-dot {
    transition: initial !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-nav-btn {
    transition:
      transform 140ms var(--wallet-activation-ease-soft),
      box-shadow 240ms var(--wallet-activation-ease),
      background-color 240ms var(--wallet-activation-ease),
      color 220ms var(--wallet-activation-ease-soft) !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-primary-btn,
  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-secondary-btn {
    transition:
      transform 140ms var(--wallet-activation-ease-soft),
      box-shadow 260ms var(--wallet-activation-ease),
      background-color 260ms var(--wallet-activation-ease),
      color 220ms var(--wallet-activation-ease-soft),
      opacity 220ms var(--wallet-activation-ease-soft) !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-keypad-btn {
    transition:
      transform 130ms var(--wallet-activation-ease-soft),
      box-shadow 220ms var(--wallet-activation-ease),
      background-color 220ms var(--wallet-activation-ease),
      color 220ms var(--wallet-activation-ease-soft) !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-pin-slot {
    transition:
      border-color 0.18s var(--wallet-activation-ease-soft),
      transform 0.18s var(--wallet-activation-ease-soft),
      background-color 0.18s var(--wallet-activation-ease-soft),
      box-shadow 0.22s var(--wallet-activation-ease-soft) !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-pin-dot {
    transition:
      opacity 0.18s var(--wallet-activation-ease-soft),
      transform 0.18s var(--wallet-activation-ease-soft) !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-nav-btn::after,
  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-primary-btn::after,
  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-activation-keypad-btn::after {
    display: block !important;
  }

  .wallet-motion-enter {
    opacity: 1 !important;
    animation: none !important;
  }

  .wallet-page-transition {
    animation: none !important;
  }

  .wallet-cards-stack--image::before,
  .wallet-card-back-2--image,
  .wallet-card-back-1--image,
  .wallet-card.wallet-card-front.wallet-card-front--image {
    animation: none !important;
  }

  .wallet-filter-btn,
  .wallet-ledger-subfilter,
  .wallet-feature-entry,
  .wallet-inline-action-card,
  .wallet-inline-action-btn,
  .wallet-transaction-item,
  .wallet-refund-card,
  .wallet-refund-btn,
  .wallet-sheet-submit,
  .wallet-sheet-secondary,
  .wallet-exchange-balance-card,
  .wallet-exchange-preview {
    transition: none !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter[data-wallet-motion="1"] {
    animation: walletFadeRise 560ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    animation-delay: var(--wallet-motion-delay, 0ms) !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter--hero[data-wallet-motion="1"] {
    animation-name: walletFadeHero !important;
    animation-duration: 720ms !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter--soft[data-wallet-motion="1"] {
    animation-duration: 560ms !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter--micro[data-wallet-motion="1"] {
    animation-duration: 420ms !important;
  }

  .wallet-sheet-backdrop--activation.wallet-force-motion .wallet-motion-enter--list[data-wallet-motion="1"] {
    animation-duration: 500ms !important;
  }

  #wallet-page.wallet-force-motion .wallet-motion-enter[data-wallet-motion="1"] {
    animation: walletFadeRise 560ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
    animation-delay: var(--wallet-motion-delay, 0ms) !important;
  }

  #wallet-page.wallet-force-motion .wallet-motion-enter--hero[data-wallet-motion="1"] {
    animation-name: walletFadeHero !important;
    animation-duration: 720ms !important;
  }

  #wallet-page.wallet-force-motion .wallet-motion-enter--soft[data-wallet-motion="1"] {
    animation-duration: 560ms !important;
  }

  #wallet-page.wallet-force-motion .wallet-motion-enter--micro[data-wallet-motion="1"] {
    animation-duration: 420ms !important;
  }

  #wallet-page.wallet-force-motion .wallet-motion-enter--list[data-wallet-motion="1"] {
    animation-duration: 500ms !important;
  }

  #wallet-page.wallet-force-motion .wallet-page-transition {
    animation: walletPageContentFade 260ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  #wallet-page.wallet-force-motion .wallet-cards-stack--image::before {
    animation: walletGlowBreath 6.8s ease-in-out infinite !important;
  }

  #wallet-page.wallet-force-motion .wallet-card-back-2--image {
    animation: walletBackCardDriftA 5.8s ease-in-out infinite alternate !important;
  }

  #wallet-page.wallet-force-motion .wallet-card-back-1--image {
    animation: walletBackCardDriftB 6.4s ease-in-out infinite alternate !important;
  }

  #wallet-page.wallet-force-motion .wallet-card.wallet-card-front.wallet-card-front--image {
    animation: walletFrontCardFloat 5.8s ease-in-out infinite !important;
  }
}

@media (max-width: 480px) {
  .wallet-exchange-balance-grid,
  .wallet-exchange-preview-summary {
    grid-template-columns: 1fr;
  }

  .wallet-exchange-preview-flow {
    grid-template-columns: 1fr;
  }

  .wallet-exchange-preview-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .wallet-exchange-input-row,
  .wallet-exchange-success-actions {
    flex-direction: column;
  }

  .wallet-exchange-inline-success {
    align-items: flex-start;
    flex-direction: column;
  }

  .wallet-exchange-max-btn {
    width: 100%;
  }

  .wallet-exchange-submit {
    min-height: 54px;
    border-radius: 17px;
    font-size: 15px;
  }

  .wallet-sheet-grid {
    grid-template-columns: 1fr;
  }

  .wallet-dev-context-grid {
    grid-template-columns: 1fr;
  }

  .wallet-inline-action-card {
    flex-direction: column;
    align-items: stretch;
  }

  .wallet-income-surface-head,
  .wallet-income-slip-top,
  .wallet-income-slip-actions,
  .wallet-income-editor-footer,
  .wallet-income-editor-receipt-head {
    flex-direction: column;
  }

  .wallet-income-summary-grid,
  .wallet-income-slip-grid,
  .wallet-income-editor-schedule-grid,
  .wallet-income-editor-receipt-grid,
  .wallet-income-editor-inline {
    grid-template-columns: 1fr;
  }

  .wallet-income-primary-btn--top {
    width: 100%;
  }

  .wallet-sheet {
    padding: 18px 14px 14px;
    border-radius: 24px;
  }

  .wallet-feature-entry {
    min-height: 120px;
  }

  .wallet-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wallet-pending-transfer-side {
    align-items: center;
    justify-content: flex-end;
    width: auto;
    justify-self: end;
  }

  .wallet-refund-left {
    grid-template-columns: 44px minmax(0, 1fr);
  }
}
/**
 * ============================================================
 *  wallet_animation.css — Wallet 进入动画样式（简化版）
 * ============================================================
 *  配合Web Animations API使用，只提供基础样式
 * ============================================================
 */

/* ——————————————————————————————————————————————
 *  3D透视效果容器
 * —————————————————————————————————————————————— */

.wallet-cards-stack {
  perspective: 1200px;
  perspective-origin: center center;
  transform-style: preserve-3d;
}

.wallet-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: transform 50ms ease-out, filter 50ms ease-out;
}

/* ——————————————————————————————————————————————
 *  余额数字样式
 * —————————————————————————————————————————————— */

.wallet-balance-amount {
  position: relative;
  display: inline-block;
  transition: transform 50ms ease-out, filter 50ms ease-out;
}

/* ——————————————————————————————————————————————
 *  性能优化
 * —————————————————————————————————————————————— */

.wallet-card,
.wallet-balance-amount,
.wallet-filters,
.wallet-section-title,
.wallet-transaction-item,
.wallet-refund-card,
.wallet-bottom-bar {
  /* 使用GPU加速 */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
/**
 * ============================================================
 *  settings.css — iOS 原生风格设置界面
 * ============================================================
 */

.settings-sprite-host {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.settings-app-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #000;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.96), transparent 32%),
    radial-gradient(circle at 100% 10%, rgba(255, 255, 255, 0.58), transparent 28%),
    linear-gradient(180deg, #f5f4fa 0%, #efeff7 58%, #ececf4 100%);
  font-family:
    'SF Pro Text',
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'PingFang SC',
    'Helvetica Neue',
    sans-serif;
}

.settings-stack {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.settings-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
}

.settings-screen--root {
  transform: translate3d(0, 0, 0);
}

.settings-app-root.is-animating-route .settings-screen {
  transition:
    transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 360ms cubic-bezier(0.32, 0.72, 0, 1);
}

.settings-app-root[data-route='wallpaper'] .settings-screen--root {
  transform: translate3d(-31%, 0, 0);
  opacity: 0.96;
  pointer-events: none;
}

.settings-app-root[data-route='wallpaper'] .settings-screen--wallpaper {
  transform: translate3d(0, 0, 0);
}

.settings-app-root[data-route='root'] .settings-screen--wallpaper {
  transform: translate3d(100%, 0, 0);
}

.settings-navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: var(--safe-area-top);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  background: linear-gradient(180deg, rgba(245, 245, 250, 0.92), rgba(245, 245, 250, 0.74));
}

.settings-navbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5px;
  background: rgba(60, 60, 67, 0.1);
}

.settings-navbar__inner {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  position: relative;
}

.settings-navbar__inner--root {
  padding-left: 18px;
}

.settings-navbar__inner--detail {
  padding-left: 16px;
}

.settings-navbar__title {
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: #000;
}

.settings-navbar__close {
  position: absolute;
  left: 10px;
  top: 0;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: #0a84ff;
  appearance: none;
  -webkit-appearance: none;
}

.settings-navbar__close-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.settings-back-button {
  position: absolute;
  left: 16px;
  top: 4px;
  width: 36px;
  height: 36px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
}

.settings-back-button svg {
  width: 100%;
  height: 100%;
  display: block;
}

.settings-screen__scroll {
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(var(--safe-area-top) + 56px);
  scrollbar-width: none;
}

.settings-screen__scroll::-webkit-scrollbar {
  display: none;
}

.settings-screen__content {
  padding: 14px 16px calc(28px + var(--safe-area-bottom));
}

.settings-screen__content--wallpaper {
  padding-top: 18px;
}

.settings-screen__bottom-spacer {
  height: 28px;
}

.settings-account-card,
.settings-card-group,
.settings-wallpaper-card {
  width: 100%;
  border: 0;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86) inset,
    0 22px 44px rgba(58, 54, 85, 0.04);
}

.settings-account-card,
.settings-row--button,
.settings-back-button {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.settings-account-card {
  display: block;
  margin-bottom: 20px;
  padding: 0;
  text-align: left;
  overflow: hidden;
}

.settings-account-card__main {
  min-height: 108px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 18px 20px;
}

.settings-account-card__avatar-button,
.settings-account-card__name-button {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.settings-account-card__avatar-button {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.settings-account-card__avatar {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
}

.settings-account-card__avatar.has-image {
  overflow: hidden;
  border-radius: 50%;
  background: #eef0f7;
}

.settings-account-card__avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.settings-account-card__avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.settings-account-card__copy {
  flex: 1;
  min-width: 0;
}

.settings-account-card__name-button {
  display: block;
  width: 100%;
  text-align: left;
}

.settings-account-card__name {
  font-size: 17px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #000;
}

.settings-account-card__meta {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.22;
  color: #7d7d86;
  letter-spacing: -0.02em;
}

.settings-account-card__file-input {
  display: none;
}

.settings-card-group {
  overflow: hidden;
  margin-bottom: 18px;
}

.settings-row {
  position: relative;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 13px;
  background: transparent;
}

.settings-row + .settings-row::before {
  content: '';
  position: absolute;
  left: 72px;
  right: 0;
  top: 0;
  height: 0.5px;
  background: rgba(60, 60, 67, 0.16);
}

.settings-row--button {
  width: 100%;
  border: 0;
  padding-right: 11px;
}

.settings-row__leading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.settings-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-row__icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
}

.settings-row__icon svg,
.settings-row__chevron svg,
.settings-wallpaper-guide__art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.settings-row__label {
  min-width: 0;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.024em;
  color: #000;
}

.settings-row__chevron {
  width: 12px;
  height: 20px;
  margin-left: 12px;
  color: #c7c7cc;
  flex: 0 0 12px;
}

.settings-row__chevron svg {
  fill: currentColor;
}

.settings-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 31px;
  flex: 0 0 51px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.settings-switch__input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}

.settings-switch__track {
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: #d1d1d6;
  box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1);
  transition: background 220ms ease;
}

.settings-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 0.5px 2px rgba(0, 0, 0, 0.08);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.settings-switch__input:checked + .settings-switch__track {
  background: #34c759;
}

.settings-switch__input:checked + .settings-switch__track::after {
  transform: translateX(20px);
}

.settings-pressable,
.settings-row--button {
  transition: background-color 150ms ease, transform 160ms ease;
}

.settings-pressable.is-pressed,
.settings-row--button:active,
.settings-account-card:active,
.settings-back-button:active,
.settings-navbar__close:active {
  background-color: rgba(233, 233, 239, 0.96);
}

.settings-account-card.is-pressed .settings-account-card__main,
.settings-back-button.is-pressed {
  transform: translateY(0.2px);
}

.settings-screen--wallpaper {
  z-index: 5;
  box-shadow: -16px 0 34px rgba(0, 0, 0, 0.08);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.96), transparent 30%),
    linear-gradient(180deg, #f5f4fa 0%, #efeff7 60%, #ececf4 100%);
}

.settings-wallpaper-card {
  overflow: hidden;
}

.settings-wallpaper-card--hero {
  padding: 26px 14px 22px;
}

.settings-wallpaper-card--guide {
  margin-top: 20px;
  padding: 22px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(242, 241, 247, 0.98);
}

.settings-wallpaper-card__title {
  text-align: center;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: #8e8e93;
  letter-spacing: -0.02em;
}

.settings-wallpaper-upload {
  width: 100%;
  margin-top: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.settings-wallpaper-upload__preview {
  position: relative;
  display: block;
  width: 100%;
  min-height: 368px;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(180deg, #f5f6fb 0%, #eceef6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.settings-wallpaper-upload__preview.is-default {
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.46) 18%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 84% 16%, rgba(250, 233, 220, 0.74) 0%, rgba(247, 218, 199, 0.34) 16%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #edf1f9 0%, #d7e0ef 40%, #bfd0e4 75%, #a8bfd8 100%);
}

.settings-wallpaper-upload__default,
.settings-wallpaper-upload__default::before,
.settings-wallpaper-upload__default::after {
  position: absolute;
  content: '';
  display: block;
}

.settings-wallpaper-upload__default {
  inset: 0;
}

.settings-wallpaper-upload__default::before {
  width: 198px;
  height: 198px;
  left: -28px;
  bottom: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, rgba(206, 224, 250, 0.92) 0%, rgba(186, 206, 233, 0.78) 46%, rgba(186, 206, 233, 0) 78%);
}

.settings-wallpaper-upload__default::after {
  width: 220px;
  height: 220px;
  right: -42px;
  top: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 52% 50%, rgba(198, 214, 236, 0.96) 0%, rgba(178, 198, 224, 0.8) 42%, rgba(178, 198, 224, 0) 76%);
}

.settings-wallpaper-upload__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.settings-wallpaper-upload__plus {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  margin-top: -29px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2e93ff 0%, #0a7dff 100%);
  box-shadow: 0 12px 24px rgba(16, 110, 246, 0.24);
  color: #fff;
  font-size: 38px;
  line-height: 1;
  font-weight: 300;
}

.settings-wallpaper-upload__copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 8px 2px;
}

.settings-wallpaper-upload__headline {
  font-size: 17px;
  line-height: 1.18;
  font-weight: 600;
  color: #000;
  letter-spacing: -0.026em;
}

.settings-wallpaper-upload__meta {
  font-size: 15px;
  line-height: 1.45;
  color: #7f7f86;
  letter-spacing: -0.02em;
}

.settings-wallpaper-library {
  margin-top: 20px;
}

.settings-wallpaper-library__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
}

.settings-wallpaper-library__title {
  font-size: 16px;
  line-height: 1.18;
  font-weight: 600;
  color: #1c1c1e;
  letter-spacing: -0.024em;
}

.settings-wallpaper-library__reset {
  border: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(239, 239, 244, 0.96);
  color: #0a84ff;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
}

.settings-wallpaper-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 156px;
  gap: 14px;
  margin-top: 16px;
  padding: 4px 8px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.settings-wallpaper-strip::-webkit-scrollbar {
  display: none;
}

.settings-wallpaper-strip__card {
  position: relative;
  scroll-snap-align: start;
}

.settings-wallpaper-strip__action {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.settings-wallpaper-strip__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 0.61;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.46) 18%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #edf1f9 0%, #d7e0ef 40%, #bfd0e4 75%, #a8bfd8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 26px rgba(51, 52, 74, 0.08);
}

.settings-wallpaper-strip__card.is-current .settings-wallpaper-strip__frame {
  box-shadow:
    inset 0 0 0 2px rgba(10, 132, 255, 0.92),
    0 18px 30px rgba(17, 64, 173, 0.16);
}

.settings-wallpaper-strip__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.settings-wallpaper-strip__label {
  display: block;
  margin-top: 10px;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1.3;
  color: #6f6f77;
  letter-spacing: -0.018em;
}

.settings-wallpaper-strip__card.is-current .settings-wallpaper-strip__label {
  color: #0a84ff;
  font-weight: 600;
}

.settings-wallpaper-strip__delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 22, 24, 0.46);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.settings-wallpaper-empty {
  margin-top: 16px;
  min-height: 174px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(243, 243, 248, 0.96) 0%, rgba(236, 237, 243, 0.98) 100%);
}

.settings-wallpaper-empty__title {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  color: #1c1c1e;
}

.settings-wallpaper-empty__text {
  margin-top: 8px;
  max-width: 240px;
  font-size: 14px;
  line-height: 1.5;
  color: #7f7f86;
}

.settings-wallpaper-dots {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin-top: 20px;
}

.settings-wallpaper-dots__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(205, 205, 210, 0.9);
  appearance: none;
  -webkit-appearance: none;
}

.settings-wallpaper-dots__dot.is-active {
  background: #000;
}

.settings-wallpaper-guide__copy {
  flex: 1;
  min-width: 0;
}

.settings-wallpaper-guide__title {
  font-size: 17px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: #000;
}

.settings-wallpaper-guide__text {
  margin-top: 10px;
  max-width: 210px;
  font-size: 15px;
  line-height: 1.52;
  letter-spacing: -0.02em;
  color: #7f7f86;
}

.settings-wallpaper-guide__art {
  width: 96px;
  height: 132px;
  flex: 0 0 96px;
}

.settings-wallpaper-error {
  margin-top: 16px;
  padding: 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #ff3b30;
  letter-spacing: -0.018em;
}

@media (max-width: 390px) {
  .settings-screen__content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .settings-account-card__main {
    padding-left: 18px;
    padding-right: 16px;
  }

  .settings-row {
    min-height: 60px;
    padding-left: 12px;
  }

  .settings-row + .settings-row::before {
    left: 70px;
  }

  .settings-row__leading {
    gap: 13px;
  }

  .settings-row__label,
  .settings-account-card__meta,
  .settings-wallpaper-guide__text {
    font-size: 15px;
  }

  .settings-wallpaper-upload__preview {
    min-height: 340px;
  }

  .settings-wallpaper-strip {
    grid-auto-columns: 148px;
  }
}
/**
 * ============================================================
 *  voice_settings.css — 音色设定卡片样式
 * ============================================================
 */

/* 音色设定行 */
.voice-setting-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid #F0F0F0;
}

.voice-setting-row:last-of-type {
  border-bottom: none;
}

.voice-setting-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.voice-setting-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  font-size: 15px;
  color: #000;
  background: #F5F5F7;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}

.voice-setting-input:focus {
  border-color: #007AFF;
  background: #FFFFFF;
}

.voice-setting-input::placeholder {
  color: #C7C7CC;
}

.voice-advanced-settings .voice-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "slider slider"
    "bounds bounds";
  column-gap: 12px;
  row-gap: 6px;
  padding: 8px 0;
}

.voice-advanced-settings .voice-setting-label {
  grid-area: label;
  margin: 0;
}

.voice-advanced-settings .voice-slider-container {
  display: contents;
}

/* 滑块容器 */
.voice-slider-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.voice-slider-value {
  grid-area: value;
  justify-self: end;
  align-self: end;
  font-size: 13px;
  font-weight: 700;
  color: #007AFF;
  line-height: 1;
  white-space: nowrap;
}

.voice-slider {
  grid-area: slider;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: #E0E0E0;
  outline: none;
}

.voice-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #007AFF;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s;
}

.voice-slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
}

.voice-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #007AFF;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s;
}

.voice-slider::-moz-range-thumb:active {
  transform: scale(1.2);
}

.voice-slider-labels {
  grid-area: bounds;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #999;
  line-height: 1;
}

/* 试听按钮 */
.voice-preview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  min-width: 132px;
  max-width: 100%;
  padding: 10px 14px;
  margin-top: 8px;
  margin-left: auto;
  background: #F3F7FF;
  color: #007AFF;
  border: 1px solid rgba(0, 122, 255, 0.14);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.voice-preview-btn:active {
  background: #E6F0FF;
  border-color: rgba(0, 122, 255, 0.2);
  transform: scale(0.98);
}

.voice-preview-btn .material-icons-round {
  font-size: 18px;
}

.voice-preview-note {
  display: none;
}

/* 高级设置展开按钮 */
.voice-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  margin-top: 4px;
  background: transparent;
  border: none;
  border-top: 1px solid #F0F0F0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
}

.voice-advanced-toggle:active {
  opacity: 0.6;
}

.voice-advanced-toggle-text {
  font-size: 14px;
  font-weight: 600;
  color: #007AFF;
}

.voice-advanced-toggle-copy {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.voice-advanced-toggle-summary {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #8E8E93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-advanced-toggle-icon {
  font-size: 18px;
  color: #007AFF;
  transition: transform 0.3s ease;
}

.voice-advanced-toggle.expanded .voice-advanced-toggle-summary {
  color: #9CA3AF;
}

.voice-advanced-toggle.expanded .voice-advanced-toggle-icon {
  transform: rotate(180deg);
}

/* 高级设置容器 */
.voice-advanced-settings {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.voice-advanced-settings.expanded {
  max-height: 500px;
  opacity: 1;
}
/**
 * worldbook_app.css
 * 世界书 App - Journal/Note Fusion 重构版
 */

#app-worldbook {
  width: 100%;
  height: 100%;
}

.worldbook-app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #F5F5F2;
  color: #1e1f24;
  font-family: 'Inter', 'Noto Serif SC', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.worldbook-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--header-total-height);
  padding: calc(var(--safe-area-top) + 8px) var(--spacing-md) 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: color-mix(in srgb, #F5F5F2 82%, #fff 18%);
  border-bottom: 1px solid rgba(30, 31, 36, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.worldbook-back-btn,
.worldbook-header-action {
  border: none;
  background: transparent;
  color: #2a2a32;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  min-height: 30px;
  -webkit-tap-highlight-color: transparent;
}

.worldbook-back-btn {
  justify-self: start;
}

.worldbook-header-actions {
  justify-self: end;
  display: inline-flex;
  gap: 12px;
}

.worldbook-header-title {
  justify-self: center;
  margin: 0;
  font-family: 'Lora', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1f2129;
}

.worldbook-header-title-editor {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.worldbook-content {
  height: calc(100% - var(--header-total-height));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px var(--spacing-md) calc(20px + var(--safe-area-bottom));
  overflow-anchor: none;
}

.worldbook-scope-segment {
  margin-bottom: 14px;
  height: 40px;
}

.segmented-control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 填满容器宽度 */
  width: 100%; /* 确保占据父容器全部宽度 */
  height: 40px;
  padding: 0; /* 移除内边距，让按钮紧贴边缘 */
  background: #EBEAE4;
  border-radius: 999px;
  overflow: hidden; /* 防止子元素溢出圆角 */
}

/* 调整按钮样式以适应填满布局 */
.segmented-control button {
  flex: 1; /* 平均分配空间 */
  min-width: 0; /* 允许按钮缩小以适应容器 */
  border: none;
  border-radius: 0; /* 移除单个按钮的圆角 */
  margin: 0; /* 移除默认外边距 */
}

/* 为第一个和最后一个按钮添加圆角，模拟整体圆角效果 */
.segmented-control button:first-child {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.segmented-control button:last-child {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.segmented-control button {
  position: relative;
  border: 0;
  border-radius: 999px;
  background: transparent;
  min-width: 68px;
  height: 100%;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(58, 61, 73, 0.72);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.segmented-control button.is-active {
  color: #2513ec;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 16, 25, 0.1);
}

/* Harmonize segmented controls: reduce visual fighting between options */
.segmented-control {
  width: 100%;
  padding: 2px;
  border: 1px solid rgba(31, 33, 41, 0.08);
  background: rgba(232, 231, 224, 0.88);
  gap: 2px;
}

.segmented-control button {
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  padding: 0 14px;
  font-weight: 600;
  color: rgba(58, 61, 73, 0.78);
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.segmented-control button.is-active {
  color: #2d3342;
  box-shadow: 0 2px 6px rgba(15, 16, 25, 0.14);
}

.worldbook-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.worldbook-card-shell {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  touch-action: pan-y;
}

.worldbook-card-shell.is-swiping {
  cursor: grabbing;
}

.worldbook-card-shell.is-removing {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 200ms ease, transform 200ms ease;
}

.worldbook-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: none;
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  user-select: none;
}

.worldbook-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #E2E2E2;
  color: #4A4A4A;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.worldbook-card-main { min-width: 0; }

.worldbook-card-title {
  font-family: 'Lora', 'Noto Serif SC', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: #20212a;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldbook-card-desc,
.worldbook-card-meta {
  margin: 0;
  font-size: 12px;
  color: #767682;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldbook-card-meta {
  margin-top: 3px;
}

.worldbook-card-meta-soft {
  white-space: normal;
  line-height: 1.45;
}

.worldbook-book-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #ececf2;
  background: #fbfcff;
  margin-bottom: 12px;
}

.worldbook-book-summary-main {
  min-width: 0;
  flex: 1;
}

.worldbook-book-summary-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1f1f2a;
}

.worldbook-book-summary-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: #66667a;
  line-height: 1.45;
}

.worldbook-book-summary-meta {
  margin: 6px 0 0;
  font-size: 11px;
  color: #8f8fa3;
}

.worldbook-book-summary-edit {
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  background: #eef2ff;
  color: #434d9b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.worldbook-search-shell {
  position: sticky;
  top: -2px;
  z-index: 3;
  margin: 0 0 12px;
  padding: 6px 0 10px;
  background: linear-gradient(180deg, rgba(245, 245, 242, 0.96), rgba(245, 245, 242, 0.84) 78%, rgba(245, 245, 242, 0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.worldbook-search-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(31, 33, 41, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(28, 30, 38, 0.04);
}

.worldbook-search-bar:focus-within {
  border-color: rgba(37, 19, 236, 0.18);
  box-shadow: 0 10px 22px rgba(28, 30, 38, 0.08), 0 0 0 4px rgba(37, 19, 236, 0.06);
}

.worldbook-search-icon {
  color: rgba(82, 86, 98, 0.64);
  font-size: 16px;
}

.worldbook-search-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  color: #23242d;
  font-family: 'Inter', 'Noto Serif SC', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  padding: 0;
}

.worldbook-search-input::placeholder {
  color: #9e9eab;
}

.worldbook-search-meta {
  margin: 6px 2px 0;
  color: #8b8b98;
  font-size: 12px;
}

.worldbook-global-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #5b4a00;
  background: #FFF0A7;
}

.worldbook-local-badge {
  color: #0f4f2f;
  background: #d9f7e5;
}

.worldbook-card-swipe-action {
  position: absolute;
  right: 0;
  top: 0;
  width: 72px;
  height: 100%;
  background: #ff3b30;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.worldbook-swipe-delete {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.worldbook-swipe-delete:active {
  background: rgba(0, 0, 0, 0.08);
}

.worldbook-switch {
  --switch-w: 44px;
  --switch-h: 26px;
  position: relative;
  width: var(--switch-w);
  height: var(--switch-h);
  border: none;
  border-radius: 999px;
  background: #d1d1d6;
  transition: background-color 180ms ease;
  cursor: pointer;
  z-index: 1;
}

.worldbook-switch::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: calc(var(--switch-h) - 4px);
  height: calc(var(--switch-h) - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.worldbook-switch[aria-checked='true'] {
  background: #2513ec;
}

.worldbook-switch[aria-checked='true']::after {
  transform: translateX(18px);
}

.worldbook-switch-mini {
  --switch-w: 36px;
  --switch-h: 20px;
}

.worldbook-switch-mini[aria-checked='true']::after {
  transform: translateX(16px);
}

.worldbook-loading,
.worldbook-empty {
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  color: #7f7f86;
}

.worldbook-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(37, 19, 236, 0.2);
  border-top-color: #2513ec;
  animation: wb-spin 0.9s linear infinite;
}

@keyframes wb-spin {
  to { transform: rotate(360deg); }
}

.worldbook-editor-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.worldbook-editor-paper {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  padding: 18px 16px 10px;
}

.worldbook-book-editor-paper {
  padding-bottom: 16px;
}

.worldbook-editor-kicker {
  margin: 0 0 10px;
  color: #8d8a80;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.worldbook-editor-title {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  margin: 0 0 8px;
  padding: 0;
  font-family: 'Lora', 'Noto Serif SC', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: #1f2129;
}

.worldbook-editor-title::placeholder {
  color: #c5c2b9;
}

.worldbook-form-textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  min-height: 240px;
  max-height: none;
  background: transparent;
  color: #262731;
  font-family: 'Inter', 'Noto Serif SC', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 17px;
  line-height: 1.68;
  padding: 0;
}

.worldbook-editor-content-compact {
  min-height: 132px;
}

.worldbook-editor-subfields {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(31, 33, 41, 0.08);
}

.worldbook-editor-note {
  min-height: 78px;
  font-size: 15px;
  line-height: 1.62;
  margin-bottom: 12px;
}

.worldbook-editor-meta-paper {
  padding-top: 14px;
  padding-bottom: 12px;
}

.worldbook-editor-meta-paper .worldbook-editor-kicker {
  margin-bottom: 8px;
}

.worldbook-editor-subfields-compact {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.worldbook-editor-meta-paper .worldbook-editor-note {
  min-height: 62px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.worldbook-editor-meta-paper .worldbook-tag-block {
  margin-bottom: 0;
}

.worldbook-editor-meta-paper .worldbook-tag-list {
  min-height: 20px;
  margin-bottom: 6px;
  gap: 5px;
}

.worldbook-editor-meta-paper .worldbook-tag-item,
.worldbook-editor-meta-paper .worldbook-tag-empty-pill {
  min-height: 20px;
  font-size: 11px;
}

.worldbook-editor-meta-paper .worldbook-tag-input {
  min-height: 34px;
  font-size: 13px;
}

.worldbook-editor-inline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.worldbook-form-textarea::placeholder {
  color: #c5c2b9;
}

.worldbook-inline-stepper-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-top: 12px;
  min-height: 36px;
  padding: 0;
}

.worldbook-form-label {
  font-size: 13px;
  font-weight: 600;
  color: #353641;
}

.worldbook-form-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(57, 61, 74, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: #242630;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.worldbook-form-input:focus,
.worldbook-tag-input:focus {
  border-color: rgba(37, 19, 236, 0.26);
  box-shadow: 0 0 0 4px rgba(37, 19, 236, 0.08);
}

.worldbook-form-row-inline {
  grid-template-columns: minmax(92px, auto) auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  padding: 8px 10px;
}

.worldbook-stepper {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(66, 71, 87, 0.12);
  min-height: 30px;
}

.worldbook-stepper-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(58, 65, 81, 0.86);
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
}

.worldbook-stepper-value {
  min-width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #4A4A4A;
  font-variant-numeric: tabular-nums;
}

.worldbook-stepper {
  min-height: 32px;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(44, 48, 60, 0.12);
}

.worldbook-stepper-btn {
  width: 30px;
  height: 30px;
  font-size: 16px;
  color: rgba(53, 60, 78, 0.86);
}

.worldbook-stepper-value {
  min-width: 34px;
  color: #343948;
}

.worldbook-advanced-panel {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.worldbook-advanced-toggle {
  width: 100%;
  border: none;
  background: #fff;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  font-family: 'Lora', 'Noto Serif SC', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: #262731;
}

.worldbook-advanced-arrow {
  font-size: 20px;
  color: rgba(38, 39, 49, 0.48);
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.worldbook-advanced-panel.is-open .worldbook-advanced-arrow {
  transform: rotate(90deg);
}

.worldbook-advanced-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
  overflow-anchor: none;
}

.worldbook-advanced-panel.is-open .worldbook-advanced-content {
  opacity: 1;
}

.worldbook-manual-panel {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.worldbook-manual-panel .worldbook-advanced-arrow {
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.worldbook-manual-panel.is-open .worldbook-advanced-arrow {
  transform: rotate(90deg);
}

.worldbook-manual-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
  overflow-anchor: none;
}

.worldbook-manual-panel.is-open .worldbook-manual-content {
  opacity: 1;
}

.worldbook-manual-content-inner {
  padding: 8px 16px 18px;
  background: linear-gradient(180deg, rgba(248, 248, 246, 0.98), rgba(244, 244, 241, 0.95));
}

.worldbook-manual-panel-quiet .worldbook-advanced-toggle {
  min-height: 42px;
}

.worldbook-manual-group {
  --manual-glass-rgb: 154, 159, 171;
  --manual-glass-text: #5d6270;
  border-radius: 14px;
  padding: 12px;
  margin: 0 0 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.worldbook-manual-group:last-child {
  margin-bottom: 0;
}

.worldbook-manual-group-trigger {
  --manual-glass-rgb: 126, 163, 143;
  --manual-glass-text: #536b5c;
  background: linear-gradient(180deg, rgba(169, 199, 185, 0.24), rgba(169, 199, 185, 0.16));
}

.worldbook-manual-group-injection {
  --manual-glass-rgb: 157, 149, 188;
  --manual-glass-text: #665f7c;
  background: linear-gradient(180deg, rgba(179, 175, 204, 0.24), rgba(179, 175, 204, 0.16));
}

.worldbook-manual-group-behavior {
  --manual-glass-rgb: 132, 162, 188;
  --manual-glass-text: #587084;
  background: linear-gradient(180deg, rgba(165, 194, 217, 0.24), rgba(165, 194, 217, 0.16));
}

.worldbook-manual-group-schedule {
  --manual-glass-rgb: 183, 152, 106;
  --manual-glass-text: #7d6647;
  background: linear-gradient(180deg, rgba(217, 197, 165, 0.26), rgba(217, 197, 165, 0.16));
}

.worldbook-manual-group-variable {
  --manual-glass-rgb: 144, 148, 166;
  --manual-glass-text: #606579;
  background: linear-gradient(180deg, rgba(185, 188, 198, 0.24), rgba(185, 188, 198, 0.15));
}

.worldbook-manual-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-family: 'Lora', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 700;
  color: #262731;
  border-bottom: 0.5px solid rgba(38, 39, 49, 0.26);
}

.worldbook-manual-item {
  margin-bottom: 16px;
}

.worldbook-manual-item:last-child {
  margin-bottom: 0;
}

.worldbook-manual-item-label {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #2f3039;
  line-height: 1.5;
}

.worldbook-manual-text {
  margin: 0 0 14px;
  color: #757882;
  font-size: 14px;
  line-height: 1.86;
  overflow-wrap: anywhere;
}

.worldbook-manual-text:last-child {
  margin-bottom: 0;
}

.worldbook-manual-key-trigger {
  color: #A9C7B9;
  font-weight: 700;
}

.worldbook-manual-key-injection {
  color: #B3AFCC;
  font-weight: 700;
}

.worldbook-manual-key-behavior {
  color: #A5C2D9;
  font-weight: 700;
}

.worldbook-manual-key-variable {
  color: #D9C5A5;
  font-weight: 700;
}

.worldbook-manual-chip {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 9px;
  margin: 2px 2px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, rgba(var(--manual-glass-rgb), 0.18), rgba(var(--manual-glass-rgb), 0.1));
  border: 1px solid rgba(var(--manual-glass-rgb), 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  color: var(--manual-glass-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: middle;
  backdrop-filter: blur(14px) saturate(108%);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
}

.worldbook-manual-glass {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 9px;
  margin: 2px 2px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, rgba(var(--manual-glass-rgb), 0.16), rgba(var(--manual-glass-rgb), 0.08));
  border: 1px solid rgba(var(--manual-glass-rgb), 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: var(--manual-glass-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: baseline;
  backdrop-filter: blur(14px) saturate(106%);
  -webkit-backdrop-filter: blur(14px) saturate(106%);
}

.worldbook-form-group {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px;
}

.worldbook-group-triggers,
.worldbook-group-injection,
.worldbook-group-behavior,
.worldbook-group-schedule {
  border-radius: 14px;
  margin: 0 0 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.worldbook-group-triggers {
  background: linear-gradient(180deg, #DDE5DF, #D7E0D9);
}

.worldbook-group-injection {
  background: linear-gradient(180deg, #E3DEE7, #DDD7E2);
}

.worldbook-group-behavior {
  background: linear-gradient(180deg, #DDE3E8, #D7DEE4);
}

.worldbook-group-schedule {
  background: linear-gradient(180deg, #E7E3D9, #E0DBCF);
}

.worldbook-group-title {
  padding: 4px 8px 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.worldbook-group-triggers .worldbook-group-title { color: #4E6458; }
.worldbook-group-injection .worldbook-group-title { color: #615A72; }
.worldbook-group-behavior .worldbook-group-title { color: #526372; }
.worldbook-group-schedule .worldbook-group-title { color: #6D6553; }

.worldbook-group-triggers { --wb-accent: #4e6458; }
.worldbook-group-injection { --wb-accent: #615a72; }
.worldbook-group-behavior { --wb-accent: #526372; }
.worldbook-group-schedule { --wb-accent: #6d6553; }

.worldbook-schedule-clusters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0 8px 8px;
}

.worldbook-schedule-cluster {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(109, 101, 83, 0.14);
  padding: 8px;
}

.worldbook-schedule-cluster-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6D6553;
}

.worldbook-schedule-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.worldbook-schedule-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.worldbook-schedule-label {
  font-size: 11px;
  font-weight: 600;
  color: #575142;
  line-height: 1.2;
}

.worldbook-schedule-input {
  min-height: 34px;
  min-width: 0;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 12px;
}

.worldbook-form-note.worldbook-schedule-note {
  padding: 0 8px 8px;
}

.worldbook-schedule-note .worldbook-form-help {
  font-size: 11px;
  line-height: 1.5;
}

.worldbook-form-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(92px, auto) 1fr;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.24);
}

.worldbook-group-injection .worldbook-form-row {
  border-radius: 10px;
}

.worldbook-form-row::after { display: none; }

.worldbook-form-row-column {
  display: block;
  min-height: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  background: transparent;
  border-radius: 0;
}

.worldbook-inline-segment {
  justify-self: end;
  display: inline-flex;
  height: 36px;
  width: auto;
  min-width: 180px;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(31, 33, 41, 0.1);
  background: rgba(255, 255, 255, 0.58);
}

.worldbook-inline-segment button {
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.worldbook-inline-segment button.is-active {
  color: var(--wb-accent, #2d3342);
}

.worldbook-inline-segment[data-role='matching-mode'] {
  min-width: 156px;
}

.worldbook-inline-segment[data-role='role-segment'] {
  min-width: 220px;
}

.worldbook-select-row {
  width: 100%;
  border: 1px solid rgba(31, 33, 41, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  text-align: left;
  cursor: pointer;
}

.worldbook-select-value {
  justify-self: end;
  color: #3f4350;
  font-size: 14px;
  font-weight: 700;
}

.worldbook-form-row .worldbook-form-input {
  min-height: 36px;
  border-radius: 11px;
  border-color: rgba(45, 49, 60, 0.12);
  background: rgba(255, 255, 255, 0.82);
}

.worldbook-form-row .worldbook-switch {
  justify-self: end;
}

.worldbook-group-injection .worldbook-form-row .worldbook-form-input {
  justify-self: end;
  width: min(220px, 100%);
}

.worldbook-form-note {
  display: block;
  padding-top: 4px;
  padding-bottom: 8px;
}

.worldbook-form-help {
  display: block;
  color: #726f68;
  font-size: 12px;
  line-height: 1.6;
}

.worldbook-form-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 7px;
  border-radius: 999px;
  background: rgba(79, 84, 99, 0.2);
}

.worldbook-form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(52, 57, 72, 0.22);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
}

.worldbook-range-row [data-probability-value],
.worldbook-range-row [data-scan-depth-value] {
  font-weight: 700;
  color: #3f4454;
  font-variant-numeric: tabular-nums;
}

.worldbook-group-triggers .worldbook-form-range {
  background: rgba(78, 100, 88, 0.24);
}

.worldbook-group-triggers .worldbook-form-range::-webkit-slider-thumb {
  border-color: rgba(78, 100, 88, 0.36);
}

.worldbook-group-triggers .worldbook-range-row [data-probability-value] {
  color: #3e5e4f;
}

.worldbook-group-behavior .worldbook-form-range {
  background: rgba(82, 99, 114, 0.24);
}

.worldbook-group-behavior .worldbook-form-range::-webkit-slider-thumb {
  border-color: rgba(82, 99, 114, 0.36);
}

.worldbook-group-behavior .worldbook-range-row [data-scan-depth-value] {
  color: #496175;
}

.worldbook-form-row.is-regex-error {
  border-radius: 10px;
  background: rgba(255, 59, 48, 0.08);
}

.worldbook-tag-block {
  margin-bottom: 8px;
}

.worldbook-tag-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.worldbook-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  margin-bottom: 8px;
}

.worldbook-tag-item,
.worldbook-tag-empty-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}

.worldbook-tag-item {
  gap: 4px;
}

.worldbook-tag-item-mint {
  background: #63AA8A;
  color: #fff;
}

.worldbook-tag-item-mint button {
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
}

.worldbook-tag-empty-pill {
  background: rgba(62, 64, 72, 0.12);
  color: rgba(46, 47, 55, 0.55);
}

.worldbook-toast {
  position: fixed;
  top: calc(var(--safe-area-top) + 14px);
  left: 50%;
  transform: translate(-50%, -10px);
  z-index: 2000;
  min-width: 110px;
  max-width: calc(100vw - 36px);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: rgba(36, 36, 43, 0.9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.worldbook-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.worldbook-toast-success {
  background: rgba(20, 146, 74, 0.94);
}

.worldbook-toast-error {
  background: rgba(194, 33, 43, 0.94);
}

.worldbook-delete-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(14, 15, 20, 0.44);
  opacity: 0;
  transition: opacity 180ms ease;
}

.worldbook-delete-modal-mask.is-visible {
  opacity: 1;
}

.worldbook-delete-modal {
  width: min(320px, calc(100vw - 32px));
  border-radius: 16px;
  padding: 18px 16px 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.worldbook-delete-modal-mask.is-visible .worldbook-delete-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.worldbook-delete-modal-text {
  margin: 0;
  color: #2a2a33;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.worldbook-delete-modal-name {
  margin: 8px 0 0;
  color: #656576;
  font-size: 13px;
  text-align: center;
  word-break: break-all;
}

.worldbook-delete-modal-actions {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.worldbook-delete-modal-btn {
  min-height: 38px;
  border: 1px solid rgba(28, 31, 41, 0.14);
  border-radius: 10px;
  background: #fff;
  color: #2b2f3a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.worldbook-delete-modal-btn.is-danger {
  border-color: transparent;
  background: #ff3b30;
  color: #fff;
}

.worldbook-tag-input {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(59, 65, 81, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
  min-height: 38px;
  padding: 0 12px;
  color: #2c2d35;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.worldbook-secondary-cell {
  width: 100%;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  margin: 2px 0 4px;
  cursor: pointer;
  color: #4A4A4A;
  font-size: 13px;
  font-weight: 500;
}

.worldbook-secondary-cell-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.worldbook-secondary-cell-icon {
  font-size: 16px;
  color: #4A4A4A;
}

.worldbook-secondary-cell-chevron {
  font-size: 16px;
  color: #4A4A4A;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.worldbook-secondary-cell.is-open .worldbook-secondary-cell-chevron {
  transform: rotate(180deg);
}

.worldbook-sub-collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-anchor: none;
}

.worldbook-sub-panel {
  margin-top: 4px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(84, 92, 110, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.worldbook-regex-hint {
  margin: 4px 0;
  font-size: 12px;
}

.worldbook-regex-ok-text { color: #218f4b; }
.worldbook-regex-error-text { color: #d93025; }

.worldbook-select-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: rgba(22, 23, 30, 0.24);
}

.worldbook-select-sheet {
  width: min(460px, 100%);
  border-radius: 16px;
  background: rgba(245, 245, 247, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
  padding: 8px;
}

.worldbook-select-sheet-title {
  text-align: center;
  color: rgba(31, 33, 41, 0.56);
  font-size: 13px;
  padding: 8px 6px;
}

.worldbook-select-sheet-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.worldbook-select-sheet-option {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(31, 33, 41, 0.08);
  background: #fff;
  color: #20212a;
  min-height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  cursor: pointer;
}

.worldbook-select-sheet-option:last-child { border-bottom: none; }

.worldbook-select-sheet-option.is-selected {
  color: #2513ec;
  font-weight: 700;
}

.worldbook-select-sheet-cancel {
  width: 100%;
  border: none;
  border-radius: 12px;
  min-height: 46px;
  margin-top: 8px;
  background: #fff;
  color: #2513ec;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.worldbook-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.worldbook-toolbar .worldbook-header-action {
  padding: 0 2px;
}

@media (max-width: 430px) {
  .worldbook-header-title {
    font-size: 22px;
  }

  .worldbook-editor-title {
    font-size: 28px;
  }

  .worldbook-inline-segment {
    min-width: 150px;
  }

  .worldbook-inline-segment button {
    font-size: 13px;
    padding: 0 10px;
  }

  .worldbook-schedule-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .worldbook-schedule-input {
    font-size: 11px;
    padding: 0 6px;
  }

  .worldbook-manual-chip,
  .worldbook-manual-glass {
    font-size: 11px;
    padding: 2px 8px;
    margin: 1px 1px;
  }
}
/* ============================================================
 * 地理信息模态框居中悬浮重构
 * ============================================================
 * 基于精确架构说明的重构实现
 * 核心目标：废弃底部吸附式布局，改为完全居中悬浮模态框
 * ============================================================ */

/* 第一层：全局暗色遮罩（Overlay/Backdrop） */
.geography-edit-modal {
  position: fixed;
  inset: 0; /* top/right/bottom/left 全为 0 */
  background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明 */
  display: flex;
  align-items: center;
  justify-content: center; /* 让内部主卡片绝对居中的核心引擎 */
  z-index: var(--z-index-modal); /* 极高的 z-index，确保覆盖原有底层页面 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.geography-edit-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 第二层：居中悬浮主容器（Main Modal Container） */
.geography-edit-body {
  width: 90%; /* 移动端适中宽度 */
  max-width: 400px;
  max-height: 85vh; /* 防止垂直撑爆屏幕 */
  background: #ffffff;
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* 隐形阴影增加悬浮感 */
  display: flex;
  flex-direction: column; /* 内部采用纵向 Flex 布局 */
  overflow: hidden; /* 绝杀 Bug 声明：防止内部滚动条破坏圆角 */
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.geography-edit-modal.active .geography-edit-body {
  transform: scale(1);
}

/* 第三层：顶部操作栏（Header - 挂载于主容器内部最上方） */
.geography-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px; /* 高度固定 */
  padding: 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #e5e5ea;
  position: relative;
  width: 100%; /* 必须强制声明 width: 100% - 彻底修复宽度坍塌Bug */
  box-sizing: border-box;
  flex-shrink: 0; /* 严禁被挤压 */
  /* 定位：作为纵向 Flex 容器的第一个子元素，严禁使用 position: fixed 或 absolute */
}

.geography-edit-cancel,
.geography-edit-save {
  background: none;
  border: none;
  font-size: 17px;
  cursor: pointer;
  padding: 8px 12px;
  min-width: 60px;
  text-align: center;
  flex-shrink: 0; /* 防止按钮被压缩 */
  white-space: nowrap; /* 无换行 */
}

.geography-edit-cancel {
  color: #007AFF; /* 蓝色 */
}

.geography-edit-save {
  color: #007AFF; /* 蓝色 */
  font-weight: 600;
}

.geography-edit-save:disabled {
  color: #c7c7cc;
}

.geography-edit-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600; /* 黑色加粗 */
  color: #000000;
  text-align: center;
  pointer-events: none;
}

/* 第四层：内容滚动区（Scrollable Content Body - 挂载于主容器内部下方） */
.geography-edit-content {
  flex: 1; /* 占据主容器剩余的所有空间 */
  overflow-y: auto; /* 必须声明 overflow-y: auto */
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  box-sizing: border-box;
}

/* 地理信息表单组 */
.geography-form-group {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.geography-form-group:last-child {
  margin-bottom: 0;
}

.geography-form-label {
  display: block;
  font-size: 13px;
  color: #8e8e93;
  margin-bottom: 8px;
  font-weight: 500;
}

.geography-form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  font-size: 15px;
  background: #ffffff;
  box-sizing: border-box;
}

.geography-form-input:focus {
  outline: none;
  border-color: #007AFF;
}

.geography-form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  font-size: 15px;
  background: #ffffff;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
  font-family: inherit;
}

.geography-form-textarea:focus {
  outline: none;
  border-color: #007AFF;
}

/* 地点类型选择器 */
.geography-type-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.geography-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
  flex: 1;
  box-sizing: border-box;
}

.geography-type-btn:hover {
  background: #f2f2f7;
}

.geography-type-btn.active {
  border-color: #007AFF;
  background: rgba(0, 122, 255, 0.1);
}

.geography-type-icon {
  font-size: 20px;
}

.geography-type-btn span:last-child {
  font-size: 12px;
  color: #000000;
}

/* 复选框样式 - 遗留元素收编：作为表单的最后一项 */
.geography-form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  color: #000000;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px; /* 适当间距 */
}

.geography-form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 1px solid #e5e5ea;
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
}

.geography-form-checkbox input[type="checkbox"]:checked {
  background: #007AFF;
  border-color: #007AFF;
}

.geography-checkbox-checkmark {
  display: none;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .geography-edit-body {
    width: 95%;
    max-height: 90vh;
  }
  
  .geography-edit-header {
    height: 52px;
    padding: 0 12px;
    width: 100%; /* 响应式设计中也保持宽度约束 */
  }
  
  .geography-edit-content {
    padding: 16px;
  }
  
  .geography-edit-cancel,
  .geography-edit-save {
    font-size: 16px;
    padding: 6px 10px;
    min-width: 50px;
  }
  
  .geography-edit-title {
    font-size: 16px;
  }
  
  .geography-type-btn {
    min-width: 50px;
    padding: 10px 6px;
  }
}

@media (max-width: 360px) {
  .geography-edit-body {
    width: 98%;
    max-height: 95vh;
  }
  
  .geography-edit-header {
    height: 48px;
    padding: 0 8px;
    width: 100%; /* 小屏幕响应式设计中也保持宽度约束 */
  }
  
  .geography-edit-content {
    padding: 12px;
  }
  
  .geography-edit-cancel,
  .geography-edit-save {
    font-size: 15px;
    padding: 4px 8px;
    min-width: 45px;
  }
  
  .geography-edit-title {
    font-size: 15px;
  }
  
  .geography-type-btn {
    min-width: 45px;
    padding: 8px 4px;
  }
}

/* 确保没有其他异常定位覆盖 */
.geography-edit-modal * {
  position: static !important; /* 强制移除异常定位 */
}

.geography-edit-header,
.geography-edit-body,
.geography-edit-content {
  position: relative !important; /* 仅在需要时使用相对定位 */
}/* Spatial Hub - Pearlescent Gel Visual Layer */

:root {
  --spatial-hub-z: 10050;
  --spatial-hub-bg: transparent;
  --spatial-hub-card-radius: 20px;

  --spatial-hub-cyan: var(--color-cyan-fluid, hsl(168, 70%, 85%));
  --spatial-hub-peach: var(--color-peach-fluid, hsl(15, 85%, 90%));
  --spatial-hub-violet: var(--color-violet-fluid, hsl(270, 80%, 88%));
  --spatial-hub-sky: var(--color-sky-blue-fluid, hsl(205, 85%, 90%));
}

.info-bottom-row {
  cursor: pointer;
}

.spatial-hub-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--spatial-hub-z);
  background: var(--spatial-hub-bg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 140ms ease;
}

.spatial-hub-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.spatial-hub-scene {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  filter: saturate(1.4);
}

.spatial-hub-card {
  position: fixed;
  left: initial; /* 覆盖初始值，允许JS动态设置 */
  top: initial; /* 覆盖初始值，允许JS动态设置 */
  width: 248px;
  max-width: calc(100vw - 24px);
  max-height: min(50vh, 390px);
  border-radius: var(--spatial-hub-card-radius);
  overflow: visible;  /* 允许按钮显示在圆角外面 */
  color: #334155;
  z-index: 10;
  transform-origin: 36px 0;
  opacity: 0;
  isolation: isolate;
}

.spatial-hub-card-surface {
  position: relative;
  width: 100%;
  max-height: min(50vh, 390px);
  border-radius: var(--spatial-hub-card-radius);
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  background-clip: padding-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  clip-path: inset(0 round var(--spatial-hub-card-radius));
  background:
    radial-gradient(circle at 20% 30%, rgba(214, 196, 224, 0.4) 0%, transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(194, 222, 214, 0.35) 0%, transparent 42%),
    radial-gradient(circle at 52% 62%, rgba(211, 218, 230, 0.28) 0%, transparent 48%),
    rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.28),
    0 6px 14px rgba(15, 23, 42, 0.22);
}

.spatial-hub-refresh-btn {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.2) 38%, transparent 60%),
    rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.2);
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.24),
    inset 0 1px 3px rgba(255, 255, 255, 0.58);
  mix-blend-mode: normal;
}

.spatial-hub-refresh-btn:hover {
  transform: scale(1.05);
  box-shadow:
    0 6px 14px rgba(15, 23, 42, 0.28),
    inset 0 1px 3px rgba(255, 255, 255, 0.68);
}

.spatial-hub-refresh-btn:active {
  transform: scale(0.95);
}

.spatial-hub-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.spatial-hub-refresh-btn.is-loading .refresh-icon {
  animation: spatialHubRefreshSpin 0.9s linear infinite;
}

.refresh-icon {
  width: 14px;
  height: 14px;
  stroke: #334155;
  transition: transform 0.3s ease;
}

.spatial-hub-refresh-btn:hover .refresh-icon {
  transform: rotate(15deg);
}

.spatial-hub-card-surface::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg,
      #ff0000 0%,
      #ff8000 20%,
      #ffff00 40%,
      #00ff00 60%,
      #0000ff 80%,
      #8000ff 100%);
  background-size: 400% 400%;
  filter: blur(10px) saturate(180%);
  mix-blend-mode: overlay;
  opacity: 0.15;
  will-change: transform, background-position;
  animation: spatialRainbowFlow 4s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.spatial-hub-card-surface::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(58% 52% at 20% 22%, #ff0000 0%, transparent 58%),
    radial-gradient(56% 54% at 80% 30%, #00ff00 0%, transparent 60%),
    radial-gradient(60% 56% at 54% 78%, #0000ff 0%, transparent 62%);
  filter: blur(7px) saturate(180%);
  mix-blend-mode: overlay;
  opacity: 0.10;
  will-change: transform, opacity;
  animation: spatialRainbowDrift 3.5s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.spatial-hub-overlay.active .spatial-hub-card-surface::before,
.spatial-hub-overlay.active .spatial-hub-card-surface::after {
  animation-play-state: running;
  opacity: 0.20;
}

/* 为减少动画偏好设置提供支持，但保留核心功能 */
@media (prefers-reduced-motion: reduce) {
  .spatial-hub-overlay,
  .spatial-hub-card {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .blob,
  .spatial-hub-scene::before {
    animation: none !important;
  }
  
  /* 在减少动画模式下，暂停彩虹特效动画，但仍保持视觉效果 */
  .spatial-hub-card-surface::before,
  .spatial-hub-card-surface::after {
    animation-play-state: paused !important;
  }
  
  /* 在减少动画模式下，确保激活时不会播放动画 */
  .spatial-hub-overlay.active .spatial-hub-card-surface::before,
  .spatial-hub-overlay.active .spatial-hub-card-surface::after {
    animation-play-state: paused !important;
  }
}

/* 确保在正常模式下动画能够正确播放 */
@media (prefers-reduced-motion: no-preference) {
  .spatial-hub-overlay.active .spatial-hub-card-surface::before,
  .spatial-hub-overlay.active .spatial-hub-card-surface::after {
    animation-play-state: running !important;
    opacity: 0.20;
  }
}

/* 强制在正常环境下运行动画，使用更具体的选择器和更高的优先级 */
.spatial-hub-overlay.active .spatial-hub-card-surface::before,
.spatial-hub-overlay.active .spatial-hub-card-surface::after {
  animation-play-state: running !important;
  opacity: 0.20 !important;
}


.spatial-hub-overlay.active .spatial-hub-card {
  animation: spatialHubJellyIn 560ms cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

.spatial-hub-overlay.closing .spatial-hub-card {
  animation: spatialHubQuickOut 380ms cubic-bezier(0.34, 0, 0.64, 1) both !important;
}

.gel-slab-card,
.liquid-glass-card {
  background:
    radial-gradient(circle at 20% 30%, rgba(214, 196, 224, 0.4) 0%, transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(194, 222, 214, 0.35) 0%, transparent 42%),
    radial-gradient(circle at 52% 62%, rgba(211, 218, 230, 0.28) 0%, transparent 48%),
    rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.28),
    0 6px 14px rgba(15, 23, 42, 0.22);
}

.iridescent-border {
  position: relative;
}

.iridescent-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: none;
}

.specular-highlight {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 20%, transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 20%);
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 0.45;
  z-index: 2;
}

.spatial-hub-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  z-index: 1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
}

/* 磨砂杂色纹理增强 */
.satin-texture {
  position: absolute;
  inset: 1px;
  pointer-events: none;
  opacity: 0.12;
  z-index: 1;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.05) 100%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, transparent 70%);
  border-radius: inherit;
}

.blob {
  position: absolute;
  filter: blur(78px);
  border-radius: 50%;
  z-index: 0;
  mix-blend-mode: screen;
  animation: spatialBlobFloat 18s ease-in-out infinite;
  animation-play-state: paused;
  opacity: 0.32;
}

.spatial-hub-overlay.active .blob {
  animation-play-state: running;
  will-change: transform;
}

.blob-cyan {
  width: 380px;
  height: 380px;
  top: -40px;
  left: -70px;
  background: var(--spatial-hub-cyan);
}

.blob-peach {
  width: 300px;
  height: 300px;
  top: 20px;
  right: -60px;
  background: var(--spatial-hub-peach);
  filter: blur(92px);
}

.blob-violet {
  width: 320px;
  height: 320px;
  bottom: -120px;
  left: -20px;
  background: var(--spatial-hub-violet);
  filter: blur(90px);
}

.blob-sky {
  width: 260px;
  height: 260px;
  top: 180px;
  right: 80px;
  background: var(--spatial-hub-sky);
  filter: blur(102px);
}

.spatial-hub-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px 9px;
  max-height: min(68vh, 620px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

.spatial-hub-grabber {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
  margin: 0 auto 2px;
}

.spatial-hub-sync-status {
  max-height: 0;
  margin: 0;
  color: rgba(71, 85, 105, 0.92);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  opacity: 0;
  overflow: hidden;
  transition: max-height 200ms ease, margin 200ms ease, opacity 150ms ease 50ms;
  pointer-events: none;
}

.spatial-hub-sync-status.active {
  max-height: 14px;
  margin: 1px 0 2px;
  opacity: 1;
  transition: max-height 200ms ease, margin 200ms ease, opacity 150ms ease;
}

.spatial-hub-header-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 34px;
}

.spatial-hub-header-row > div:not(.spatial-hub-weather-chip) {
  flex: 1;
  min-width: 0;
  /* 只给左侧文字块预留空间，避免误伤温度胶囊 */
  padding-right: 68px;
}

.spatial-hub-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.location-title {
  font-size: 15px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  color: #1f2937;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
}

.spatial-hub-online-dot-wrap {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.spatial-hub-online-dot-wrap::before {
  display: none;
}

.spatial-hub-online-dot {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.location-meta {
  text-align: left;
  font-size: 8px;
  color: rgba(100, 116, 139, 0.86);
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-weight: 600;
}

.spatial-hub-weather-chip {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: unset;
  max-width: unset;
  flex: 0 0 auto;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background-clip: padding-box;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  padding: 3px 7px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6), 0 2px 8px rgba(226, 194, 246, 0.15);
  overflow: hidden;
}

.spatial-hub-weather-chip .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  font-size: 11px;
  line-height: 1;
  color: #334155;
  font-variation-settings: 'wght' 200;
  transform: translateY(-0.5px);
}

.weather-text {
  display: inline-block;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: #475569;
}

.spatial-hub-distance-block {
  width: 100%;
  padding: 2px 1px;
}

.spatial-hub-distance-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 600;
}

.distance-value {
  color: #cbd5e1; /* 比原来的 #94a3b8 更淡一个度 */
  flex: 0 0 auto; /* 防止被挤压 */
  padding: 0 8px; /* 添加左右间距，使其视觉居中 */
}

.distance-value {
  font-size: 10px;
  color: #334155;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.glowing-thread {
  position: relative;
  width: 100%;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.02);
}

.glowing-thread-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 72%;
  border-radius: inherit;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 4px rgba(255, 255, 255, 0.8);
}

.light-spark {
  position: absolute;
  top: 50%;
  left: calc(72% - 3px);
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 1), 0 0 24px 6px rgba(168, 240, 227, 0.6);
}

.spatial-hub-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.activity-text {
  margin: 8px 0 0;
  max-width: 56%;
  color: rgba(71, 85, 105, 0.9);
  font-size: 10px;
  line-height: 1.35;
  font-style: italic;
  letter-spacing: 0.01em;
}

.spatial-hub-modules {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.glass-module {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6), 0 2px 8px rgba(226, 194, 246, 0.15);
  background-clip: padding-box;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 移动端 Safari 既容易出现圆角漏边，也容易把彩色层直接“糊”到表面。
   这里恢复一层更明确的乳白柔化，同时保留内缩裁切，避免再出现硬边。 */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    .spatial-hub-card-surface {
      background:
        radial-gradient(circle at 20% 30%, rgba(214, 196, 224, 0.26) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(194, 222, 214, 0.24) 0%, transparent 40%),
        radial-gradient(circle at 52% 62%, rgba(211, 218, 230, 0.18) 0%, transparent 45%),
        rgba(255, 255, 255, 0.965);
      backdrop-filter: blur(28px) saturate(138%);
      -webkit-backdrop-filter: blur(28px) saturate(138%);
    }

    .spatial-hub-card-surface::before {
      mix-blend-mode: soft-light;
      opacity: 0.07;
      filter: blur(8px) saturate(135%);
    }

    .spatial-hub-card-surface::after {
      mix-blend-mode: soft-light;
      opacity: 0.045;
      filter: blur(6px) saturate(130%);
    }

    .specular-highlight {
      inset: 1px;
      opacity: 0.82;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.26) 24%, rgba(255, 255, 255, 0.16) 56%, rgba(255, 255, 255, 0.28) 100%),
        radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.18) 28%, transparent 58%),
        radial-gradient(ellipse at 82% 80%, rgba(255, 255, 255, 0.18) 0%, transparent 52%);
    }

    .satin-texture {
      mix-blend-mode: soft-light;
      opacity: 0.045;
    }
  }
}

.glass-module .material-symbols-outlined {
  font-size: 12px;
  color: #334155;
  font-variation-settings: 'wght' 200;
}

.glass-module-text {
  font-size: 6.5px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

@keyframes spatialHubRefreshSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spatialBlobFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2.2%, -2.2%, 0) scale(1.045);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes spatialRainbowFlow {
  0% {
    transform: translate3d(-2.4%, -1.8%, 0) scale(1.01);
    background-position: 0% 18%;
  }
  50% {
    transform: translate3d(2.2%, 1.6%, 0) scale(1.06);
    background-position: 58% 82%;
  }
  100% {
    transform: translate3d(-1.6%, -1.2%, 0) scale(1.03);
    background-position: 100% 24%;
  }
}

@keyframes spatialRainbowDrift {
  0% {
    transform: translate3d(-2.2%, -1.4%, 0) scale(0.99);
    opacity: 0.42;
  }
  50% {
    transform: translate3d(2.4%, 1.3%, 0) scale(1.04);
    opacity: 0.60;
  }
  100% {
    transform: translate3d(0.4%, -1.8%, 0) scale(1.01);
    opacity: 0.46;
  }
}

@keyframes spatialHubJellyIn {
  0% {
    transform: translate3d(0, -12px, 0) scale(0.94);
    opacity: 0;
    filter: blur(1px);
  }
  48% {
    transform: translate3d(0, 0, 0) scale(1.015);
    opacity: 1;
    filter: blur(0.3px);
  }
  72% {
    transform: translate3d(0, 0, 0) scale(0.992);
    opacity: 1;
    filter: blur(0.5px);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes spatialHubQuickOut {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    box-shadow:
      0 18px 38px rgba(15, 23, 42, 0.24),
      0 6px 14px rgba(15, 23, 42, 0.18);
  }
  48% {
    transform: translate3d(0, 0, 0) scale(0.99);
    opacity: 0.92;
    box-shadow:
      0 12px 28px rgba(15, 23, 42, 0.18),
      0 4px 10px rgba(15, 23, 42, 0.14);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(0.96);
    opacity: 0;
    filter: blur(0.5px);
    box-shadow:
      0 4px 12px rgba(15, 23, 42, 0.10),
      0 2px 6px rgba(15, 23, 42, 0.06);
  }
}

.quest-app {
  --quest-font-body: "Manrope", "Inter", sans-serif;
  --quest-font-display: "Newsreader", "Lora", serif;
  --quest-bg-radial: rgba(255, 255, 255, 0.84);
  --quest-bg-start: #f8f3ea;
  --quest-bg-end: #f3ede3;
  --quest-header-bg: rgba(251, 249, 245, 0.92);
  --quest-surface-card: rgba(252, 249, 244, 0.9);
  --quest-surface-card-strong: rgba(255, 255, 255, 0.92);
  --quest-surface-card-soft: rgba(255, 255, 255, 0.72);
  --quest-surface-card-tint: rgba(247, 244, 237, 0.8);
  --quest-surface-role: rgba(255, 255, 255, 0.56);
  --quest-surface-role-active-start: rgba(44, 58, 40, 0.96);
  --quest-surface-role-active-end: rgba(37, 49, 34, 0.96);
  --quest-surface-input: rgba(255, 255, 255, 0.92);
  --quest-surface-chip: rgba(247, 250, 244, 0.82);
  --quest-surface-chip-active-start: rgba(220, 230, 209, 0.92);
  --quest-surface-chip-active-end: rgba(255, 255, 255, 0.96);
  --quest-surface-composer: rgba(248, 243, 234, 0.88);
  --quest-surface-composer-create-start: rgba(250, 245, 237, 0.78);
  --quest-surface-composer-create-end: rgba(245, 239, 229, 0.96);
  --quest-surface-panel-create-start: rgba(252, 249, 244, 0.94);
  --quest-surface-panel-create-end: rgba(246, 241, 234, 0.92);
  --quest-surface-user-bubble-start: rgba(241, 236, 227, 0.98);
  --quest-surface-user-bubble-end: rgba(236, 231, 222, 0.98);
  --quest-surface-avatar-start: #e1d5b3;
  --quest-surface-avatar-end: #cda03f;
  --quest-surface-error: rgba(255, 244, 241, 0.98);
  --quest-border-soft: rgba(39, 41, 38, 0.07);
  --quest-border-faint: rgba(39, 41, 38, 0.06);
  --quest-border-interactive: rgba(90, 113, 94, 0.14);
  --quest-border-interactive-strong: rgba(81, 99, 74, 0.3);
  --quest-border-active: rgba(44, 58, 40, 0.9);
  --quest-border-user-bubble: rgba(44, 58, 40, 0.1);
  --quest-border-error: rgba(172, 74, 52, 0.16);
  --quest-ink-title: #182114;
  --quest-ink-body: #203124;
  --quest-ink-emphasis: #1f2b21;
  --quest-ink-soft: #70695f;
  --quest-ink-muted: #7a746c;
  --quest-ink-subtle: #8a8378;
  --quest-ink-secondary: #728174;
  --quest-ink-role: #1d261f;
  --quest-ink-chip: #2f4e39;
  --quest-ink-avatar: #2a2413;
  --quest-ink-inverse: #f7f2e8;
  --quest-ink-active-soft: #f6f0e5;
  --quest-ink-error: #8a4b38;
  --quest-accent-strong: #51634a;
  --quest-accent-cta-start: #283124;
  --quest-accent-cta-end: #182114;
  --quest-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --quest-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --quest-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --quest-focus-ring: rgba(56, 86, 62, 0.78);
  --quest-focus-shadow: rgba(56, 86, 62, 0.12);
  --quest-shadow-card: 0 24px 48px rgba(63, 56, 42, 0.08);
  --quest-shadow-soft: 0 12px 24px rgba(63, 56, 42, 0.05);
  --quest-shadow-role: 0 16px 26px rgba(44, 58, 40, 0.16);
  --quest-shadow-panel: 0 22px 42px rgba(63, 56, 42, 0.08);
  --quest-shadow-composer: 0 -12px 24px rgba(63, 56, 42, 0.06);
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, var(--quest-bg-radial) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, var(--quest-bg-start) 0%, var(--quest-bg-end) 100%);
  color: var(--quest-ink-title);
  font-family: var(--quest-font-body);
  touch-action: pan-y;
  overscroll-behavior: none;
}

.quest-shell {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
  touch-action: pan-y;
}

.quest-header {
  padding-top: var(--safe-area-top);
  min-height: var(--header-total-height);
  background: var(--quest-header-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--quest-border-faint);
}

.quest-header__bar {
  min-height: 44px;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.quest-header__copy {
  text-align: center;
}

.quest-header__copy h1 {
  margin: 0;
  font-size: 19px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--quest-ink-title);
  letter-spacing: -0.03em;
  font-family: var(--quest-font-display);
}

.quest-header__copy p {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--quest-ink-muted);
}

.quest-header__back,
.quest-header__close {
  border: none;
  background: none;
  color: color-mix(in srgb, var(--quest-accent-strong) 78%, white);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}

.quest-header__spacer {
  display: block;
  width: 100%;
  min-height: 1px;
}

.quest-header__back[disabled] {
  visibility: hidden;
}

.quest-status {
  position: absolute;
  left: calc(16px + var(--safe-area-left));
  right: calc(16px + var(--safe-area-right));
  top: calc(var(--safe-area-top) + 56px);
  z-index: 24;
  display: block;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--quest-accent-strong) 14%, transparent);
  color: color-mix(in srgb, var(--quest-accent-strong) 82%, black);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms var(--quest-ease-out-quart), visibility 0s linear 220ms;
}

.quest-shell--no-header .quest-status {
  top: calc(var(--safe-area-top) + 12px);
}

.quest-status.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.quest-status.is-error {
  background: color-mix(in srgb, var(--quest-ink-error) 16%, transparent);
  color: var(--quest-ink-error);
}

.quest-content {
  flex: 1;
  padding: 16px;
  padding-bottom: calc(32px + var(--safe-area-bottom));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.quest-shell--no-header .quest-content {
  padding-top: calc(12px + var(--safe-area-top));
}

.quest-hero,
.quest-panel,
.quest-detail-card,
.quest-section {
  width: min(100%, 760px);
  border-radius: 28px;
  background: var(--quest-surface-card);
  border: 1px solid var(--quest-border-soft);
  box-shadow: var(--quest-shadow-card);
}

.quest-hero,
.quest-panel,
.quest-detail-card {
  padding: 22px;
}

.quest-section {
  margin-top: 16px;
  padding: 20px;
}

.quest-section--compact {
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.quest-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--quest-ink-subtle) 90%, var(--quest-ink-muted));
  margin-bottom: 10px;
}

.quest-hero__copy strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 600;
  color: var(--quest-ink-title);
  letter-spacing: -0.04em;
  font-family: var(--quest-font-display);
}

.quest-hero__copy p,
.quest-panel p,
.quest-detail-card p,
.quest-empty-state,
.quest-panel__hint {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--quest-ink-soft);
}

.quest-hero__actions,
.quest-inline-actions,
.quest-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.quest-primary-btn,
.quest-secondary-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  transform: translateY(0) scale(1);
  transition:
    transform 220ms var(--quest-ease-out-quart),
    box-shadow 220ms var(--quest-ease-out-quart),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

.quest-primary-btn {
  background: linear-gradient(180deg, var(--quest-accent-cta-start), var(--quest-accent-cta-end));
  color: var(--quest-ink-inverse);
}

.quest-secondary-btn {
  background: var(--quest-surface-card-soft);
  color: color-mix(in srgb, var(--quest-accent-strong) 88%, black);
  border-color: color-mix(in srgb, var(--quest-border-soft) 85%, white);
}

.quest-secondary-btn--muted {
  color: color-mix(in srgb, var(--quest-ink-secondary) 82%, var(--quest-ink-subtle));
}

.quest-primary-btn[disabled],
.quest-secondary-btn[disabled] {
  opacity: 0.52;
}

.quest-primary-btn:hover,
.quest-secondary-btn:hover {
  transform: translateY(-1px) scale(1.015);
}

.quest-primary-btn:active,
.quest-secondary-btn:active {
  transform: translateY(0) scale(0.975);
  transition-duration: 120ms;
}

.quest-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.quest-section__head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quest-section__action {
  border: none;
  background: rgba(47, 78, 57, 0.08);
  color: #31533d;
  border-radius: 999px;
  min-height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}

.quest-section__head h2 {
  margin: 0;
  font-size: 17px;
  color: #182114;
  font-family: "Newsreader", "Lora", serif;
  font-weight: 600;
}

.quest-section__head span {
  font-size: 12px;
  color: #708072;
}

.quest-task-row + .quest-task-row,
.quest-step-row + .quest-step-row,
.quest-plan-step-editor + .quest-plan-step-editor {
  margin-top: 12px;
}

.quest-step-group + .quest-step-group {
  margin-top: 18px;
}

.quest-detail-card__meta,
.quest-plan-step-editor__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quest-detail-card__meta,
.quest-plan-step-editor__meta,
.quest-step-row__copy span {
  font-size: 12px;
  color: #728174;
}

.quest-task-row__main strong,
.quest-step-row__copy strong,
.quest-detail-card h2 {
  display: block;
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  color: #182114;
}

.quest-step-row__copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #5f6f63;
}

.quest-empty-state {
  padding: 16px;
  border-radius: 16px;
  background: rgba(241, 245, 239, 0.92);
}

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

.quest-readonly-card {
  padding: 14px;
  border-radius: 16px;
  background: #f7faf4;
}

.quest-readonly-card span,
.quest-field span {
  display: block;
  font-size: 12px;
  color: #728174;
  margin-bottom: 6px;
}

.quest-readonly-card strong {
  display: block;
  font-size: 16px;
  color: #1f3023;
}

.quest-panel--warning {
  background: rgba(255, 248, 236, 0.9);
  border-color: rgba(195, 150, 82, 0.24);
}

.quest-panel strong {
  display: block;
  font-size: 18px;
  color: #182114;
  font-family: "Newsreader", "Lora", serif;
  font-weight: 600;
}

.quest-field {
  display: block;
  margin-top: 16px;
}

.quest-field input,
.quest-field textarea,
.quest-field select {
  width: 100%;
  border: 1px solid rgba(90, 113, 94, 0.14);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  padding: 14px 15px;
  font-size: 15px;
  color: #223225;
  resize: vertical;
}

.quest-field textarea {
  min-height: 112px;
}

.quest-field select {
  min-height: 48px;
}

.quest-plan-step-editor {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(90, 113, 94, 0.12);
}

.quest-hero--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.quest-token-brief {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.quest-token-brief__value {
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: #203124;
  letter-spacing: -0.04em;
}

.quest-token-brief__cash {
  font-size: 12px;
  color: #708072;
}

.quest-focus-strip {
  width: 100%;
  margin-top: 14px;
  padding: 16px 18px;
  border: none;
  text-align: left;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(84, 123, 93, 0.14), rgba(255, 255, 255, 0.82));
  color: #203124;
  box-shadow: 0 12px 24px rgba(46, 63, 44, 0.06);
}

.quest-focus-strip__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c7d6f;
}

.quest-focus-strip strong {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.35;
}

.quest-focus-strip span:last-child {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #647365;
}

.quest-task-row {
  width: 100%;
  border: none;
  text-align: left;
  background: rgba(248, 251, 246, 0.96);
  border-radius: 18px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.quest-task-row.is-completed {
  background: rgba(238, 246, 236, 0.96);
}

.quest-task-row__check {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(84, 123, 93, 0.42);
  background: #fff;
}

.quest-task-row__check.is-completed {
  background: #547b5d;
  border-color: #547b5d;
  box-shadow: inset 0 0 0 4px #eef6ec;
}

.quest-task-row__main {
  min-width: 0;
}

.quest-task-row__main span,
.quest-task-row__main em {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quest-task-row__main span {
  margin-top: 3px;
  font-size: 13px;
  color: #5f6f63;
}

.quest-task-row__main em {
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  color: #7a887c;
}

.quest-task-row__aside {
  font-size: 12px;
  font-weight: 700;
  color: #547b5d;
}

.quest-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.quest-detail-pill {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(84, 123, 93, 0.1);
  color: #35553f;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.quest-section--detail-overview {
  padding: 14px;
}

.quest-detail-overview-card {
  grid-template-columns: minmax(0, 1fr);
}

.quest-detail-overview-card__footer {
  justify-content: space-between;
}

.quest-section--detail-plan {
  padding-top: 16px;
  padding-bottom: 16px;
}

.quest-section__head--detail-plan {
  margin-bottom: 12px;
}

.quest-detail-inline-note,
.quest-detail-plan-note {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(206, 198, 182, 0.72);
}

.quest-detail-inline-note span,
.quest-detail-plan-note span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8378;
}

.quest-detail-inline-note strong,
.quest-detail-plan-note strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.4;
  color: #1c1b16;
}

.quest-detail-inline-note p,
.quest-detail-plan-note p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6f6658;
}

.quest-step-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
}

.quest-step-row__toggle {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1.5px solid rgba(84, 123, 93, 0.42);
  background: #fff;
  padding: 0;
}

.quest-step-row__toggle.is-completed,
.quest-step-row__toggle[disabled] {
  background: #547b5d;
  border-color: #547b5d;
  box-shadow: inset 0 0 0 4px #eef6ec;
}

.quest-step-row__copy {
  min-width: 0;
}

.quest-step-row__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.quest-step-tag {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(84, 123, 93, 0.12);
  color: #35553f;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.quest-step-group__title {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c7d6f;
}

.quest-step-row__reward {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--quest-ink-secondary);
}

.quest-section--detail-steps .quest-step-row {
  padding: 14px 14px 14px 12px;
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(206, 198, 182, 0.72);
}

.quest-section--detail-steps .quest-step-row.is-completed {
  opacity: 1;
  background: rgba(246, 241, 233, 0.9);
}

.quest-detail-actions--detail {
  display: grid;
  gap: 10px;
  width: min(100%, 760px);
  margin-top: 16px;
}

.quest-detail-actions__primary {
  width: 100%;
  min-height: 48px;
}

.quest-detail-actions__secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.quest-detail-actions__secondary .quest-secondary-btn {
  width: 100%;
}

.quest-create-prompt,
.quest-create-brief {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.58);
}

.quest-create-brief--error {
  background: rgba(255, 244, 241, 0.98);
  border: 1px solid rgba(172, 74, 52, 0.16);
}

.quest-create-prompt span,
.quest-create-brief span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c7d6f;
}

.quest-create-prompt strong,
.quest-create-brief strong {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: #203124;
}

.quest-create-brief p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #8a4b38;
}

.quest-question-stack {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.quest-question-card,
.quest-create-summary {
  padding: 16px;
  border-radius: 20px;
  background: var(--quest-surface-card-soft);
  border: 1px solid color-mix(in srgb, var(--quest-border-interactive) 72%, white);
}

.quest-question-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.quest-question-card__index,
.quest-question-card__tag,
.quest-create-summary span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--quest-ink-secondary) 88%, var(--quest-ink-subtle));
}

.quest-question-card__tag {
  color: color-mix(in srgb, var(--quest-ink-error) 58%, var(--quest-ink-subtle));
}

.quest-question-card__meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--quest-ink-secondary);
}

.quest-field--question {
  margin-top: 12px;
}

.quest-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.quest-choice-chip {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--quest-border-interactive);
  background: var(--quest-surface-chip);
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.quest-choice-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quest-choice-chip span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--quest-ink-chip);
  text-align: left;
}

.quest-choice-chip.is-active {
  border-color: var(--quest-border-interactive-strong);
  background: linear-gradient(135deg, var(--quest-surface-chip-active-start), var(--quest-surface-chip-active-end));
  box-shadow: 0 10px 24px rgba(74, 58, 25, 0.08);
}

.quest-choice-chip--custom {
  cursor: text;
  border-style: dashed;
  background: color-mix(in srgb, var(--quest-surface-card-strong) 82%, var(--quest-surface-chip));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.quest-choice-chip--custom.has-value {
  border-style: solid;
  border-color: color-mix(in srgb, var(--quest-border-interactive-strong) 84%, white);
  background: color-mix(in srgb, var(--quest-surface-chip-active-end) 92%, white);
}

.quest-choice-chip--custom:focus-within {
  border-color: var(--quest-focus-ring);
  box-shadow: 0 0 0 4px var(--quest-focus-shadow);
}

.quest-choice-chip--custom textarea {
  width: 100%;
  min-height: 56px;
  padding: 16px;
  border: none;
  border-radius: inherit;
  background: transparent;
  resize: none;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  color: var(--quest-ink-emphasis);
}

.quest-choice-chip--custom textarea::placeholder {
  color: color-mix(in srgb, var(--quest-ink-muted) 88%, white);
}

.quest-choice-chip--custom textarea:focus {
  outline: none;
}

.quest-create-summary {
  margin-top: 16px;
}

.quest-create-summary strong {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--quest-ink-body);
}

.quest-create-summary p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--quest-ink-soft) 90%, var(--quest-ink-secondary));
}

.quest-shell--create .quest-content,
.quest-shell--calibrate .quest-content,
.quest-shell--confirm .quest-content {
  align-items: stretch;
  padding-top: 14px;
}

.quest-chat-stage {
  width: min(100%, 760px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quest-chat-stage__hero {
  padding: 18px 20px 4px;
}

.quest-chat-stage__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--quest-ink-subtle);
}

.quest-chat-stage__hero strong {
  display: block;
  font-family: var(--quest-font-display);
  font-size: 34px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--quest-ink-title);
}

.quest-chat-stage__hero p {
  margin: 10px 0 0;
  max-width: 540px;
  color: var(--quest-ink-soft);
}

.quest-chat-role-strip {
  padding: 0 20px;
}

.quest-chat-role-strip--empty {
  padding: 16px 20px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--quest-surface-card-soft) 82%, transparent);
  border: 1px solid var(--quest-border-faint);
}

.quest-chat-role-strip--empty p {
  margin: 8px 0 0;
}

.quest-chat-role-strip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.quest-chat-role-strip__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quest-ink-subtle);
}

.quest-chat-role-strip__head strong {
  font-size: 14px;
  color: color-mix(in srgb, var(--quest-ink-body) 90%, black);
}

.quest-chat-role-strip__hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--quest-ink-secondary);
}

.quest-chat-role-strip__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.quest-chat-role-strip__list::-webkit-scrollbar {
  display: none;
}

.quest-role-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--quest-border-soft) 82%, white);
  border-radius: 22px;
  background: var(--quest-surface-role);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  text-align: left;
}

.quest-role-card.is-active {
  background: linear-gradient(180deg, var(--quest-surface-role-active-start), var(--quest-surface-role-active-end));
  border-color: var(--quest-border-active);
  box-shadow: var(--quest-shadow-role);
}

.quest-role-card__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quest-role-card__copy strong {
  font-size: 15px;
  line-height: 1.2;
  color: var(--quest-ink-role);
}

.quest-role-card__copy span {
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--quest-ink-subtle) 92%, var(--quest-ink-muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quest-role-card.is-active .quest-role-card__copy strong,
.quest-role-card.is-active .quest-role-card__copy span {
  color: var(--quest-ink-active-soft);
}

.quest-chat-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--quest-surface-avatar-start), var(--quest-surface-avatar-end));
  color: var(--quest-ink-avatar);
  font-family: var(--quest-font-display);
  font-size: 18px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.quest-chat-avatar--image {
  background: color-mix(in srgb, var(--quest-surface-elevated) 88%, white);
}

.quest-chat-avatar__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.quest-chat-avatar--user {
  background: color-mix(in srgb, var(--quest-accent-strong) 90%, #152012);
  color: var(--quest-ink-inverse);
  font-family: var(--quest-font-body);
  font-size: 14px;
}

.quest-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 20px 6px;
}

.quest-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.quest-chat-row--user {
  justify-content: flex-end;
}

.quest-chat-bubble,
.quest-chat-card {
  max-width: min(100%, 560px);
  border-radius: 24px;
}

.quest-chat-bubble {
  padding: 14px 16px;
  border: 1px solid var(--quest-border-faint);
  background: color-mix(in srgb, var(--quest-surface-card-strong) 82%, white);
  box-shadow: 0 14px 32px rgba(63, 56, 42, 0.06);
}

.quest-chat-bubble--user {
  background: linear-gradient(180deg, var(--quest-surface-user-bubble-start), var(--quest-surface-user-bubble-end));
  border-color: var(--quest-border-user-bubble);
}

.quest-chat-bubble__meta {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quest-ink-subtle);
}

.quest-chat-bubble--user .quest-chat-bubble__meta {
  color: color-mix(in srgb, var(--quest-ink-inverse) 68%, transparent);
}

.quest-chat-bubble__content {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--quest-ink-body);
}

.quest-chat-bubble--user .quest-chat-bubble__content {
  color: var(--quest-ink-emphasis);
}

.quest-chat-card {
  width: min(100%, 560px);
  padding: 16px;
  border: 1px solid var(--quest-border-faint);
  background: color-mix(in srgb, var(--quest-surface-card-soft) 94%, white);
  box-shadow: 0 16px 34px rgba(63, 56, 42, 0.06);
}

.quest-chat-card--plan {
  background: linear-gradient(180deg, color-mix(in srgb, var(--quest-surface-card) 94%, white), color-mix(in srgb, var(--quest-surface-panel-create-end) 88%, white));
}

.quest-chat-card--error {
  background: var(--quest-surface-error);
  border-color: var(--quest-border-error);
}

.quest-chat-card__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quest-ink-subtle);
}

.quest-chat-card__title {
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--quest-ink-emphasis);
}

.quest-chat-card__hint {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--quest-ink-soft);
}

.quest-chat-inline-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

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

.quest-chat-plan-metric {
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(39, 41, 38, 0.05);
}

.quest-chat-plan-metric span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8378;
}

.quest-chat-plan-metric strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: #1d261f;
}

.quest-chat-plan-steps {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.quest-chat-step-group {
  display: grid;
  gap: 8px;
}

.quest-chat-step-group__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8378;
}

.quest-chat-step-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.quest-chat-step-row__copy {
  min-width: 0;
}

.quest-chat-step-row__copy strong {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: #1f2b21;
}

.quest-chat-step-row__copy p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #6f685e;
}

.quest-chat-step-row__reward {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(184, 136, 30, 0.12);
  color: #9a6d09;
  font-size: 12px;
  font-weight: 800;
}

.quest-chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: 6px;
  padding: 16px 20px calc(16px + var(--safe-area-bottom));
  border-top: 1px solid var(--quest-border-faint);
  background: var(--quest-surface-composer);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.quest-chat-composer--actions {
  display: grid;
  gap: 12px;
}

.quest-chat-composer__context {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.quest-chat-composer__context strong {
  font-size: 14px;
  color: color-mix(in srgb, var(--quest-ink-body) 92%, black);
}

.quest-chat-composer__context span {
  font-size: 12px;
  line-height: 1.5;
  color: var(--quest-ink-muted);
}

.quest-chat-input {
  display: block;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--quest-border-soft) 82%, white);
  background: var(--quest-surface-input);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    transform 220ms var(--quest-ease-out-quart),
    border-color 180ms ease,
    box-shadow 220ms var(--quest-ease-out-quart),
    background-color 180ms ease;
}

.quest-chat-input textarea {
  width: 100%;
  min-height: 72px;
  max-height: 160px;
  padding: 16px 18px;
  border: none;
  background: transparent;
  resize: vertical;
  font-size: 15px;
  line-height: 1.6;
  color: var(--quest-ink-emphasis);
}

.quest-chat-input textarea::placeholder {
  color: color-mix(in srgb, var(--quest-ink-subtle) 84%, white);
}

.quest-chat-input textarea:focus {
  outline: none;
}

.quest-primary-btn:focus-visible,
.quest-secondary-btn:focus-visible,
.quest-role-card:focus-visible,
.quest-field input:focus-visible,
.quest-field textarea:focus-visible,
.quest-field select:focus-visible,
.quest-chat-input textarea:focus-visible,
.quest-choice-chip:focus-within,
.quest-segmented__item:focus-within,
.quest-period-chip:focus-within {
  outline: 2px solid var(--quest-focus-ring);
  outline-offset: 3px;
}

.quest-chat-input:focus-within {
  transform: translateY(-1px);
  border-color: var(--quest-border-interactive-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 3px var(--quest-focus-shadow);
}

.quest-chat-composer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quest-chat-thinking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
}

.quest-chat-thinking span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #6f786c;
  opacity: 0.28;
  animation: questChatThinking 1.1s infinite ease-in-out;
}

.quest-chat-thinking span:nth-child(2) {
  animation-delay: 0.14s;
}

.quest-chat-thinking span:nth-child(3) {
  animation-delay: 0.28s;
}

.quest-chat-card .quest-question-stack {
  margin-top: 14px;
}

.quest-chat-card .quest-question-card {
  background: var(--quest-surface-card-tint);
}

@keyframes questChatThinking {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.24;
  }
  40% {
    transform: translateY(-3px);
    opacity: 0.84;
  }
}

.quest-calibration-block {
  margin-top: 18px;
}

.quest-calibration-block__label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--quest-ink-secondary);
}

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

.quest-segmented__item,
.quest-period-chip {
  position: relative;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--quest-border-interactive);
  background: var(--quest-surface-input);
}

.quest-segmented__item input,
.quest-period-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quest-segmented__item span,
.quest-period-chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--quest-ink-chip);
}

.quest-segmented__item.is-active,
.quest-period-chip.is-active {
  border-color: color-mix(in srgb, var(--quest-border-interactive-strong) 92%, white);
  background: linear-gradient(135deg, color-mix(in srgb, var(--quest-surface-chip-active-start) 98%, white), color-mix(in srgb, var(--quest-surface-chip-active-end) 96%, white));
}

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

.quest-plan-step-editor p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #5f6f63;
}

.quest-step-group--review .quest-plan-step-editor {
  margin-top: 10px;
}

.quest-ledger {
  width: min(100%, 760px);
  padding: 26px 18px 20px;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(252, 249, 244, 0.98), rgba(246, 241, 234, 0.98));
  border: 1px solid rgba(27, 28, 26, 0.08);
  box-shadow:
    0 26px 54px rgba(52, 46, 35, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.quest-ledger::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.6), transparent 24%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.012), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.quest-ledger__top,
.quest-ledger__body,
.quest-ledger__archive {
  position: relative;
  z-index: 1;
}

.quest-ledger__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.quest-ledger__date strong {
  display: block;
  font-family: "Newsreader", "Lora", serif;
  font-style: italic;
  font-size: 38px;
  line-height: 0.95;
  color: #182114;
  letter-spacing: -0.04em;
}

.quest-ledger__eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a8378;
}

.quest-ledger__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.quest-ledger__action {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(27, 28, 26, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #495548;
  font-size: 13px;
  font-weight: 700;
}

.quest-ledger__action--primary {
  background: #182114;
  color: #fff;
  border-color: #182114;
}

.quest-ledger__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  margin-bottom: 14px;
}

.quest-ledger__chip {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(228, 226, 222, 0.82);
  color: #5d6058;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quest-ledger__body,
.quest-ledger__archive-list {
  display: flex;
  flex-direction: column;
}

.quest-ledger-item + .quest-ledger-item {
  border-top: 1px dashed rgba(27, 28, 26, 0.09);
}

.quest-ledger-item {
  position: relative;
  border-radius: 28px;
  transform: translateY(0);
  transition:
    transform 240ms var(--quest-ease-out-quart),
    background-color 220ms ease,
    box-shadow 220ms var(--quest-ease-out-quart),
    border-color 220ms ease;
}

.quest-ledger-item.is-expanded {
  background: rgba(245, 243, 239, 0.84);
  border-left: 4px solid #182114;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(24, 33, 20, 0.04);
}

.quest-ledger-item:hover {
  transform: translateY(-1px);
}

.quest-ledger-item__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 12px;
  padding: 18px 4px 18px 14px;
  position: relative;
  z-index: 1;
}

.quest-ledger-item.is-expanded .quest-ledger-item__row {
  padding-left: 16px;
  padding-right: 12px;
}

.quest-ledger-item__expand {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(31, 34, 28, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  z-index: 2;
}

.quest-ledger-item__expand--ghost {
  background: transparent;
  border-color: transparent;
}

.quest-ledger-item__expand-icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: block;
}

.quest-ledger-item__expand-icon::before,
.quest-ledger-item__expand-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #5f6658;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.quest-ledger-item__expand-icon::before {
  width: 10px;
  height: 1.5px;
}

.quest-ledger-item__expand-icon::after {
  width: 1.5px;
  height: 10px;
}

.quest-ledger-item__expand-icon.is-expanded::after {
  opacity: 0;
}

.quest-ledger-item__main,
.quest-ledger-step__main {
  min-width: 0;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0;
  transition: transform 220ms var(--quest-ease-out-quart);
}

.quest-ledger-item__main:hover,
.quest-ledger-step__main:hover {
  transform: translateX(2px);
}

.quest-ledger-item__main strong,
.quest-ledger-step__main strong {
  display: block;
  color: #182114;
  font-size: 20px;
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 600;
  font-family: "Newsreader", "Lora", serif;
}

.quest-ledger-item__main span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #6f685f;
}

.quest-ledger-item__main em {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8c857a;
}

.quest-ledger-item__reward,
.quest-ledger-step__reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  background: rgba(204, 168, 48, 0.12);
  color: #735c00;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.quest-ledger-item__reward-icon {
  font-size: 15px;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.quest-ledger-item__complete,
.quest-ledger-step__complete {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(81, 99, 74, 0.24);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: none;
  transition:
    transform 180ms var(--quest-ease-out-quart),
    background-color 180ms ease,
    box-shadow 220ms var(--quest-ease-out-quart),
    border-color 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.quest-ledger-item__complete:hover,
.quest-ledger-step__complete:hover {
  transform: scale(1.04);
  border-color: rgba(81, 99, 74, 0.42);
}

.quest-ledger-item__complete::before,
.quest-ledger-step__complete::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
  transition: background-color 180ms ease, opacity 180ms ease;
  opacity: 0;
}

.quest-ledger-item__complete.is-completed,
.quest-ledger-item__complete[disabled],
.quest-ledger-step__complete.is-completed,
.quest-ledger-step__complete[disabled] {
  background: #51634a;
  border-color: #51634a;
  box-shadow: none;
}

.quest-ledger-item__complete.is-completed::before,
.quest-ledger-item__complete[disabled]::before,
.quest-ledger-step__complete.is-completed::before,
.quest-ledger-step__complete[disabled]::before {
  content: "check";
  width: auto;
  height: auto;
  background: transparent;
  opacity: 1;
  color: #d4e9c8;
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  line-height: 1;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.quest-ledger-item.is-completed .quest-ledger-item__main strong,
.quest-ledger-step.is-completed .quest-ledger-step__main strong {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: #878177;
}

.quest-ledger-item.is-completed .quest-ledger-item__main span {
  color: #9a9388;
}

.quest-ledger-item.is-completed {
  opacity: 0.72;
}

.quest-ledger-item__children {
  margin: 0 0 18px 16px;
  padding: 8px 0 0 18px;
  position: relative;
  z-index: 1;
  overflow: visible;
  border-left: 1px solid rgba(27, 28, 26, 0.08);
}

.quest-ledger-item__group + .quest-ledger-item__group {
  margin-top: 12px;
}

.quest-ledger-item__group-title {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8378;
}

.quest-ledger-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  align-items: start;
  gap: 8px;
  padding: 10px 0;
}

.quest-ledger-step + .quest-ledger-step {
  border-top: 1px solid rgba(27, 28, 26, 0.05);
}

.quest-ledger-step__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.quest-ledger-step__main strong {
  font-size: 16px;
  font-style: normal;
  text-align: left;
}

.quest-ledger-step__reward {
  min-height: 28px;
  padding-inline: 9px;
  font-size: 12px;
}

.quest-ledger-step__complete {
  width: 32px;
  height: 32px;
}

.quest-ledger__archive {
  margin-top: 18px;
}

.quest-ledger__divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 4px 10px;
}

.quest-ledger__divider span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a8378;
}

.quest-home {
  width: min(100%, 390px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quest-home-hero {
  position: relative;
  overflow: hidden;
  padding: 14px 16px 16px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #31402c 0%, #24311f 100%);
  box-shadow: 0 20px 40px rgba(26, 31, 23, 0.22);
  color: #f5f3ec;
}

.quest-home-hero__top,
.quest-home-hero__body,
.quest-home-archive__head,
.quest-home-card__footer,
.quest-home-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quest-home-hero__wordmark {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 243, 236, 0.72);
}

.quest-home-hero__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quest-home-hero__exchange,
.quest-home-archive__action {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(245, 243, 236, 0.14);
  border-radius: 999px;
  background: rgba(245, 243, 236, 0.08);
  color: #f5f3ec;
  font-size: 12px;
  font-weight: 600;
}

.quest-home-hero__add {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: #d0a52d;
  color: #1c1b16;
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}

.quest-home-hero__body {
  align-items: flex-end;
  margin-top: 18px;
}

.quest-home-hero__balance {
  min-width: 0;
}

.quest-home-hero__month,
.quest-home-hero__balance-label,
.quest-home-hero__stat span,
.quest-home-card__meta,
.quest-home-archive__head span {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(245, 243, 236, 0.68);
}

.quest-home-hero__balance-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  transform-origin: left bottom;
}

.quest-home-hero__balance-row strong {
  font-family: "SFMono-Regular", "Roboto Mono", "Consolas", monospace;
  font-size: 44px;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.06em;
  color: #f5f3ec;
}

.quest-home-hero__balance-row span {
  font-family: "SFMono-Regular", "Roboto Mono", "Consolas", monospace;
  font-size: 20px;
  line-height: 1;
  color: #d0a52d;
}

.quest-home-hero__balance-label {
  margin-top: 4px;
}

.quest-home-hero__stats {
  display: grid;
  gap: 8px;
  min-width: 108px;
}

.quest-home-hero__stat {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(245, 243, 236, 0.06);
  border: 1px solid rgba(245, 243, 236, 0.08);
  transform-origin: left center;
}

.quest-home-hero__stat strong {
  display: block;
  margin-top: 3px;
  font-family: "SFMono-Regular", "Roboto Mono", "Consolas", monospace;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 600;
  color: #f0c04c;
}

.quest-home-hero__balance-row strong.is-token-bumping,
.quest-home-hero__stat strong.is-token-bumping {
  animation: questTokenBump 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes questTokenBump {
  0% {
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 rgba(240, 192, 76, 0);
  }
  35% {
    transform: translateY(-1px) scale(1.06);
    text-shadow: 0 0 18px rgba(240, 192, 76, 0.3);
  }
  100% {
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 rgba(240, 192, 76, 0);
  }
}

.quest-home-hero__balance-row.is-token-receiving,
.quest-home-hero__stat.is-token-receiving {
  animation: questTokenReceive 760ms var(--quest-ease-out-expo);
}

@keyframes questTokenReceive {
  0% {
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
  32% {
    transform: translateY(-2px) scale(1.045);
    filter: saturate(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}

.quest-token-flight {
  position: fixed;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(37, 49, 34, 0.94);
  color: #f7f2e8;
  border: 1px solid rgba(240, 192, 76, 0.22);
  box-shadow: 0 14px 28px rgba(24, 33, 20, 0.16);
  pointer-events: none;
  z-index: 1200;
  white-space: nowrap;
}

.quest-token-flight strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.quest-token-flight__spark {
  font-size: 12px;
  color: #f0c04c;
  animation: questTokenSpark 620ms var(--quest-ease-out-expo) infinite alternate;
}

@keyframes questTokenSpark {
  0% {
    transform: scale(0.92) rotate(-8deg);
    opacity: 0.72;
  }
  100% {
    transform: scale(1.08) rotate(8deg);
    opacity: 1;
  }
}

.quest-home-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 16px;
  background: #eae6dc;
  border: 1px solid rgba(28, 27, 22, 0.06);
}

.quest-home-filter__tab {
  min-height: 32px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #877f73;
  padding: 6px 4px;
  display: grid;
  place-items: center;
  gap: 1px;
  transform: translateY(0) scale(1);
  transition:
    transform 220ms var(--quest-ease-out-quart),
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 220ms var(--quest-ease-out-quart);
}

.quest-home-filter__tab span {
  font-size: 12px;
  line-height: 1.1;
  font-weight: 600;
}

.quest-home-filter__tab em {
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  color: inherit;
  opacity: 0.74;
}

.quest-home-filter__tab.is-active {
  background: #1c1b16;
  color: #f5f3ec;
  box-shadow: 0 6px 14px rgba(28, 27, 22, 0.14);
  transform: translateY(-1px);
}

.quest-home-filter__tab:hover {
  transform: translateY(-1px) scale(1.015);
}

.quest-home-filter__tab:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 120ms;
}

.quest-home-list,
.quest-home-archive__list {
  display: grid;
  gap: 10px;
}

.quest-home-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(206, 198, 182, 0.72);
  box-shadow: 0 8px 18px rgba(70, 61, 43, 0.06);
  transform: translateY(0) scale(1);
  transform-origin: center top;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition:
    transform 260ms var(--quest-ease-out-quart),
    box-shadow 260ms var(--quest-ease-out-quart),
    border-color 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease,
    filter 220ms ease;
}

.quest-home-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: #d0a52d;
}

.quest-home-card.is-type-daily::before {
  background: #94b06f;
}

.quest-home-card.is-type-one_time::before {
  background: #d0a52d;
}

.quest-home-card.is-type-habit::before {
  background: #9a8cf0;
}

.quest-home-card__main {
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  transition: transform 220ms var(--quest-ease-out-quart);
}

.quest-home-card__meta {
  margin-bottom: 8px;
  color: #7f776b;
}

.quest-home-card__type,
.quest-home-card__state,
.quest-home-card__progress {
  font-size: 11px;
  line-height: 1.3;
}

.quest-home-card__type {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f3efe5;
  color: #7a705f;
}

.quest-home-card__state {
  color: #9a9081;
}

.quest-home-card strong {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  color: #1c1b16;
  font-weight: 600;
}

.quest-home-card p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6f6658;
}

.quest-home-card__footer {
  margin-top: 10px;
  justify-content: flex-start;
}

.quest-home-card__progress {
  color: #9a9081;
}

.quest-home-card__reward {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(208, 165, 45, 0.12);
  color: #8b6816;
  font-size: 12px;
  font-weight: 700;
}

.quest-home-card__complete {
  align-self: start;
  width: 28px;
  height: 28px;
  margin-top: 4px;
  border-radius: 999px;
  border: 1.5px solid rgba(28, 27, 22, 0.14);
  background: #fffdf8;
  position: relative;
  overflow: visible;
  transform: scale(1);
  transition:
    transform 180ms var(--quest-ease-out-quart),
    background-color 180ms ease,
    box-shadow 220ms var(--quest-ease-out-quart),
    border-color 180ms ease;
}

.quest-home-card__complete::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: transparent;
}

.quest-home-card__complete.is-completed {
  background: #25311f;
  border-color: #25311f;
}

.quest-home-card__complete.is-completed::before {
  content: "\2713";
  inset: 0;
  display: grid;
  place-items: center;
  color: #f5f3ec;
  font-size: 14px;
  font-weight: 700;
}

.quest-home-card__complete[disabled]:not(.is-completed) {
  border-color: rgba(28, 27, 22, 0.14);
  background: #fffdf8;
  box-shadow: none;
  opacity: 0.72;
}

.quest-home-card.is-completed {
  opacity: 0.72;
  background: rgba(246, 241, 233, 0.9);
}

.quest-home-card.is-completed strong {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: #8f8678;
}

.quest-home-card.is-expanded {
  box-shadow: 0 14px 28px rgba(70, 61, 43, 0.08);
}

.quest-home-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(70, 61, 43, 0.1);
}

.quest-home-card:hover .quest-home-card__main {
  transform: translateX(2px);
}

.quest-home-card.is-ready {
  border-color: rgba(208, 165, 45, 0.5);
  background: rgba(255, 252, 244, 0.98);
}

.quest-home-card__actions {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
}

.quest-home-card__expand,
.quest-home-card__complete {
  width: 28px;
  height: 28px;
  padding: 0;
  margin-top: 0;
  align-self: auto;
}

.quest-home-card__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: #a49b8d;
  opacity: 0.9;
  transition: color 180ms ease, opacity 180ms ease, transform 220ms var(--quest-ease-out-quart);
}

.quest-home-card__expand:hover {
  color: #7e7668;
  opacity: 1;
}

.quest-home-card__expand-icon {
  font-size: 18px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 20;
  transition: transform 180ms ease;
}

.quest-home-card__expand.is-expanded {
  color: #6f675a;
}

.quest-home-card__expand.is-expanded .quest-home-card__expand-icon {
  transform: rotate(180deg);
}

.quest-home-card__expand--ghost {
  opacity: 0;
  pointer-events: none;
}

.quest-home-card__complete.is-ready {
  background: #d0a52d;
  border-color: #d0a52d;
}

.quest-home-card__complete.is-ready::before {
  inset: 6px;
  background: #1c1b16;
}

.quest-home-card__complete.is-completed::before {
  content: "\2713";
  background: transparent;
}

.quest-home-card__checklist {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.quest-home-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 0 0 10px;
  border-radius: 12px;
  background: rgba(243, 239, 229, 0.78);
  transform: translateX(0) scale(1);
  transition:
    transform 260ms var(--quest-ease-out-quart),
    background-color 180ms ease,
    opacity 180ms ease,
    box-shadow 220ms var(--quest-ease-out-quart);
}

.quest-home-step.is-completed {
  background: rgba(243, 239, 229, 0.46);
}

.quest-home-step.is-completing {
  animation: questStepSettle 460ms var(--quest-ease-out-expo);
}

@keyframes questStepSettle {
  0% {
    transform: translateX(0) scale(1);
  }
  40% {
    transform: translateX(3px) scale(0.992);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

.quest-home-step__title {
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #2a2822;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quest-home-step.is-completed .quest-home-step__title {
  color: #9a9081;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.quest-home-step__reward {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(208, 165, 45, 0.12);
  color: #8b6816;
  font-size: 11px;
  font-weight: 700;
}

.quest-home-step__reward--ghost {
  visibility: hidden;
}

.quest-home-step__complete {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(28, 27, 22, 0.08);
  position: relative;
  overflow: visible;
  transform: scale(1);
  transition:
    transform 180ms var(--quest-ease-out-quart),
    background-color 180ms ease,
    box-shadow 220ms var(--quest-ease-out-quart);
}

.quest-home-step__complete::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: #fffdf8;
}

.quest-home-card__complete::after,
.quest-home-step__complete::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(81, 99, 74, 0.26);
  opacity: 0;
  transform: scale(0.72);
  pointer-events: none;
}

.quest-home-step__complete.is-completed,
.quest-home-step__complete[disabled] {
  background: #31402c;
}

.quest-home-step__complete.is-completed::before,
.quest-home-step__complete[disabled]::before {
  content: "\2713";
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: #f5f3ec;
  font-size: 12px;
  font-weight: 700;
}

.quest-check-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  opacity: 0;
  pointer-events: none;
}

.quest-check-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
}

.quest-home-card__complete .quest-check-icon,
.quest-home-step__complete .quest-check-icon {
  color: #f5f3ec;
}

.quest-home-card__complete.is-completing::before,
.quest-home-card__complete.is-completed::before,
.quest-home-step__complete.is-completing::before,
.quest-home-step__complete.is-completed::before,
.quest-home-step__complete[disabled]::before {
  content: "";
}

.quest-home-card__complete.is-completing .quest-check-icon,
.quest-home-card__complete.is-completed .quest-check-icon,
.quest-home-step__complete.is-completing .quest-check-icon,
.quest-home-step__complete.is-completed .quest-check-icon,
.quest-home-step__complete[disabled] .quest-check-icon {
  opacity: 1;
}

.quest-home-card__complete.is-completing .quest-check-icon path,
.quest-home-step__complete.is-completing .quest-check-icon path {
  animation: questCheckDraw 280ms var(--quest-ease-out-expo) forwards;
}

.quest-home-card__complete.is-completed .quest-check-icon path,
.quest-home-step__complete.is-completed .quest-check-icon path,
.quest-home-step__complete[disabled] .quest-check-icon path {
  stroke-dashoffset: 0;
}

.quest-home-card__main strong,
.quest-home-step__title-text {
  position: relative;
}

.quest-home-card__main strong::after,
.quest-home-step__title-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 1.5px;
  background: rgba(143, 134, 120, 0.78);
  transform: scaleX(0) translateY(-1px);
  transform-origin: left;
  opacity: 0;
  transition:
    transform 320ms var(--quest-ease-out-quart),
    opacity 120ms ease;
}

.quest-home-card.is-finishing {
  transform: translate3d(0, 6px, 0) scale(0.988);
  opacity: 0.78;
  filter: saturate(0.68) blur(0.2px);
  box-shadow: 0 18px 30px rgba(70, 61, 43, 0.08);
  transition:
    transform 420ms cubic-bezier(0.18, 1, 0.32, 1),
    box-shadow 420ms cubic-bezier(0.18, 1, 0.32, 1),
    border-color 180ms ease,
    background-color 180ms ease,
    opacity 320ms ease,
    filter 320ms ease;
}

.quest-home-card.is-finishing strong,
.quest-home-card.is-finishing p,
.quest-home-card.is-finishing .quest-home-card__progress,
.quest-home-card.is-finishing .quest-home-card__reward,
.quest-home-step.is-completing .quest-home-step__title,
.quest-home-step.is-completed .quest-home-step__title {
  color: #9a9081;
}

.quest-home-card.is-finishing strong::after,
.quest-home-step.is-completing .quest-home-step__title-text::after,
.quest-home-step.is-completed .quest-home-step__title-text::after {
  opacity: 1;
  transform: scaleX(1) translateY(0);
}

@keyframes questCheckDraw {
  0% {
    stroke-dashoffset: 18;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes questCheckHalo {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  30% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: scale(1.42);
  }
}

.quest-home-card__complete:hover,
.quest-home-step__complete:hover {
  transform: scale(1.05);
}

.quest-home-card__complete:active,
.quest-home-step__complete:active {
  transform: scale(0.96);
  transition-duration: 120ms;
}

.quest-home-card__complete.is-completing::after,
.quest-home-step__complete.is-completing::after {
  animation: questCheckHalo 520ms var(--quest-ease-out-expo);
}

.quest-home-archive {
  padding: 12px 14px 14px;
  border-radius: 20px;
  background: rgba(237, 233, 223, 0.72);
  border: 1px solid rgba(206, 198, 182, 0.72);
}

.quest-home-archive.is-receiving {
  animation: questArchiveReceive 720ms var(--quest-ease-out-expo);
}

@keyframes questArchiveReceive {
  0% {
    transform: translateY(0);
    box-shadow: none;
  }
  36% {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(70, 61, 43, 0.08);
  }
  100% {
    transform: translateY(0);
    box-shadow: none;
  }
}

.quest-home-archive__head span {
  color: #817969;
}

.quest-home-archive__head strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.35;
  color: #1c1b16;
  font-weight: 600;
}

.quest-home-archive__action {
  min-height: 30px;
  color: #2a3525;
  border-color: rgba(42, 53, 37, 0.12);
  background: rgba(255, 255, 255, 0.56);
}

.quest-home__empty {
  background: rgba(255, 255, 255, 0.56);
  border: 1px dashed rgba(28, 27, 22, 0.08);
}

.quest-empty-state--ledger {
  background: rgba(255, 255, 255, 0.48);
  border: 1px dashed rgba(27, 28, 26, 0.08);
}

@media (max-width: 360px) {
  .quest-content {
    padding-inline: 12px;
  }

  .quest-readonly-grid {
    grid-template-columns: 1fr;
  }

  .quest-hero--compact {
    flex-direction: column;
    align-items: stretch;
  }

  .quest-segmented,
  .quest-period-grid {
    grid-template-columns: 1fr;
  }

  .quest-choice-grid {
    grid-template-columns: 1fr;
  }

  .quest-detail-actions__secondary {
    grid-template-columns: 1fr;
  }

  .quest-ledger {
    padding-inline: 14px;
  }

  .quest-ledger__top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .quest-ledger__controls,
  .quest-ledger__meta {
    width: 100%;
  }

  .quest-ledger-item__row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
  }

  .quest-ledger-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 32px;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
  }

  .quest-ledger-step__main,
  .quest-ledger-item__main {
    width: 100%;
    min-width: 0;
  }

  .quest-ledger-step__main strong,
  .quest-ledger-item__main strong {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .quest-home {
    width: 100%;
  }

  .quest-home-hero__body {
    flex-direction: column;
    align-items: flex-start;
  }

  .quest-home-hero__stats {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quest-home-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quest-chat-stage__hero,
  .quest-chat-role-strip,
  .quest-chat-thread,
  .quest-chat-composer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .quest-chat-stage__hero strong {
    font-size: 28px;
  }

  .quest-chat-role-strip__list {
    grid-auto-columns: minmax(156px, 1fr);
  }

  .quest-chat-plan-grid {
    grid-template-columns: 1fr;
  }

.quest-chat-step-row {
  flex-direction: column;
  }
}

.quest-chat-stage {
  gap: 10px;
}

.quest-chat-stage__hero {
  display: none;
}

.quest-chat-role-strip,
.quest-chat-role-strip--empty {
  padding: 0 16px 2px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.quest-chat-role-strip__head {
  margin-bottom: 8px;
}

.quest-chat-role-strip__list {
  grid-auto-columns: max-content;
  gap: 8px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.quest-role-card {
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 18px rgba(63, 56, 42, 0.04);
  transform: translateY(0) scale(1);
  transition:
    transform 240ms var(--quest-ease-out-quart),
    box-shadow 240ms var(--quest-ease-out-quart),
    background-color 180ms ease,
    border-color 180ms ease;
}

.quest-role-card:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 12px 22px rgba(63, 56, 42, 0.08);
}

.quest-role-card__copy span {
  display: none;
}

.quest-chat-avatar {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.quest-chat-thread {
  gap: 12px;
  padding: 0 16px 8px;
  -webkit-overflow-scrolling: touch;
}

.quest-chat-row {
  gap: 0;
}

.quest-chat-bubble {
  max-width: min(82%, 460px);
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 22px rgba(63, 56, 42, 0.05);
}

.quest-chat-row--assistant .quest-chat-bubble,
.quest-chat-row--assistant .quest-chat-card {
  border-top-left-radius: 12px;
}

.quest-chat-row--user .quest-chat-bubble,
.quest-chat-row--user .quest-chat-card {
  border-top-right-radius: 12px;
}

.quest-chat-bubble--user {
  background: rgba(243, 239, 231, 0.96);
  border-color: rgba(44, 58, 40, 0.18);
  box-shadow: 0 10px 22px rgba(44, 58, 40, 0.06);
}

.quest-chat-bubble__meta {
  display: none;
}

.quest-chat-bubble__content {
  margin-top: 0;
}

.quest-chat-bubble--user .quest-chat-bubble__content {
  color: #1f2b21;
}

.quest-chat-card {
  width: min(100%, 640px);
  padding: 15px;
  border-radius: 22px;
  box-shadow: 0 12px 24px rgba(63, 56, 42, 0.05);
}

.quest-chat-card__title {
  margin-top: 0;
  font-size: 16px;
}

.quest-chat-card__hint {
  margin-top: 8px;
}

.quest-chat-plan-grid {
  gap: 8px;
}

.quest-chat-plan-metric {
  padding: 11px 12px;
}

.quest-chat-composer {
  margin-top: 0;
  padding: 14px 16px calc(14px + var(--safe-area-bottom));
  border-top: none;
  background: rgba(248, 243, 234, 0.94);
  box-shadow: 0 -12px 24px rgba(63, 56, 42, 0.06);
}

.quest-chat-composer__context {
  display: none;
}

.quest-chat-input textarea {
  min-height: 64px;
  padding: 15px 16px;
}

.quest-chat-composer__actions {
  justify-content: flex-end;
}

@media (max-width: 360px) {
  .quest-chat-role-strip,
  .quest-chat-role-strip--empty,
  .quest-chat-thread,
  .quest-chat-composer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .quest-chat-bubble {
    max-width: 88%;
  }

  .quest-role-card {
    min-height: 52px;
  }
}

@media (max-width: 480px) {
  .quest-section--detail-overview,
  .quest-section--detail-plan,
  .quest-section--detail-steps {
    border-radius: 24px;
  }

  .quest-detail-actions__secondary {
    grid-template-columns: 1fr;
  }
}

.quest-chat-stage--create {
  width: min(100%, 720px);
  margin: 0 auto;
  gap: 12px;
}

.quest-chat-stage--create .quest-chat-stage__hero {
  display: none;
}

.quest-create-panel {
  border-radius: 28px;
  background: color-mix(in srgb, var(--quest-surface-card) 94%, white);
  border: 1px solid var(--quest-border-soft);
  box-shadow:
    0 14px 30px rgba(63, 56, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  overflow: hidden;
}

.quest-chat-stage--create .quest-chat-role-strip,
.quest-chat-stage--create .quest-chat-role-strip--empty {
  padding: 2px 2px 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.quest-chat-stage--create .quest-chat-role-strip__head {
  margin-bottom: 8px;
  padding: 0 14px;
}

.quest-chat-stage--create .quest-chat-role-strip__list {
  grid-auto-columns: 148px;
  gap: 10px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 4px 14px;
  scroll-snap-type: x proximity;
}

.quest-chat-stage--create .quest-role-card {
  min-height: 60px;
  padding: 10px 14px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--quest-surface-card-strong) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--quest-border-soft) 82%, white);
  box-shadow: none;
  scroll-snap-align: start;
}

.quest-chat-stage--create .quest-role-card.is-active {
  background: linear-gradient(180deg, var(--quest-surface-role-active-start), var(--quest-surface-role-active-end));
  border-color: var(--quest-border-active);
  box-shadow: 0 8px 18px rgba(44, 58, 40, 0.12);
}

.quest-chat-stage--create .quest-role-card.is-active .quest-role-card__copy strong,
.quest-chat-stage--create .quest-role-card.is-active .quest-role-card__copy span {
  color: var(--quest-ink-active-soft);
}

.quest-chat-stage--create .quest-role-card__copy {
  gap: 0;
}

.quest-chat-stage--create .quest-role-card__copy span {
  display: none;
}

.quest-chat-stage--create .quest-chat-avatar {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.quest-chat-stage--create .quest-chat-thread {
  gap: 14px;
  min-height: 156px;
  padding: 16px 18px 12px;
  align-items: stretch;
}

.quest-chat-stage--create .quest-chat-row {
  gap: 0;
}

.quest-chat-stage--create .quest-chat-row--assistant {
  justify-content: flex-start;
}

.quest-chat-stage--create .quest-chat-row--user {
  justify-content: flex-end;
}

.quest-chat-stage--create .quest-chat-bubble,
.quest-chat-stage--create .quest-chat-card {
  max-width: min(78%, 500px);
  border-radius: 22px;
}

.quest-chat-stage--create .quest-chat-row--assistant .quest-chat-bubble,
.quest-chat-stage--create .quest-chat-row--assistant .quest-chat-card {
  border-top-left-radius: 10px;
}

.quest-chat-stage--create .quest-chat-row--user .quest-chat-bubble,
.quest-chat-stage--create .quest-chat-row--user .quest-chat-card {
  border-top-right-radius: 10px;
}

.quest-chat-stage--create .quest-chat-bubble {
  padding: 15px 17px;
  background: color-mix(in srgb, var(--quest-surface-card-strong) 96%, white);
  border: 1px solid var(--quest-border-faint);
  box-shadow: none;
}

.quest-chat-stage--create .quest-chat-bubble--user {
  background: linear-gradient(180deg, var(--quest-surface-user-bubble-start), var(--quest-surface-user-bubble-end));
  border-color: var(--quest-border-user-bubble);
}

.quest-chat-stage--create .quest-chat-bubble__meta,
.quest-chat-stage--create .quest-chat-composer__context {
  display: none;
}

.quest-chat-stage--create .quest-chat-bubble__content {
  margin-top: 0;
  color: var(--quest-ink-emphasis);
}

.quest-chat-stage--create .quest-chat-card {
  width: min(100%, 620px);
  padding: 6px 0 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.quest-chat-stage--create .quest-chat-card--intro {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--quest-border-faint) 92%, white);
  border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--quest-surface-card-strong) 94%, white), color-mix(in srgb, var(--quest-surface-card) 92%, white));
}

.quest-chat-stage--create .quest-chat-card__title {
  margin-top: 0;
  font-size: 16px;
  line-height: 1.5;
}

.quest-chat-stage--create .quest-chat-card--error {
  padding: 14px 16px;
  border: 1px solid var(--quest-border-error);
  border-radius: 16px;
  background: color-mix(in srgb, var(--quest-surface-error) 82%, white);
}

.quest-create-question-list {
  display: grid;
  gap: 0;
  margin-top: 10px;
}

.quest-create-question {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--quest-border-faint) 88%, white);
}

.quest-create-question:first-child {
  padding-top: 0;
  border-top: none;
}

.quest-create-question > strong {
  font-size: 14px;
  line-height: 1.45;
  color: var(--quest-ink-emphasis);
}

.quest-create-starter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quest-create-starter-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--quest-surface-chip) 86%, white);
  border: 1px solid color-mix(in srgb, var(--quest-border-interactive) 72%, white);
  color: var(--quest-ink-chip);
  font-size: 12px;
  font-weight: 700;
}

.quest-chat-stage--create .quest-chat-composer {
  margin-top: 0;
  padding: 14px 18px calc(16px + var(--safe-area-bottom));
  border-top: 1px solid var(--quest-border-faint);
  background: color-mix(in srgb, var(--quest-surface-card) 98%, white);
  box-shadow: none;
}

.quest-chat-stage--create .quest-chat-input {
  border-radius: 22px;
  background: color-mix(in srgb, var(--quest-surface-card-strong) 96%, white);
}

.quest-chat-stage--create .quest-chat-input textarea {
  min-height: 68px;
  padding: 17px 18px;
  resize: none;
}

.quest-chat-stage--create .quest-chat-composer__actions {
  justify-content: flex-end;
  margin-top: 12px;
}

.quest-chat-stage--create .quest-primary-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.quest-chat-stage--create .quest-secondary-btn {
  background: color-mix(in srgb, var(--quest-surface-card-soft) 84%, white);
}

@media (max-width: 480px) {
  .quest-chat-stage--create .quest-chat-role-strip__list {
    grid-auto-columns: minmax(136px, 68vw);
    gap: 8px;
    padding-right: 28px;
  }

  .quest-chat-stage--create .quest-chat-thread,
  .quest-chat-stage--create .quest-chat-composer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .quest-chat-stage--create .quest-chat-bubble,
  .quest-chat-stage--create .quest-chat-card {
    max-width: 84%;
  }

  .quest-chat-stage--create .quest-chat-card--intro {
    max-width: 100%;
  }

  .quest-chat-stage--create .quest-chat-composer__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .quest-chat-stage--create .quest-chat-composer__actions .quest-primary-btn {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quest-app:not(.quest-motion-debug--force) .quest-header,
  .quest-app:not(.quest-motion-debug--force) .quest-chat-composer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .quest-app:not(.quest-motion-debug--force) .quest-chat-role-strip__list,
  .quest-app:not(.quest-motion-debug--force) .quest-chat-stage--create .quest-chat-role-strip__list {
    scroll-snap-type: none;
  }

  .quest-app:not(.quest-motion-debug--force) .quest-chat-stage--create .quest-role-card,
  .quest-app:not(.quest-motion-debug--force) .quest-chat-stage--create .quest-chat-bubble,
  .quest-app:not(.quest-motion-debug--force) .quest-chat-stage--create .quest-chat-card,
  .quest-app:not(.quest-motion-debug--force) .quest-home-hero__balance-row,
  .quest-app:not(.quest-motion-debug--force) .quest-home-hero__stat,
  .quest-app:not(.quest-motion-debug--force) .quest-home-card,
  .quest-app:not(.quest-motion-debug--force) .quest-home-step,
  .quest-app:not(.quest-motion-debug--force) .quest-home-filter__tab,
  .quest-app:not(.quest-motion-debug--force) .quest-role-card,
  .quest-app:not(.quest-motion-debug--force) .quest-chat-input,
  .quest-app:not(.quest-motion-debug--force) .quest-home-archive,
  .quest-app:not(.quest-motion-debug--force) .quest-primary-btn,
  .quest-app:not(.quest-motion-debug--force) .quest-secondary-btn,
  .quest-app:not(.quest-motion-debug--force) .quest-home-card__complete,
  .quest-app:not(.quest-motion-debug--force) .quest-home-step__complete,
  .quest-app:not(.quest-motion-debug--force) .quest-ledger-item__complete,
  .quest-app:not(.quest-motion-debug--force) .quest-ledger-step__complete,
  .quest-app:not(.quest-motion-debug--force) .quest-home-card__expand-icon,
  .quest-app:not(.quest-motion-debug--force) .quest-ledger-item__expand-icon,
  .quest-app:not(.quest-motion-debug--force) .quest-token-flight__spark,
  .quest-app:not(.quest-motion-debug--force) .quest-chat-thinking span {
    animation: none !important;
    transition: none !important;
  }
}

.quest-chat-stage--create .quest-primary-btn,
.quest-chat-stage--create .quest-secondary-btn {
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
}

.quest-chat-stage--create .quest-field textarea,
.quest-chat-stage--create .quest-chat-input textarea {
  font-size: 15px;
  line-height: 1.6;
}

.quest-chat-stage--create .quest-choice-chip,
.quest-chat-stage--create .quest-question-card,
.quest-chat-stage--create .quest-period-chip,
.quest-chat-stage--create .quest-segmented__item {
  border-radius: 18px;
}

@media (max-width: 360px) {
  .quest-chat-stage--create {
    gap: 12px;
  }

  .quest-chat-stage--create .quest-chat-role-strip,
  .quest-chat-stage--create .quest-chat-role-strip--empty,
  .quest-chat-stage--create .quest-chat-thread,
  .quest-chat-stage--create .quest-chat-composer,
  .quest-chat-stage--create .quest-chat-role-strip__head,
  .quest-chat-stage--create .quest-chat-role-strip__list {
    padding-left: 12px;
    padding-right: 12px;
  }

  .quest-chat-stage--create .quest-chat-bubble,
  .quest-chat-stage--create .quest-chat-card {
    max-width: 90%;
  }

  .quest-chat-stage--create .quest-role-card {
    min-height: 54px;
    padding-inline: 12px;
  }

  .quest-chat-stage--create .quest-chat-thread {
    padding-top: 14px;
  }
}

.token-workbench[data-v-5694136f] {
  container-type: inline-size;
  --token-surface-app: rgba(250, 252, 255, 0.94);
  --token-surface-panel:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 253, 0.95));
  --token-surface-soft:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 249, 253, 0.93));
  --token-surface-muted: rgba(244, 248, 252, 0.82);
  --token-border-strong: rgba(181, 193, 212, 0.42);
  --token-border-soft: rgba(190, 201, 218, 0.3);
  --token-border-faint: rgba(203, 214, 228, 0.24);
  --token-shadow-panel:
    0 10px 24px rgba(123, 139, 163, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --token-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  --token-text-strong: rgba(29, 40, 58, 0.98);
  --token-text-body: rgba(48, 62, 84, 0.92);
  --token-text-muted: rgba(82, 97, 120, 0.86);
  --token-text-soft: rgba(97, 110, 131, 0.78);
  --token-accent-primary: rgba(90, 118, 167, 0.88);
  --token-accent-up: rgba(164, 123, 86, 0.74);
  --token-accent-down: rgba(86, 129, 108, 0.76);
  --token-accent-flat: rgba(109, 126, 156, 0.66);
  --token-accent-risk: rgba(168, 109, 91, 0.78);
  --token-accent-warn: rgba(171, 132, 88, 0.78);
  --token-accent-healthy: rgba(95, 135, 110, 0.76);
  --token-radius-lg: 15px;
  --token-radius-md: 12px;
  --token-radius-sm: 10px;
  --token-composition-system:
    linear-gradient(135deg, rgba(98, 124, 167, 0.8), rgba(125, 147, 187, 0.66));
  --token-composition-lorebook:
    linear-gradient(135deg, rgba(94, 138, 133, 0.76), rgba(126, 164, 156, 0.62));
  --token-composition-history:
    linear-gradient(135deg, rgba(161, 130, 88, 0.74), rgba(192, 160, 118, 0.6));
  --token-composition-input:
    linear-gradient(135deg, rgba(117, 119, 169, 0.78), rgba(148, 149, 194, 0.66));
}
.token-dashboard[data-v-5694136f] {
  display: grid;
  gap: 7px;
  padding: 9px 11px 10px;
  border: 1px solid var(--token-border-strong);
  border-radius: var(--token-radius-lg);
  background: var(--token-surface-panel), var(--token-surface-app);
  box-shadow: var(--token-shadow-panel);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.token-dashboard-head[data-v-5694136f] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.94fr);
  gap: 6px 10px;
  align-items: start;
}
.token-overview-meta[data-v-5694136f] {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  align-items: center;
}
.token-workbench-stage[data-v-5694136f] {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.03em;
}
.token-workbench-stage.is-verified[data-v-5694136f] {
  border-color: rgba(113, 150, 124, 0.22);
  background: rgba(91, 129, 105, 0.08);
  color: rgba(67, 96, 77, 0.92);
}
.token-workbench-stage.is-calibrated[data-v-5694136f] {
  border-color: rgba(112, 136, 180, 0.2);
  background: rgba(99, 122, 168, 0.09);
  color: rgba(61, 80, 117, 0.92);
}
.token-workbench-stage.is-estimated[data-v-5694136f] {
  border-color: rgba(173, 141, 102, 0.22);
  background: rgba(173, 136, 88, 0.09);
  color: rgba(121, 87, 47, 0.92);
}
.token-workbench-timestamp[data-v-5694136f],
.token-overview-chip[data-v-5694136f] {
  color: var(--token-text-soft);
  font-size: 0.7rem;
}
.token-overview-note[data-v-5694136f] {
  margin: 0;
  max-width: 28ch;
  justify-self: end;
  align-self: center;
  color: var(--token-text-soft);
  font-size: 0.72rem;
  line-height: 1.42;
  text-align: right;
}
.token-summary-strip[data-v-5694136f] {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}
.token-summary-card[data-v-5694136f],
.token-panel[data-v-5694136f],
.token-details[data-v-5694136f] {
  border: 1px solid var(--token-border-soft);
  background: var(--token-surface-soft), var(--token-surface-app);
}
.token-summary-card[data-v-5694136f] {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px 10px 9px;
  border-radius: var(--token-radius-md);
  box-shadow: var(--token-shadow-inset);
  overflow: hidden;
  --summary-accent: var(--token-accent-flat);
  --summary-value-color: var(--token-text-strong);
}
.token-summary-row[data-v-5694136f] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.token-summary-copy[data-v-5694136f] {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.token-summary-number[data-v-5694136f] {
  display: inline-flex;
  align-items: baseline;
  justify-self: end;
  gap: 3px;
  white-space: nowrap;
}
.token-summary-label[data-v-5694136f] {
  color: var(--token-text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.token-summary-value[data-v-5694136f] {
  color: var(--summary-value-color);
  font-size: 1.46rem;
  font-weight: 760;
  letter-spacing: -0.05em;
  line-height: 1;
}
.token-summary-value--compact[data-v-5694136f] {
  font-size: 1.36rem;
}
.token-summary-unit[data-v-5694136f] {
  color: var(--token-text-soft);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.token-summary-meta[data-v-5694136f] {
  max-width: 24ch;
  color: var(--token-text-soft);
  font-size: 0.72rem;
  line-height: 1.35;
}
.token-summary-card.is-primary[data-v-5694136f] {
  grid-row: span 2;
  padding-block: 10px;
  --summary-accent: var(--token-accent-primary);
  --summary-value-color: rgba(27, 39, 58, 0.99);
}
.token-summary-card.is-primary .token-summary-value[data-v-5694136f] {
  font-size: 2.26rem;
}
.token-summary-card.is-up[data-v-5694136f] {
  --summary-accent: var(--token-accent-up);
  --summary-value-color: rgba(132, 95, 63, 0.96);
}
.token-summary-card.is-down[data-v-5694136f] {
  --summary-accent: var(--token-accent-down);
  --summary-value-color: rgba(66, 101, 79, 0.96);
}
.token-summary-card.is-flat[data-v-5694136f],
.token-summary-card.is-unknown[data-v-5694136f] {
  --summary-accent: var(--token-accent-flat);
  --summary-value-color: rgba(73, 91, 121, 0.94);
}
.token-summary-card.is-risk[data-v-5694136f] {
  --summary-accent: var(--token-accent-risk);
  --summary-value-color: rgba(143, 90, 77, 0.96);
}
.token-summary-card.is-warn[data-v-5694136f] {
  --summary-accent: var(--token-accent-warn);
  --summary-value-color: rgba(138, 103, 61, 0.96);
}
.token-summary-card.is-healthy[data-v-5694136f] {
  --summary-accent: var(--token-accent-healthy);
  --summary-value-color: rgba(68, 106, 83, 0.94);
}
.token-budget-track[data-v-5694136f] {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(205, 216, 229, 0.32);
}
.token-budget-fill[data-v-5694136f] {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(111, 138, 180, 0.8), rgba(150, 170, 205, 0.74));
}
.token-visual-grid[data-v-5694136f] {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}
.token-panel[data-v-5694136f] {
  display: grid;
  gap: 7px;
  padding: 8px 9px;
  border-radius: var(--token-radius-md);
  box-shadow: var(--token-shadow-inset);
}
.token-panel-header h3[data-v-5694136f] {
  margin: 0;
  color: var(--token-text-body);
  font-size: 0.8rem;
  font-weight: 680;
  letter-spacing: 0.01em;
}
.token-panel-header p[data-v-5694136f] {
  margin: 2px 0 0;
  color: var(--token-text-soft);
  font-size: 0.71rem;
  line-height: 1.34;
}
.token-panel-empty[data-v-5694136f] {
  color: var(--token-text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}
.token-trend-chart[data-v-5694136f] {
  display: grid;
  align-items: end;
  gap: 4px;
  min-height: 82px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.token-trend-bar[data-v-5694136f] {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}
.token-trend-bar-value[data-v-5694136f],
.token-trend-bar-label[data-v-5694136f] {
  color: var(--token-text-soft);
  font-size: 0.64rem;
  text-align: center;
  line-height: 1.15;
}
.token-trend-bar-track[data-v-5694136f] {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 3px 0;
  border-radius: 9px;
  background: rgba(241, 245, 251, 0.9);
}
.token-trend-bar-fill[data-v-5694136f] {
  display: block;
  width: min(100%, 15px);
  min-width: 9px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(177, 187, 206, 0.64), rgba(130, 146, 179, 0.84));
  box-shadow: 0 4px 10px rgba(111, 128, 160, 0.12);
}
.token-trend-bar.is-previous .token-trend-bar-fill[data-v-5694136f] {
  background: linear-gradient(180deg, rgba(187, 197, 215, 0.7), rgba(145, 161, 191, 0.88));
}
.token-trend-bar.is-current .token-trend-bar-fill[data-v-5694136f] {
  background: linear-gradient(180deg, rgba(129, 149, 188, 0.82), rgba(83, 107, 154, 0.9));
}
.token-trend-bar.is-current .token-trend-bar-value[data-v-5694136f],
.token-trend-bar.is-current .token-trend-bar-label[data-v-5694136f] {
  color: var(--token-text-body);
  font-weight: 700;
}
.token-composition[data-v-5694136f] {
  display: grid;
  gap: 7px;
}
.token-composition-bar[data-v-5694136f] {
  display: flex;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(214, 224, 236, 0.42);
}
.token-composition-segment[data-v-5694136f] {
  display: block;
  height: 100%;
}
.token-composition-list[data-v-5694136f] {
  display: grid;
  gap: 4px;
}
.token-composition-row[data-v-5694136f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.token-composition-copy[data-v-5694136f] {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.token-composition-dot[data-v-5694136f] {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
.token-composition-name[data-v-5694136f] {
  color: var(--token-text-body);
  font-size: 0.72rem;
  font-weight: 620;
}
.token-composition-metric[data-v-5694136f] {
  display: flex;
  gap: 4px;
  align-items: baseline;
  color: var(--token-text-soft);
  font-size: 0.68rem;
}
.token-composition-metric strong[data-v-5694136f] {
  color: var(--token-text-strong);
  font-size: 0.74rem;
}
.token-details[data-v-5694136f] {
  padding: 8px 9px 9px;
  border-radius: var(--token-radius-md);
  box-shadow: var(--token-shadow-inset);
}
.token-details summary[data-v-5694136f] {
  cursor: pointer;
  color: var(--token-text-body);
  font-size: 0.78rem;
  font-weight: 680;
  list-style: none;
}
.token-details summary[data-v-5694136f]::-webkit-details-marker {
  display: none;
}
.token-detail-list[data-v-5694136f] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  margin-top: 8px;
}
.token-detail-row[data-v-5694136f] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--token-border-faint);
}
.token-detail-row[data-v-5694136f]:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.token-detail-main[data-v-5694136f] {
  display: grid;
  gap: 1px;
}
.token-detail-label[data-v-5694136f] {
  color: var(--token-text-soft);
  font-size: 0.7rem;
  font-weight: 620;
}
.token-detail-value[data-v-5694136f] {
  color: var(--token-text-strong);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.22;
}
.token-detail-hint[data-v-5694136f] {
  color: var(--token-text-soft);
  font-size: 0.68rem;
  line-height: 1.34;
  text-align: right;
}
.token-breakdown-list[data-v-5694136f] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: 8px;
}
.token-breakdown-row[data-v-5694136f] {
  display: grid;
  gap: 4px;
}
.token-breakdown-top[data-v-5694136f] {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--token-text-body);
  font-size: 0.7rem;
  font-weight: 620;
}
.token-breakdown-track[data-v-5694136f] {
  overflow: hidden;
  height: 5px;
  border-radius: 999px;
  background: rgba(211, 221, 234, 0.36);
}
.token-breakdown-fill[data-v-5694136f] {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(104, 129, 168, 0.78), rgba(146, 166, 200, 0.74));
}
.token-breakdown-meta[data-v-5694136f] {
  color: var(--token-text-soft);
  font-size: 0.68rem;
}
.token-detail-section[data-v-5694136f] {
  display: grid;
  gap: 5px;
  margin-top: 9px;
}
.token-detail-section-header[data-v-5694136f] {
  color: var(--token-text-body);
  font-size: 0.72rem;
  font-weight: 680;
}
.token-detail-chip-list[data-v-5694136f] {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.token-detail-chip[data-v-5694136f] {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid var(--token-border-faint);
  border-radius: var(--token-radius-sm);
  background: rgba(249, 251, 254, 0.7);
}
.token-detail-chip-name[data-v-5694136f] {
  color: var(--token-text-body);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.3;
}
.token-detail-chip-meta[data-v-5694136f] {
  color: var(--token-text-soft);
  font-size: 0.66rem;
}
.token-empty-state[data-v-5694136f] {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 18px 10px 8px;
  text-align: center;
}
.token-empty-visual[data-v-5694136f] {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 54px;
}
.token-empty-bar[data-v-5694136f] {
  display: block;
  width: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(183, 195, 218, 0.44), rgba(137, 153, 184, 0.76));
}
.token-empty-bar.is-tall[data-v-5694136f] {
  height: 48px;
}
.token-empty-bar.is-mid[data-v-5694136f] {
  height: 34px;
}
.token-empty-bar.is-short[data-v-5694136f] {
  height: 22px;
}
.token-empty-title[data-v-5694136f] {
  color: var(--token-text-body);
  font-size: 0.92rem;
  font-weight: 700;
}
.token-empty-copy p[data-v-5694136f] {
  margin: 6px 0 0;
  color: var(--token-text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}
.token-workbench-expand-enter-active[data-v-5694136f],
.token-workbench-expand-leave-active[data-v-5694136f] {
  transition: opacity 180ms ease, transform 180ms ease;
  transform-origin: top center;
}
.token-workbench-expand-enter-from[data-v-5694136f],
.token-workbench-expand-leave-to[data-v-5694136f] {
  opacity: 0;
  transform: translateY(-4px);
}
@container (max-width: 560px) {
.token-dashboard-head[data-v-5694136f] {
    grid-template-columns: 1fr;
}
.token-overview-note[data-v-5694136f] {
    max-width: none;
    justify-self: start;
    text-align: left;
}
.token-summary-strip[data-v-5694136f] {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
.token-visual-grid[data-v-5694136f] {
    grid-template-columns: 1.02fr 0.98fr;
}
.token-summary-row[data-v-5694136f] {
    gap: 8px;
}
.token-detail-list[data-v-5694136f],
  .token-breakdown-list[data-v-5694136f] {
    grid-template-columns: 1fr;
    gap: 0;
}
.token-detail-row[data-v-5694136f] {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
}
.token-detail-hint[data-v-5694136f] {
    text-align: left;
}
}
@container (max-width: 420px) {
.token-summary-strip[data-v-5694136f],
  .token-visual-grid[data-v-5694136f],
  .token-detail-chip-list[data-v-5694136f] {
    grid-template-columns: 1fr;
}
.token-summary-card.is-primary[data-v-5694136f] {
    grid-row: auto;
}
}


.character-detail-page[data-v-3e73cb58] .character-quick-toggle-card {
  padding: 14px 16px;
  overflow: visible;
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-label {
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #262731;
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-switch-track {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  border: 1px solid rgba(57, 61, 74, 0.14);
  border-radius: 999px;
  background: rgba(108, 114, 129, 0.16);
  transition:
    background 180ms ease,
    border-color 180ms ease;
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 3px rgba(23, 25, 35, 0.14);
  transition: transform 180ms ease;
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-switch.is-enabled .character-quick-toggle-switch-track {
  border-color: rgba(70, 110, 84, 0.36);
  background: rgba(102, 147, 118, 0.46);
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-switch.is-enabled .character-quick-toggle-switch-thumb {
  transform: translateX(16px);
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-switch:disabled {
  cursor: default;
  opacity: 0.7;
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-help-btn {
  width: 18px;
  height: 18px;
  border-color: rgba(57, 61, 74, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: #7a8090;
}
@media (max-width: 420px) {
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-card {
    padding: 13px 14px;
}
.character-detail-page[data-v-3e73cb58] .character-quick-toggle-row {
    gap: 12px;
}
}