:root {
  color: #151515;
  background: #ffffff;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
}

.mobile-carousel {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  user-select: none;
}

.mobile-carousel::-webkit-scrollbar { display: none; }
.mobile-carousel { overflow-x: auto; overflow-y: hidden; touch-action: pan-y; }
.mobile-carousel[data-dragging="true"] { cursor: none; }
.mobile-carousel-content { display: flex; width: max-content; min-width: 100%; transform: translateX(var(--mobile-carousel-overdrag)); will-change: transform; }
.mobile-carousel-scrollbar { position: absolute; z-index: 4; inset: 0; opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
.mobile-carousel-scrollbar[data-visible="true"] { opacity: 1; }
.mobile-carousel-scrollbar-thumb { position: absolute; right: 4px; bottom: 4px; height: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }

body {
  min-width: 320px;
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.phone-stage {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 24px;
}

.device-menu-bar {
  position: absolute;
  z-index: 100;
  top: 18px;
  right: 18px;
  padding: 3px;
  border-radius: 12px;
}

.device-picker-trigger {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 34px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #151515;
  font: 600 14px/1 ui-sans-serif, system-ui, sans-serif;
}

.device-picker-trigger:hover,
.device-picker-trigger[data-state="open"] {
  background: rgba(0, 0, 0, 0.055);
}

.device-picker-trigger:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.72);
  outline-offset: 2px;
}

.device-picker-menu {
  z-index: 200;
  min-width: 168px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 4px 4px rgba(0, 0, 0, 0.05);
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  animation: device-menu-in 120ms ease-out;
}

.device-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 9px 0 10px;
  border-radius: 8px;
  color: #181818;
  font: 500 14px/1 ui-sans-serif, system-ui, sans-serif;
  outline: none;
  user-select: none;
}

.device-picker-item[data-highlighted] {
  background: #f0f0f0;
}

.device-picker-item[data-state="checked"] {
  font-weight: 600;
}

.device-picker-check {
  display: grid;
  place-items: center;
  color: #181818;
}

@keyframes device-menu-in {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(-2px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.phone-scale-box {
  position: relative;
}

.phone-device {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
  -webkit-user-select: none;
  user-select: none;
}

.phone-bezel {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  -webkit-user-drag: none;
  pointer-events: none;
}

.device-screen {
  position: absolute;
  overflow: hidden;
  border-radius: 42px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: none;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

.device-camera {
  position: absolute;
  z-index: 75;
  display: block;
  border-radius: 50%;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.device-screen,
.device-screen * {
  cursor: none !important;
}

.device-screen img,
.keyboard-asset {
  -webkit-user-drag: none;
  user-select: none;
}

.device-screen input,
.device-screen textarea,
.device-screen select,
.device-screen option,
.device-screen [contenteditable="true"] {
  -webkit-user-select: auto;
  user-select: auto;
}

.device-screen:active,
.device-screen:active * {
  cursor: none !important;
}

.device-screen input,
.device-screen textarea,
.device-screen button,
.device-screen a,
.device-screen [role="button"] {
  cursor: none !important;
}

.device-screen[data-cursor-debug="true"],
.device-screen[data-cursor-debug="true"] * {
  cursor: default !important;
}

.device-screen *:focus,
.device-screen *:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.flow-stack,
.flow-scenes,
.flow-screen {
  position: absolute;
  inset: 0;
}

.mobile-app-viewport {
  position: absolute;
  inset: 0;
}

.mobile-app-viewport[data-platform="android"][data-keyboard-visible="false"] {
  bottom: var(--device-safe-area-bottom, 48px);
}

.flow-stack {
  --flow-header-height: 0px;
  --flow-header-content-height: 0px;
  --flow-header-safe-area: 0px;
  --flow-footer-height: 0px;
  --keyboard-height: 0px;
  overflow: hidden;
  background: transparent;
  touch-action: pan-y;
}

.flow-fixed-header {
  position: absolute;
  z-index: 12;
  top: 0;
  right: 0;
  left: 0;
  height: var(--flow-header-height);
  padding-top: var(--flow-header-safe-area);
  box-sizing: border-box;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

.flow-fixed-footer {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: var(--keyboard-height);
  left: 0;
  height: var(--flow-footer-height);
  background: transparent;
  transition: bottom 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.flow-scenes {
  top: var(--flow-header-height);
  bottom: 0;
  overflow: hidden;
}

.flow-screen {
  overflow: hidden;
  background: transparent;
  will-change: transform;
}

.mobile-page {
  position: absolute;
  inset: 0;
  --mobile-safe-area-height: var(--device-safe-area-bottom, 34px);
  --keyboard-height: 0px;
}

.mobile-page[data-keyboard-visible="true"] {
  --mobile-safe-area-height: 0px;
}

.mobile-app-viewport[data-platform="android"] .mobile-page {
  --mobile-safe-area-height: 0px;
}

.mobile-scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--keyboard-height);
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: none;
  user-select: none;
  transition: bottom 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-scroll[data-dragging="true"] {
  cursor: none;
}

.mobile-cursor {
  position: absolute;
  z-index: 80;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.7) 0 34%, rgba(255, 255, 255, 0.54) 58%, rgba(238, 238, 238, 0.48) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    inset 0 -5px 10px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.025);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 90ms ease,
    background 80ms ease,
    box-shadow 80ms ease;
  will-change: transform;
}

.mobile-cursor::before {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 32px;
  height: 17px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  content: "";
  pointer-events: none;
}

.mobile-cursor::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 1px 0 3px rgba(255, 255, 255, 0.28),
    inset -1px 0 3px rgba(0, 0, 0, 0.02);
  content: "";
  pointer-events: none;
}

.mobile-cursor-hotspot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 122, 255, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 0 0 3px rgba(0, 122, 255, 0.16);
  pointer-events: none;
}

.mobile-cursor-hotspot::before,
.mobile-cursor-hotspot::after {
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(0, 122, 255, 0.95);
  content: "";
  transform: translate(-50%, -50%);
}

.mobile-cursor-hotspot::before {
  width: 17px;
  height: 1px;
}

.mobile-cursor-hotspot::after {
  width: 1px;
  height: 17px;
}

.mobile-cursor[data-visible="true"] {
  opacity: 1;
}

.mobile-cursor[data-active="true"] {
  background:
    radial-gradient(circle at 50% 55%, rgba(232, 232, 232, 0.58) 0 30%, rgba(248, 248, 248, 0.5) 62%, rgba(255, 255, 255, 0.68) 100%);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.08),
    inset 0 -4px 8px rgba(255, 255, 255, 0.34),
    inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.mobile-cursor[data-active="true"]::before {
  background: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0));
}

.mobile-cursor[data-active="true"]::after {
  box-shadow:
    inset 0 5px 9px rgba(0, 0, 0, 0.045),
    inset 0 -3px 7px rgba(255, 255, 255, 0.28);
}

.mobile-scroll-content {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 0;
  will-change: transform;
}

.app-screen {
  background: #ffffff;
}

.mobile-scrollbar {
  position: absolute;
  z-index: 9;
  top: 4px;
  right: 5px;
  bottom: calc(var(--mobile-safe-area-height) + var(--keyboard-height) + 4px);
  width: 4px;
  opacity: 0;
  pointer-events: none;
  transition:
    bottom 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease;
}

.mobile-page[data-keyboard-dragging="true"] .mobile-scroll,
.mobile-page[data-keyboard-dragging="true"] .mobile-scrollbar,
.flow-stack[data-keyboard-dragging="true"] .flow-fixed-footer {
  transition: none;
}

.mobile-scrollbar[data-visible="true"] {
  opacity: 1;
}

.mobile-scrollbar-thumb {
  width: 4px;
  min-height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: background 120ms ease;
}

.status-bar {
  position: absolute;
  z-index: 72;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 54px;
  padding: 10px 34px 0 36px;
  background: transparent;
  color: #050505;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  pointer-events: none;
}

.device-screen[data-device="pixel-10"] .status-bar {
  align-items: start;
  height: auto;
  padding: 32px 32px 0;
  font-family: "Roboto", Arial, sans-serif;
}

.status-time {
  justify-self: start;
  min-width: 58px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

.status-indicators {
  display: flex;
  align-items: center;
  justify-self: end;
}

.status-indicator-svg {
  display: block;
}

.status-indicator-svg[data-platform="ios"] {
  width: 79px;
  height: 13px;
}

.status-indicator-svg[data-platform="android"] {
  width: 50px;
  height: 14px;
}

.device-screen[data-device="pixel-10"] .status-time {
  font-weight: 500;
  transform: translateY(2px);
}

.home-indicator-svg {
  position: absolute;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: var(--device-safe-area-bottom, 34px);
  pointer-events: none;
}

.android-navigation-bar {
  position: absolute;
  z-index: 70;
  bottom: -1px;
  left: -1px;
  display: block;
  width: 428px;
  height: var(--device-safe-area-bottom, 48px);
  pointer-events: none;
  -webkit-user-drag: none;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: 0;
}

h2 {
  font-size: 15px;
}

p {
  color: #555555;
  font-size: 14px;
  line-height: 1.45;
}

.field-label {
  color: #555555;
  font-size: 13px;
  font-weight: 800;
}

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

.mobile-field input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: #fff;
  color: #151515;
  padding: 0 12px;
  outline: 0;
}

.mobile-field input:focus {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: none;
}

.device-screen .mobile-field input:focus,
.device-screen .mobile-field input:focus-visible {
  border-color: rgba(0, 0, 0, 0.12);
  outline: 0 !important;
  box-shadow: none !important;
}

.sheet-overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
}

.bottom-sheet {
  position: absolute;
  z-index: 21;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.2);
  touch-action: none;
}

.sheet-handle-zone {
  display: grid;
  height: 30px;
  place-items: center;
  touch-action: none;
}

.sheet-handle {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: #c9c9c4;
}

.sheet-header {
  display: grid;
  gap: 4px;
  padding: 0 18px 14px;
}

.sheet-title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.sheet-description {
  margin: 0;
  color: #737373;
  font-size: 13px;
  line-height: 1.35;
}

.sheet-content {
  overflow: auto;
  padding: 0 18px 24px;
}

.keyboard-dock {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 339px;
  padding: 0;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  background: #d8d9de;
  box-shadow: none;
  pointer-events: none;
  will-change: transform;
}

.keyboard-dock[data-platform="android"] {
  border-radius: 0;
  background: #f3f2f6;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.08);
}

.keyboard-dock[data-visible="true"] {
  pointer-events: auto;
}

.keyboard-asset {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center bottom;
  -webkit-user-drag: none;
  pointer-events: none;
}

.keyboard-dock[data-platform="android"] .keyboard-asset {
  border-radius: 0;
  object-fit: fill;
}
:root {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

/* iOS Safari zooms in when input font-size < 16px and won't zoom back out.
   Force 16px minimum on all inputs in the mobile H5 shell.
   !important needed to override per-component rules defined later in this file. */
html.h5-mode input,
html.h5-mode textarea {
  font-size: max(16px, 1em) !important;
}

button {
  -webkit-tap-highlight-color: transparent;
}

/*
 * Xiaoyou ships as a full-screen H5/WebView surface. Keep the shared mobile
 * runtime and its portals mounted, but flatten the desktop preview shell.
 */
html.h5-mode,
html.h5-mode body,
html.h5-mode #root {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
}

html.h5-mode body {
  background: #eef0f8;
}

/* The H5 keeps touch/trackpad scrolling but uses no visible scroll tracks. */
html.h5-mode,
html.h5-mode * {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

html.h5-mode::-webkit-scrollbar,
html.h5-mode *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.h5-mode .mobile-scrollbar,
.h5-mode .mobile-carousel-scrollbar {
  display: none !important;
}

.h5-mode .phone-stage {
  display: block;
  width: min(100%, 480px);
  height: 100vh;
  height: 100dvh;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  background: #f8f9fd;
}

.h5-mode .phone-scale-box {
  width: 100% !important;
  height: 100% !important;
}

.h5-mode .phone-device {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.h5-mode .device-screen {
  --device-safe-area-bottom: env(safe-area-inset-bottom, 0px) !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: #f8f9fd;
  box-shadow: none;
  user-select: auto;
}

.h5-mode .device-menu-bar,
.h5-mode .phone-bezel,
.h5-mode .device-camera,
.h5-mode .status-bar,
.h5-mode .home-indicator-svg,
.h5-mode .android-navigation-bar,
.h5-mode .mobile-cursor,
.h5-mode .keyboard-dock {
  display: none !important;
}

.h5-mode .mobile-app-viewport,
.h5-mode .mobile-app-viewport[data-platform="android"][data-keyboard-visible="false"] {
  bottom: 0 !important;
}

.h5-mode .mobile-page,
.h5-mode .mobile-page[data-keyboard-visible="true"] {
  --keyboard-height: 0px !important;
  --mobile-safe-area-height: env(safe-area-inset-bottom, 0px) !important;
}

.h5-mode .mobile-scroll {
  bottom: 0 !important;
  transition: none;
}

.h5-mode .device-screen,
.h5-mode .device-screen * {
  cursor: auto !important;
}

.h5-mode .device-screen button,
.h5-mode .device-screen a,
.h5-mode .device-screen [role="button"] {
  cursor: pointer !important;
}

.h5-mode .xy-scroll-content,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-scroll-content {
  min-height: 100%;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

.h5-mode .xy-bottom-nav,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-bottom-nav {
  min-height: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

/* The shared runtime still tracks its simulated keyboard even though Xiaoling
   hides that keyboard in H5 mode. Let the real WebView visual viewport own the
   available height so a focused task textarea cannot lift and crop the sheet. */
.h5-mode .device-screen .bottom-sheet {
  bottom: 0 !important;
  min-height: 0;
  max-height: calc(100% - env(safe-area-inset-top, 0px) - 12px) !important;
}

.h5-mode .device-screen .sheet-handle-zone,
.h5-mode .device-screen .sheet-header {
  flex-shrink: 0;
}

.h5-mode .device-screen .sheet-header {
  padding-bottom: 12px;
}

.h5-mode .device-screen .sheet-content {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* The sheet owns its edge spacing; inner forms must not add a second inset. */
.h5-mode .sheet-content > :is(
  .xy-save-template-form,
  .xy-template-list,
  .xy-device-sheet,
  .xy-download-share-sheet,
  .xy-execution-logs-sheet,
  .xy-dh-preview-sheet
) {
  padding: 0;
}

.xy-app-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Scrolling belongs to MobileScroll. Focus must not pan every overlay. */
  overflow: clip;
  color: #171821;
  background:
    radial-gradient(circle at 82% 5%, rgba(112, 95, 255, 0.09), transparent 28%),
    #f8f9fd;
}

.xy-mobile-page {
  background: transparent;
}

.xy-scroll-content {
  min-height: 100%;
  padding: 43px 15px 82px;
}

.mobile-app-viewport[data-platform="android"] .xy-scroll-content {
  padding-top: 57px;
  padding-bottom: 76px;
}

.xy-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 9px;
}

.xy-brand-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
}

.xy-brand-mark {
  position: relative;
  display: grid;
  width: 45px;
  height: 45px;
  overflow: hidden;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(104, 86, 248, 0.16);
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff 0%, #eef1ff 100%);
  box-shadow: 0 8px 22px rgba(90, 72, 212, 0.13);
}

.xy-brand-mark img {
  width: 61px;
  height: 61px;
  object-fit: contain;
  transform: translateY(8px);
}

.xy-brand-lockup > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-brand-lockup strong {
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: -0.6px;
}

.xy-brand-lockup strong em {
  color: #6654ef;
  font-style: normal;
}

.xy-brand-lockup small {
  margin-top: 3px;
  color: #818493;
  font-size: 11px;
}

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

.xy-icon-button,
.xy-profile-button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #575a68;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(221, 224, 235, 0.92);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(47, 49, 80, 0.07);
}

.xy-profile-button {
  overflow: hidden;
  padding: 0;
}

.xy-profile-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xy-notice-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background: #ff445d;
  border: 2px solid white;
  border-radius: 50%;
}

.xy-truth-strip {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 5px 10px;
  color: #747787;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(225, 227, 238, 0.95);
  border-radius: 13px;
}

.xy-truth-strip > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-truth-strip i,
.xy-section-heading > div > span i {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #a6a9b5;
  border-radius: 50%;
}

.xy-truth-strip.is-real i,
.xy-section-heading > div > span.is-real i {
  background: #21c36a;
  box-shadow: 0 0 0 4px rgba(33, 195, 106, 0.1);
}

.xy-truth-strip.is-demo i {
  background: #775cff;
  box-shadow: 0 0 0 4px rgba(119, 92, 255, 0.1);
}

.xy-truth-strip strong {
  color: #6955ee;
  font-size: 10px;
  font-weight: 600;
}

.xy-view {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.xy-hero {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.92), transparent 28%),
    linear-gradient(132deg, #f3f2ff 0%, #e8efff 50%, #f2f0ff 100%);
  box-shadow: 0 18px 38px rgba(88, 82, 164, 0.09);
}

.xy-hero::after {
  position: absolute;
  right: 82px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  content: "";
  background: rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  filter: blur(3px);
}

.xy-hero-copy {
  position: relative;
  z-index: 3;
  width: 73%;
  padding: 12px 0 8px 15px;
}

.xy-hero h1 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.8px;
}

.xy-hero h1 svg {
  color: #6450eb;
}

.xy-hero p {
  width: 88%;
  margin: 0;
  color: #6f7281;
  font-size: 9px;
  line-height: 1.42;
}

.xy-hero-input {
  display: flex;
  width: calc(100% + 32px);
  min-height: 38px;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding: 3px 4px 3px 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(79, 76, 139, 0.07);
}

.xy-hero-input input {
  min-width: 0;
  height: 30px;
  flex: 1;
  color: #555866;
  font-size: 16px;
  line-height: 1.5;
  background: transparent;
  border: 0;
  outline: 0;
}

.xy-hero-input button {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, #7866ff, #5c43e9);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 9px 16px rgba(93, 67, 233, 0.26);
}

.xy-hero-mascot {
  position: absolute;
  z-index: 2;
  right: -9px;
  bottom: -1px;
  width: 110px;
  height: 110px;
  object-fit: contain;
  pointer-events: none;
}

.xy-bubble {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 66px;
  display: grid;
  width: 34px;
  height: 25px;
  place-items: center;
  color: #9589fb;
  background: white;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 9px 22px rgba(74, 70, 144, 0.09);
}

.xy-card {
  padding: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(224, 226, 237, 0.92);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(45, 49, 79, 0.055);
}

.xy-section-heading {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.xy-section-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.xy-section-heading > div > div,
.xy-section-heading > div:first-child:not(:last-child) {
  min-width: 0;
}

.xy-section-heading h2 {
  margin: 0;
  color: #1c1d26;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.xy-section-heading > div > span:not(.xy-mini-label) {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8b8e9b;
  font-size: 10px;
}

.xy-section-heading button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 2px;
  padding: 0 3px;
  color: #7c7f8d;
  background: transparent;
  border: 0;
  font-size: 11px;
}

.xy-section-heading > strong {
  color: #777a89;
  font-size: 11px;
}

.xy-device-section,
.xy-task-section {
  padding-right: 0;
}

.xy-device-section,
.xy-task-section {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 10px;
}

.xy-device-section .xy-section-heading,
.xy-task-section > .xy-section-heading {
  padding-right: 11px;
}

.xy-device-carousel {
  margin: 6px -1px 0;
}

.xy-device-track {
  display: flex;
  gap: 9px;
  padding: 2px 16px 4px 0;
}

.xy-device-card {
  width: 116px;
  min-height: 72px;
  flex: 0 0 auto;
  padding: 7px;
  text-align: left;
  background: white;
  border: 1px solid #ececf3;
  border-radius: 17px;
  box-shadow: 0 8px 20px rgba(55, 58, 92, 0.055);
}

.xy-device-name {
  display: flex;
  align-items: center;
  gap: 4px;
}

.xy-device-name .xy-platform-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.xy-device-name strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-device-name > span {
  padding: 2px 3px;
  color: #21a85d;
  background: #eaf9f0;
  border-radius: 6px;
  font-size: 7px;
}

.xy-device-card > p {
  margin: 4px 0 3px;
  color: #858896;
  font-size: 8px;
}

.xy-device-runtime {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.xy-device-runtime > span {
  display: flex;
  color: #9295a1;
  flex-direction: column;
  font-size: 7px;
}

.xy-device-runtime strong {
  margin-top: 2px;
  color: #6f7280;
  font-size: 8px;
  font-weight: 500;
}

.xy-progress-ring {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  background: conic-gradient(#7060f4 var(--progress), #edf0f6 0);
  border-radius: 50%;
}

.xy-progress-ring::before {
  width: 20px;
  height: 20px;
  content: "";
  background: white;
  border-radius: 50%;
}

.xy-progress-ring b {
  position: absolute;
  color: #6453ea;
  font-size: 7px;
  font-weight: 600;
}

.xy-platform-icon {
  display: grid;
  width: 38px;
  height: 38px;
  overflow: hidden;
  place-items: center;
  flex: 0 0 auto;
  color: var(--platform-color);
  background: var(--platform-soft);
  border-radius: 12px;
}

.xy-platform-icon.is-unknown {
  color: #777b89;
  background: #f0f1f4;
}

.xy-filter-carousel {
  margin: 5px 0 3px;
}

.xy-filter-carousel.is-subview {
  margin: 0;
}

.xy-filter-track {
  display: flex;
  min-width: max-content;
  gap: 6px;
  padding-right: 15px;
}

.xy-filter {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  color: #8a8d99;
  background: transparent;
  border: 0;
  border-radius: 16px;
  white-space: nowrap;
  font-size: 10px;
}

.xy-filter .xy-platform-icon {
  width: 21px;
  height: 21px;
  border-radius: 7px;
}

.xy-filter.is-active {
  color: white;
  background: linear-gradient(140deg, #7968ff, #5d43ed);
  box-shadow: 0 7px 15px rgba(99, 74, 238, 0.2);
}

.xy-task-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.xy-task-list.is-full {
  margin-top: 12px;
}

.xy-task-row {
  display: flex;
  width: 100%;
  min-height: 37px;
  align-items: center;
  gap: 9px;
  padding: 5px 4px 5px 7px;
  color: inherit;
  text-align: left;
  background: white;
  border: 1px solid #ececf3;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(56, 59, 91, 0.035);
}

.xy-task-row .xy-platform-icon {
  width: 27px;
  height: 27px;
  border-radius: 9px;
}

.xy-task-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-task-copy strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-task-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: #8a8d99;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-task-row > em,
.xy-task-detail-platform > em {
  padding: 4px 7px;
  flex: 0 0 auto;
  border-radius: 8px;
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.xy-task-row > em.is-running,
.xy-task-detail-platform > em.is-running {
  color: #2475c7;
  background: #eaf4ff;
}

.xy-task-row > em.is-queued,
.xy-task-detail-platform > em.is-queued {
  color: #3f91ec;
  background: #ecf5ff;
}

.xy-task-row > em.is-paused,
.xy-task-detail-platform > em.is-paused {
  color: #7c67df;
  background: #f0edff;
}

.xy-task-row > em.is-ready,
.xy-task-detail-platform > em.is-ready {
  color: #777a88;
  background: #f1f2f5;
}

.xy-task-row > em.is-completed {
  color: #328363;
  background: #eaf7f1;
}

.xy-task-row > em.is-failed {
  color: #b65258;
  background: #fff0f1;
}

.xy-task-row > em.is-stopped {
  color: #777a88;
  background: #f1f2f5;
}

.xy-task-row > em.is-timeout {
  color: #bc6a2d;
  background: #fff3e9;
}

.xy-task-row.is-execution-running {
  border-color: #c9def3;
  background: #f3f8fe;
}

.xy-task-control {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  flex: 0 0 auto;
  color: #666977;
  background: #f2f3f6;
  border-radius: 50%;
}

.xy-row-caret {
  color: #8c8f9b;
  flex: 0 0 auto;
}

.xy-task-row.is-execution-running .xy-task-control {
  color: #2475c7;
  background: #eaf4ff;
}

.xy-task-row.is-execution-completed .xy-task-control {
  color: #328363;
  background: #eaf7f1;
}

.xy-task-row.is-execution-failed .xy-task-control {
  color: #b65258;
  background: #fff0f1;
}

.xy-task-row.is-execution-stopped .xy-task-control {
  color: #777a88;
  background: #f1f2f5;
}

.xy-task-row.is-execution-paused .xy-task-control {
  color: #7c67df;
  background: #f0edff;
}

.xy-task-row.is-execution-timeout .xy-task-control {
  color: #bc6a2d;
  background: #fff3e9;
}

.xy-ai-banner {
  display: flex;
  width: 100%;
  min-height: 45px;
  overflow: hidden;
  align-items: center;
  gap: 9px;
  padding: 2px 8px 2px 3px;
  color: inherit;
  text-align: left;
  background: linear-gradient(110deg, #f1efff, #e8edff 58%, #f5f3ff);
  border: 1px solid #e4e2fa;
  border-radius: 18px;
}

.xy-ai-banner img {
  width: 44px;
  height: 44px;
  align-self: flex-end;
  flex: 0 0 auto;
  object-fit: contain;
  transform: translateY(10px);
}

.xy-ai-banner > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-ai-banner strong {
  font-size: 12px;
}

.xy-ai-banner strong em {
  margin-left: 4px;
  padding: 2px 5px;
  color: #5686eb;
  background: rgba(93, 132, 240, 0.12);
  border-radius: 6px;
  font-size: 8px;
  font-style: normal;
}

.xy-ai-banner small {
  margin-top: 3px;
  overflow: hidden;
  color: #7d808e;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-ai-banner > b {
  padding: 8px 11px;
  color: white;
  background: linear-gradient(140deg, #7e6bff, #5b42e8);
  border-radius: 17px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.xy-ai-banner > svg {
  color: #6d58eb;
  flex: 0 0 auto;
}

.xy-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 4px;
}

.xy-metric-grid button {
  position: relative;
  display: flex;
  min-height: 44px;
  padding: 5px;
  text-align: left;
  background: #fbfbfd;
  border: 1px solid #ececf2;
  border-radius: 13px;
  flex-direction: column;
}

.xy-metric-grid small {
  color: #858894;
  font-size: 7px;
  white-space: nowrap;
}

.xy-metric-grid strong {
  margin-top: 3px;
  font-size: 12px;
}

.xy-metric-grid em {
  position: absolute;
  right: 4px;
  bottom: 5px;
  padding: 2px 3px;
  color: #14a65a;
  background: #e9f8ef;
  border-radius: 7px;
  font-size: 6px;
  font-style: normal;
}

.xy-data-overview {
  padding-top: 6px;
  padding-bottom: 6px;
}

.xy-data-overview .xy-section-heading {
  min-height: 16px;
}

.xy-data-overview .xy-section-heading h2 {
  font-size: 13px;
}

.xy-bottom-nav {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: 54px;
  padding: 4px 8px 12px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(225, 227, 236, 0.96);
  box-shadow: 0 -12px 34px rgba(46, 49, 79, 0.065);
  grid-template-columns: repeat(3, 1fr);
  backdrop-filter: blur(18px);
}

.mobile-app-viewport[data-platform="android"] .xy-bottom-nav {
  min-height: 54px;
  padding-bottom: 4px;
}

.xy-bottom-nav button {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #8a8d9a;
  background: transparent;
  border: 0;
  flex-direction: column;
  font-size: 9px;
}

.xy-bottom-nav button.is-active {
  color: #6752ed;
}

.xy-bottom-nav button.is-active svg {
  filter: drop-shadow(0 4px 8px rgba(103, 82, 237, 0.18));
}

/* Phone-scoped sheets are modal surfaces: keep their dimmer and actions above
   the persistent bottom navigation, including sheets opened from full-screen
   account/download overlays. */
.h5-mode .sheet-overlay {
  z-index: 260;
}

.h5-mode .bottom-sheet,
.h5-mode .production-sheet {
  z-index: 261;
}

/* AI video dialogs share the global sheet dimmer. Keep both the generation
   confirmation sheet and the completed-video surface above that dimmer in
   full-screen H5 mode; otherwise the z-index: 260 overlay intercepts every
   tap while the dialog itself remains hidden underneath it. */
.h5-mode .generation-sheet,
.h5-mode .result-modal {
  z-index: 261;
}

.h5-mode .production-sheet {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.device-screen .sheet-content {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.xy-subview-hero {
  display: flex;
  min-height: 90px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 3px 4px;
}

.xy-subview-hero > div {
  min-width: 0;
}

.xy-subview-hero > span,
.xy-subview-hero > div > span {
  color: #725ee8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.xy-subview-hero h1 {
  margin: 5px 0 5px;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -1px;
}

.xy-subview-hero p {
  margin: 0;
  color: #848794;
  font-size: 10px;
  line-height: 1.6;
}

.xy-page-intro {
  display: flex;
  min-height: 82px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 3px 11px;
}

.xy-page-intro > div { min-width: 0; }

.xy-page-intro > div > span {
  color: #7864e9;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.xy-page-intro h1 {
  margin: 4px 0 0;
  color: #1d1f2c;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -1px;
}

.xy-page-intro-badge,
.xy-account-state {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  color: #6651df;
  background: #f0edff;
  border: 1px solid #dfd9fb;
  border-radius: 12px;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 600;
}

.xy-account-state i {
  width: 7px;
  height: 7px;
  background: #a6a8b2;
  border-radius: 50%;
}

.xy-account-state.is-signed i {
  background: #25b76a;
  box-shadow: 0 0 0 4px rgba(37, 183, 106, 0.1);
}

.xy-step-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: #7f789d !important;
  font-size: 8px !important;
  font-weight: 600;
  letter-spacing: .2px;
}

.xy-step-label i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #fff;
  background: #6c57e8;
  border-radius: 6px;
  font-size: 9px;
  font-style: normal;
}

.xy-subview-hero.has-action > button,
.xy-profile-card > button {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: #6955ec;
  background: white;
  border: 1px solid #e4e5ed;
  border-radius: 15px;
  box-shadow: 0 9px 24px rgba(55, 58, 92, 0.075);
}

.xy-mini-label {
  display: block !important;
  color: #8d909c !important;
  font-size: 9px !important;
}

.xy-state-badge {
  padding: 5px 8px;
  color: #7f828e;
  background: #eff0f3;
  border-radius: 9px;
  font-size: 9px;
}

.xy-state-badge.is-online {
  color: #16a558;
  background: #eaf9f0;
}

.xy-current-execution,
.xy-all-tasks {
  padding: 16px;
}

.xy-execution-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 11px;
  background: #f8f8fc;
  border: 1px solid #eeeeF4;
  border-radius: 15px;
}

.xy-execution-main > span,
.xy-device-illustration {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  color: #6a56ed;
  background: #eeeaff;
  border-radius: 13px;
}

.xy-execution-main > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-execution-main strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-execution-main small {
  margin-top: 3px;
  color: #8c8f9b;
  font-size: 8px;
  line-height: 1.5;
}

.xy-execution-main button {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  color: #6752ec;
  background: white;
  border: 1px solid #e7e5f5;
  border-radius: 12px;
  font-size: 9px;
}

.xy-primary-cta {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white;
  background: linear-gradient(145deg, #7968ff, #5c43e9);
  border: 0;
  border-radius: 17px;
  box-shadow: 0 13px 26px rgba(92, 67, 233, 0.24);
  font-size: 12px;
  font-weight: 600;
}

.xy-empty-state {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  padding: 18px;
  color: #898c99;
  text-align: center;
  flex-direction: column;
}

.xy-empty-state svg {
  color: #7460ec;
}

.xy-empty-state strong {
  margin-top: 8px;
  color: #434550;
  font-size: 12px;
}

.xy-empty-state p {
  max-width: 250px;
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.6;
}

.xy-empty-state button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 5px;
  margin-top: 11px;
  padding: 0 13px;
  color: #6752ec;
  background: #efecff;
  border: 0;
  border-radius: 12px;
  font-size: 10px;
}

.xy-refresh-status-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid #e2e3ea;
  border-radius: 10px;
  background: transparent;
  color: #8d909c;
  cursor: pointer;
  line-height: 1;
}
.xy-refresh-status-btn small {
  font-size: 9px;
}
.xy-refresh-status-btn:active {
  background: #f3f4f7;
}

.xy-device-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
}

.xy-device-detail > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-device-detail strong {
  font-size: 11px;
}

.xy-device-detail small {
  margin-top: 3px;
  color: #898c99;
  font-size: 9px;
}

.xy-device-detail > button {
  min-height: 39px;
  padding: 0 12px;
  color: white;
  background: #6854ed;
  border: 0;
  border-radius: 12px;
  font-size: 10px;
}

.xy-security-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 13px 0 0;
  color: #7f8290;
  font-size: 9px;
  line-height: 1.5;
}

.xy-security-note svg {
  color: #22b664;
  flex: 0 0 auto;
}

.xy-bound-list {
  margin-top: 10px;
}

.xy-bound-row {
  display: flex;
  min-height: 60px;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid #efeff4;
}

.xy-bound-row:last-child {
  border-bottom: 0;
}

.xy-bound-row > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #6753ec;
  background: #efecff;
  border-radius: 12px;
}

.xy-bound-row > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-bound-row strong {
  font-size: 10px;
}

.xy-bound-row small {
  margin-top: 3px;
  color: #8b8e9a;
  font-size: 8px;
}

.xy-bound-row > button,
.xy-bound-row > em {
  min-height: 34px;
  padding: 0 9px;
  color: #6753ec;
  background: #efecff;
  border: 0;
  border-radius: 10px;
  font-size: 9px;
  font-style: normal;
  line-height: 34px;
}

.xy-bound-row > button.is-forget {
  color: #be5d69;
  background: #fff0f2;
}

.xy-quick-controls > div:last-child {
  display: grid;
  gap: 8px;
  margin-top: 11px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xy-quick-controls > div:last-child > button {
  display: flex;
  min-height: 90px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
  color: #6753ec;
  background: #f8f7ff;
  border: 1px solid #ebe8fc;
  border-radius: 14px;
  flex-direction: column;
}

.xy-quick-controls > div:last-child > button > span {
  display: flex;
  align-items: center;
  color: #40424d;
  flex-direction: column;
  font-size: 10px;
}

.xy-quick-controls small {
  margin-top: 2px;
  color: #8d909c;
  font-size: 7px;
}

.xy-danger-button {
  min-height: 47px;
  color: #c45765;
  background: #fff5f6;
  border: 1px solid #f5dfe2;
  border-radius: 15px;
  font-size: 10px;
}

/* Devices page: one device list + one compact control surface. */
.xy-devices-clean {
  gap: 12px;
  padding-top: 4px;
}

.xy-devices-clean::before {
  opacity: 0.46;
}

.xy-devices-clean-header {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 3px;
}

.xy-devices-clean-header h1 {
  margin: 0;
  color: #1d1e27;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.9px;
}

.xy-devices-clean-header p {
  margin: 5px 0 0;
  color: #8b8d98;
  font-size: 10px;
}

.xy-devices-clean-header > button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  color: #6652e9;
  background: #f3f0ff;
  border: 1px solid #e6e0ff;
  border-radius: 13px;
  font-size: 10px;
  font-weight: 600;
}

.xy-devices-list-card {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e6e7ee;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(49, 51, 80, 0.05);
}

.xy-devices-list-card {
  padding: 3px 14px;
}

.xy-devices-row {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #f0f0f4;
}

.xy-devices-row:last-child {
  border-bottom: 0;
}

.xy-devices-row-main {
  display: flex;
  min-width: 0;
  min-height: 70px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
  flex: 1;
}

.xy-devices-row-main > svg {
  color: #afb0ba;
  flex: 0 0 auto;
}

.xy-devices-row-icon {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #6753ec;
  background: #f0edff;
  border-radius: 13px;
  flex: 0 0 auto;
}

.xy-devices-row-icon i {
  position: absolute;
  right: -1px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  background: #b8bac2;
  border: 2px solid white;
  border-radius: 50%;
}

.xy-devices-row-icon i.is-online {
  background: #21bd68;
}

.xy-devices-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-devices-row-copy strong {
  overflow: hidden;
  color: #292a33;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-devices-row-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: #8c8e99;
  font-size: 8px;
}

.xy-devices-row-copy small span + span {
  padding: 3px 6px;
  color: #36835b;
  background: #edf8f1;
  border-radius: 7px;
}

.xy-devices-row-copy small span.is-expired,
.xy-devices-row-copy small span.is-inactive {
  color: #b45d68;
  background: #fff0f2;
}

.xy-devices-row-copy small span.is-unknown {
  color: #858894;
  background: #f2f3f5;
}

.xy-devices-current-badge,
.xy-devices-switch {
  min-width: 42px;
  min-height: 30px;
  padding: 0 9px;
  color: #6652e9;
  background: #f1eeff;
  border: 0;
  border-radius: 10px;
  font-size: 9px;
  font-style: normal;
  line-height: 30px;
  text-align: center;
}

.xy-devices-switch:disabled {
  color: #aaaab2;
  background: #f2f2f4;
}

.xy-devices-clean-empty {
  display: flex;
  min-height: 214px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  flex-direction: column;
}

.xy-devices-clean-empty > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #6854ea;
  background: #f0edff;
  border-radius: 17px;
}

.xy-devices-clean-empty strong {
  margin-top: 12px;
  color: #30313a;
  font-size: 13px;
}

.xy-devices-clean-empty p {
  margin: 6px 0 0;
  color: #91939d;
  font-size: 9px;
}

.xy-devices-clean-empty button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  margin-top: 15px;
  padding: 0 13px;
  color: white;
  background: #6753ec;
  border: 0;
  border-radius: 12px;
  font-size: 10px;
}

.xy-device-sheet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 8px;
}

/* ── Execution records ─────────────────────────────────────────────────── */

.xy-records-hero {
  overflow: hidden;
  min-height: 112px;
  padding: 16px 14px;
  background:
    linear-gradient(128deg, rgba(246, 245, 255, 0.98), rgba(232, 239, 255, 0.98)),
    #f1efff;
  border: 1px solid #e3e3f8;
  border-radius: 22px;
}

.xy-records-hero::after {
  position: absolute;
  right: -22px;
  bottom: -50px;
  width: 144px;
  height: 144px;
  content: "";
  background: url("https://aishuzirenshouji.oss-cn-beijing.aliyuncs.com/public-static/xiaoling/f9b05faa59d10e40b1cb4e7fa2673a8c3cd402ae19adfdf39124eb6c45ceca3e/brand/xiaoyou-mascot.png") center / contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

.xy-records-hero > div,
.xy-records-hero > button {
  position: relative;
  z-index: 1;
}

.xy-records-hero p {
  max-width: 280px;
}

.xy-record-list-section,
.xy-record-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xy-record-section {
  padding-top: 4px;
}

.xy-record-section-heading {
  display: flex;
  min-height: 37px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.xy-record-section-heading > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-record-section-heading span {
  color: #8983bd;
  font-family: Roboto, sans-serif;
  font-size: 8px;
  font-weight: 500;
}

.xy-record-section-heading h2 {
  margin: 1px 0 0;
  color: #1e2030;
  font-size: 15px;
  line-height: 1.35;
}

.xy-record-section-heading > em {
  padding-bottom: 2px;
  color: #858894;
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.xy-record-demo-notice {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: #6551d8;
  background: #f1efff;
  border: 1px solid #e2defb;
  border-radius: 14px;
}

.xy-record-demo-notice > svg {
  flex: 0 0 auto;
}

.xy-record-demo-notice > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-record-demo-notice strong {
  font-size: 10px;
}

.xy-record-demo-notice small {
  margin-top: 2px;
  color: #77728f;
  font-size: 8px;
  line-height: 1.5;
}

.xy-execution-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xy-execution-row {
  display: flex;
  width: 100%;
  min-height: 118px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e6e7ef;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(48, 51, 84, 0.05);
  text-align: left;
}

.xy-execution-row:active {
  background: #f8f8ff;
  transform: scale(0.995);
}

.xy-execution-row > svg {
  color: #9698a6;
  flex: 0 0 auto;
}

.xy-execution-platform {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #282a35;
  background: #f1f0f8;
  border-radius: 13px;
  flex: 0 0 auto;
}

.xy-exec-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
  flex-shrink: 0;
}

.xy-exec-badge.is-running   { background: #eaf9f0; color: #18a85a; }
.xy-exec-badge.is-pending   { background: #fff6df; color: #a66b00; }
.xy-exec-badge.is-completed { background: #eaf9f0; color: #18a85a; }
.xy-exec-badge.is-failed    { background: #fde8e8; color: #c0392b; }
.xy-exec-badge.is-stopped   { background: #f1f2f5; color: #777a88; }
.xy-exec-badge.is-paused    { background: #f1f2f5; color: #777a88; }
.xy-exec-badge.is-timeout   { background: #fef0e6; color: #ca6f1e; }

.xy-exec-info {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.xy-exec-info > span:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
}

.xy-exec-info > span:first-child em {
  color: #6a56e8;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.xy-exec-info > span:first-child b {
  padding: 2px 5px;
  color: #7d6dd9;
  background: #f0edff;
  border-radius: 5px;
  font-size: 7px;
  font-weight: 500;
}

.xy-exec-info strong {
  display: -webkit-box;
  overflow: hidden;
  color: #1e2030;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.xy-exec-info small {
  font-size: 9px;
  color: #8d909c;
}

.xy-exec-row-foot {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.xy-exec-row-foot > em {
  color: #7664df;
  font-size: 8px;
  font-style: normal;
}

.xy-record-detail-view {
  gap: 14px;
  padding-bottom: 10px;
}

.xy-record-page-header {
  display: grid;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.xy-record-page-header > button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #444653;
  background: #fff;
  border: 1px solid #e3e4ec;
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(52, 54, 82, 0.05);
}

.xy-record-page-header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-record-page-header > div > span {
  color: #8983bd;
  font-size: 8px;
}

.xy-record-page-header h1 {
  overflow: hidden;
  margin: 2px 0 0;
  color: #191a24;
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-evidence-badge {
  padding: 5px 7px;
  color: #696b78;
  background: #f1f2f5;
  border-radius: 8px;
  font-size: 8px;
  white-space: nowrap;
}

.xy-evidence-badge.is-demo { color: #6651da; background: #efecff; }
.xy-evidence-badge.is-reported { color: #168e4c; background: #e8f7ee; }
.xy-evidence-badge.is-derived { color: #3878b9; background: #eaf4ff; }

.xy-execution-summary {
  overflow: hidden;
  background: linear-gradient(128deg, #f1efff, #e8eeff 64%, #f7f6ff);
  border: 1px solid #e0def6;
  border-radius: 18px;
}

.xy-execution-summary-copy {
  display: flex;
  padding: 13px 13px 10px;
  flex-direction: column;
}

.xy-execution-summary-copy > span {
  color: #6e59df;
  font-size: 9px;
  font-weight: 600;
}

.xy-execution-summary-copy > strong {
  margin-top: 3px;
  color: #242536;
  font-family: Roboto, "Noto Sans SC", sans-serif;
  font-size: 12px;
}

.xy-execution-summary-copy > small {
  margin-top: 5px;
  color: #747788;
  font-size: 9px;
  line-height: 1.5;
}

.xy-execution-summary-stats {
  display: grid;
  min-height: 54px;
  background: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(215, 214, 238, 0.78);
  grid-template-columns: repeat(3, 1fr);
}

.xy-execution-summary-stats > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.xy-execution-summary-stats > span + span {
  border-left: 1px solid rgba(215, 214, 238, 0.78);
}

.xy-execution-summary-stats strong {
  font-family: Roboto, sans-serif;
  font-size: 17px;
}

.xy-execution-summary-stats small {
  margin-top: 1px;
  color: #858894;
  font-size: 8px;
}

.xy-execution-parameters > details {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(45, 61, 54, 0.04);
}

.xy-execution-parameters > details > summary {
  display: grid;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  color: #46534c;
  background: #f7faf8;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
  grid-template-columns: auto minmax(0, 1fr) auto;
  list-style: none;
}

.xy-execution-parameters > details > summary::-webkit-details-marker {
  display: none;
}

.xy-execution-parameters > details > summary > svg:first-child {
  color: #4f8a68;
}

.xy-execution-parameters > details > summary > svg:last-child {
  color: #8a938e;
  transition: transform 160ms ease;
}

.xy-execution-parameters > details[open] > summary > svg:last-child {
  transform: rotate(180deg);
}

.xy-execution-parameter-list {
  display: flex;
  flex-direction: column;
  padding: 3px 11px 7px;
}

.xy-execution-parameter-list article {
  display: grid;
  min-height: 50px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eef0f2;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}

.xy-execution-parameter-list article:last-child {
  border-bottom: 0;
}

.xy-execution-parameter-list article > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.xy-execution-parameter-list article strong {
  color: #343c38;
  font-size: 9px;
  line-height: 1.45;
}

.xy-execution-parameter-list article small {
  overflow: hidden;
  color: #9aa19d;
  font-family: Roboto, sans-serif;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-execution-parameter-list article p {
  min-width: 0;
  margin: 0;
  color: #5b625f;
  font-size: 9px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-align: right;
  white-space: pre-wrap;
}

.xy-execution-parameter-list article.is-sensitive p {
  color: #8d9290;
}

.xy-record-filters {
  display: grid;
  padding: 3px;
  background: #eeeef4;
  border-radius: 11px;
  grid-template-columns: repeat(3, 1fr);
}

.xy-record-filters button {
  min-height: 31px;
  color: #7e818e;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 9px;
}

.xy-record-filters button.is-active {
  color: #5f4dd3;
  background: white;
  box-shadow: 0 3px 9px rgba(47, 49, 77, 0.08);
  font-weight: 600;
}

.xy-video-record-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xy-video-record-card {
  display: flex;
  width: 100%;
  min-height: 118px;
  align-items: center;
  gap: 10px;
  padding: 9px;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid #e7e8ef;
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(45, 48, 76, 0.045);
}

.xy-video-record-card:active {
  background: #faf9ff;
}

.xy-video-record-card > svg {
  color: #999ba8;
  flex: 0 0 auto;
}

.xy-video-record-cover {
  position: relative;
  display: block;
  width: 72px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #edf0f8;
  border-radius: 10px;
  flex: 0 0 auto;
}

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

.xy-video-record-cover > i,
.xy-video-detail-cover > i {
  position: absolute;
  display: grid;
  place-items: center;
  color: white;
  background: rgba(29, 30, 40, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
}

.xy-video-record-cover > i {
  right: 6px;
  bottom: 6px;
  width: 25px;
  height: 25px;
}

.xy-video-record-cover > small {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  color: #777a88;
  font-size: 7px;
  text-align: center;
}

.xy-video-record-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
}

.xy-video-record-platform {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 4px;
  color: #6b6e7d;
  font-size: 8px;
}

.xy-video-record-platform > em {
  margin-left: 2px;
  padding: 2px 4px;
  background: #f0f1f4;
  border-radius: 5px;
  font-size: 7px;
  font-style: normal;
}

.xy-video-record-platform > em.is-demo { color: #6b57dc; background: #f0edff; }
.xy-video-record-platform > em.is-reported { color: #15884a; background: #e9f7ee; }
.xy-video-record-platform > em.is-derived { color: #3778b7; background: #eaf4ff; }

.xy-video-record-body > strong {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  color: #22232f;
  font-size: 11px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.xy-video-record-body > small {
  margin-top: 3px;
  overflow: hidden;
  color: #898c99;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-video-record-metrics {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #858895;
  font-size: 8px;
}

.xy-video-record-metrics > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.xy-video-record-actions {
  display: flex;
  gap: 4px;
  margin-top: auto;
  overflow: hidden;
}

.xy-video-record-actions > em,
.xy-video-record-actions > b {
  overflow: hidden;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 7px;
  font-style: normal;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-video-record-actions > em { color: #387c55; background: #eaf7ef; }
.xy-video-record-actions > em.is-draft,
.xy-video-record-actions > em.is-pending { color: #7759cf; background: #f0edff; }
.xy-video-record-actions > em.is-failed { color: #bd4e5b; background: #fff0f2; }
.xy-video-record-actions > em.is-skipped { color: #797b86; background: #f0f1f4; }
.xy-video-record-actions > b { color: #7759cf; background: #f0edff; }

.xy-record-loading {
  display: flex;
  min-height: 118px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8073ca;
  font-size: 9px;
}

.xy-record-empty-inline {
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: 10px;
  padding: 13px;
  color: #6c5be0;
  background: #f7f7fb;
  border: 1px dashed #dcdee8;
  border-radius: 14px;
}

.xy-record-empty-inline.is-error {
  color: #ba5260;
  background: #fff7f8;
  border-color: #f1d8dc;
}

.xy-record-empty-inline > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-record-empty-inline strong {
  color: #3b3d4a;
  font-size: 10px;
}

.xy-record-empty-inline small {
  margin-top: 3px;
  color: #858895;
  font-size: 8px;
  line-height: 1.5;
}

.xy-record-list-empty {
  min-height: 132px;
  justify-content: center;
  text-align: left;
  color: #5d806f;
  border-color: #dce8e1;
  background: #f8fbf9;
}

.xy-video-detail-hero {
  display: grid;
  min-height: 178px;
  gap: 13px;
  grid-template-columns: 112px minmax(0, 1fr);
}

.xy-video-detail-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #edf0f8;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(41, 43, 72, 0.12);
}

.xy-video-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xy-video-detail-cover > span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  color: #696c79;
  font-size: 8px;
  text-align: center;
}

.xy-video-detail-cover > i {
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
}

.xy-video-detail-copy {
  display: flex;
  min-width: 0;
  padding: 5px 0;
  flex-direction: column;
}

.xy-platform-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  color: #525462;
  background: #f0f1f5;
  border-radius: 7px;
  font-size: 8px;
}

.xy-video-detail-copy h2 {
  margin: 11px 0 0;
  color: #1c1d27;
  font-size: 15px;
  line-height: 1.5;
}

.xy-video-detail-copy p {
  margin: 9px 0 0;
  color: #6150d2;
  font-size: 10px;
}

.xy-video-detail-copy > small {
  margin-top: 5px;
  color: #91939f;
  font-size: 8px;
  line-height: 1.45;
}

.xy-video-metrics {
  display: grid;
  overflow: hidden;
  min-height: 65px;
  background: #fff;
  border: 1px solid #e6e7ef;
  border-radius: 14px;
  grid-template-columns: repeat(4, 1fr);
}

.xy-video-metrics > div {
  display: grid;
  min-width: 0;
  place-items: center;
  align-content: center;
  color: #767987;
}

.xy-video-metrics > div + div {
  border-left: 1px solid #ececf2;
}

.xy-video-metrics span {
  margin-top: 2px;
  font-size: 7px;
}

.xy-video-metrics strong {
  margin-top: 2px;
  color: #242631;
  font-family: Roboto, sans-serif;
  font-size: 11px;
}

.xy-action-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
}

.xy-action-timeline::before {
  position: absolute;
  top: 21px;
  bottom: 21px;
  left: 20px;
  width: 1px;
  content: "";
  background: #dedfea;
}

.xy-action-row {
  position: relative;
  display: grid;
  min-height: 82px;
  gap: 11px;
  padding: 8px 0;
  grid-template-columns: 41px minmax(0, 1fr);
}

.xy-action-icon {
  z-index: 1;
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  color: #6551dc;
  background: #efecff;
  border: 4px solid #f8f9fd;
  border-radius: 50%;
}

.xy-action-icon.is-like { color: #d94f72; background: #fff0f4; }
.xy-action-icon.is-comment { color: #387fbd; background: #eaf4ff; }
.xy-action-icon.is-view { color: #168c4b; background: #eaf8ef; }

.xy-action-row > div {
  min-width: 0;
  padding: 3px 0 10px;
  border-bottom: 1px solid #ececf2;
}

.xy-action-row:last-child > div {
  border-bottom: 0;
}

.xy-action-row header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.xy-action-row header strong {
  color: #2b2c38;
  font-size: 14px;
}

.xy-action-row header em {
  padding: 3px 6px;
  color: #21814c;
  background: #eaf7ef;
  border-radius: 6px;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.xy-action-row header em.is-draft,
.xy-action-row header em.is-pending { color: #7258cf; background: #f0edff; }
.xy-action-row header em.is-failed { color: #bb4f5c; background: #fff0f2; }
.xy-action-row header em.is-skipped { color: #737680; background: #eff0f3; }

.xy-action-row p {
  margin: 6px 0 0;
  color: #666977;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.xy-action-row small {
  display: block;
  margin-top: 4px;
  color: #a0a2ad;
  font-family: Roboto, sans-serif;
  font-size: 13px;
}

.xy-video-source-section dl {
  overflow: hidden;
  margin: 0;
  background: white;
  border: 1px solid #e7e8ef;
  border-radius: 13px;
}

.xy-video-source-section dl > div {
  display: grid;
  min-height: 42px;
  align-items: center;
  gap: 12px;
  padding: 8px 11px;
  grid-template-columns: 70px minmax(0, 1fr);
}

.xy-video-source-section dl > div + div {
  border-top: 1px solid #eeeef3;
}

.xy-video-source-section dt {
  color: #8b8e9a;
  font-size: 8px;
}

.xy-video-source-section dd {
  overflow: hidden;
  margin: 0;
  color: #363844;
  font-size: 9px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-source-logs {
  overflow: hidden;
  background: #f5f6fa;
  border-radius: 12px;
}

.xy-source-logs summary {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  color: #626573;
  cursor: pointer;
  font-size: 9px;
  list-style: none;
}

.xy-source-logs[open] summary svg {
  transform: rotate(180deg);
}

.xy-source-logs > div,
.xy-run-log-list {
  display: flex;
  padding: 0 11px 8px;
  flex-direction: column;
}

.xy-source-logs p,
.xy-run-log-list p {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 7px 0;
  color: #5f6270;
  border-top: 1px solid #e5e6ed;
  font-size: 8px;
  line-height: 1.5;
  grid-template-columns: 57px minmax(0, 1fr);
}

.xy-source-logs time,
.xy-run-log-list time {
  color: #9a9ca8;
  font-family: Roboto, sans-serif;
}

.xy-source-logs span,
.xy-run-log-list span {
  overflow-wrap: anywhere;
}

.xy-run-log-list {
  padding: 4px 11px 8px;
  background: #f5f6fa;
  border-radius: 12px;
}

.xy-record-detail-actions {
  display: flex;
  gap: 8px;
}

.xy-record-detail-actions.is-top button {
  flex: 1;
  min-height: 42px;
}

.xy-record-detail-actions button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 9px;
}

.xy-record-detail-actions .is-stop { color: #ae6542; background: #fff6ed; border: 1px solid #f0dccb; }
.xy-record-detail-actions .is-retry { color: #5f4cd1; background: #f0edff; border: 1px solid #ded8fb; }
.xy-record-detail-actions .is-configure { color: #41725f; background: #edf7f1; border: 1px solid #d2e8db; }

/* Legacy log classes remain for older embedded execution surfaces. */

.xy-execution-logs-sheet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
}

.xy-execution-sheet-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.xy-exec-sheet-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.xy-exec-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.15s;
}
.xy-exec-action-btn:active { opacity: 0.65; }
.xy-exec-action-btn.is-pause   { color: #d68910; border-color: #f0c060; background: #fff9ee; }
.xy-exec-action-btn.is-resume  { color: #27ae60; border-color: #a3d9b1; background: #f0faf3; }
.xy-exec-action-btn.is-retry   { color: #2980b9; border-color: #a8cce8; background: #eaf4fc; }

.xy-exec-result {
  font-size: 10px;
  color: #5a5d6e;
  margin: 0;
}

.xy-logs-loading {
  display: flex;
  justify-content: center;
  padding: 28px 0;
  color: #8d909c;
}

.xy-logs-empty {
  font-size: 11px;
  color: #8d909c;
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

.xy-log-entries {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #f7f8fb;
  border-radius: 10px;
  padding: 10px;
  max-height: 52vh;
  overflow-y: auto;
}

.xy-log-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 4px;
  align-items: baseline;
  font-size: 9px;
  line-height: 1.5;
}

.xy-log-time  { color: #a0a3b0; }
.xy-log-content { color: #2c2e3a; word-break: break-all; }

.xy-logs-live-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #8d909c;
  margin: 0;
}


.xy-data-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 16px;
}

.xy-data-total > span {
  display: flex;
  color: #858894;
  flex-direction: column;
  font-size: 9px;
}

.xy-data-total strong {
  margin-top: 3px;
  color: #191a22;
  font-size: 28px;
}

.xy-data-total em {
  color: #18a65b;
  font-size: 9px;
  font-style: normal;
  text-align: right;
}

.xy-data-error {
  display: grid;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  color: #b34b4b;
  background: #fff5f3;
  border: 1px solid #f3d8d3;
  border-radius: 15px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.xy-data-error > span {
  display: grid;
  gap: 2px;
}

.xy-data-error strong {
  color: #8f3535;
  font-size: 10px;
}

.xy-data-error small {
  color: #a36a6a;
  font-size: 9px;
  line-height: 1.45;
}

.xy-data-error button {
  padding: 6px 9px;
  color: #8f3535;
  background: white;
  border: 1px solid #ebc8c1;
  border-radius: 9px;
  font-size: 9px;
}

.xy-bars {
  display: flex;
  height: 105px;
  align-items: flex-end;
  justify-content: space-around;
  gap: 11px;
  margin-top: 17px;
  padding: 0 6px;
  border-bottom: 1px solid #ececf2;
}

.xy-bars i {
  width: 17px;
  min-height: 10px;
  background: linear-gradient(180deg, #7562f3, #b7afff);
  border-radius: 7px 7px 2px 2px;
  box-shadow: 0 7px 15px rgba(110, 88, 237, 0.13);
}

.xy-bar-labels {
  display: flex;
  justify-content: space-between;
  padding: 6px 3px 0;
  color: #999ba7;
  font-size: 8px;
}

.xy-record-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xy-record-grid > div {
  display: grid;
  min-height: 94px;
  align-items: center;
  padding: 12px;
  background: white;
  border: 1px solid #e8e9f0;
  border-radius: 17px;
  box-shadow: 0 10px 25px rgba(47, 50, 80, 0.05);
  grid-template-columns: 36px 1fr;
}

.xy-record-grid span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #6955ed;
  background: #efecff;
  border-radius: 11px;
  grid-row: span 2;
}

.xy-record-grid small {
  color: #898c99;
  font-size: 9px;
}

.xy-record-grid strong {
  font-size: 21px;
}

.xy-data-recent {
  display: grid;
  gap: 0;
  padding: 14px;
}

.xy-data-recent > .xy-section-heading {
  margin-bottom: 4px;
}

.xy-data-recent > .xy-section-heading > strong {
  color: #18a65b;
}

.xy-data-recent article {
  display: grid;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 0;
  border-top: 1px solid #f0f1f3;
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.xy-data-recent article > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #5b45d8;
  background: #f0edff;
  border-radius: 11px;
}

.xy-data-recent article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.xy-data-recent article strong {
  overflow: hidden;
  color: #292b33;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-data-recent article small {
  overflow: hidden;
  color: #9699a4;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-data-recent article > em {
  padding: 4px 7px;
  color: #7869cf;
  background: #f3f0ff;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.xy-data-recent article > em.is-completed {
  color: #16864d;
  background: #eaf8f0;
}

.xy-data-recent article > em.is-failed {
  color: #b14a4a;
  background: #fff0ef;
}

.xy-data-recent article > em.is-paused {
  color: #9a6b16;
  background: #fff7df;
}

.xy-data-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 24px 12px 14px;
  color: #a09aac;
  text-align: center;
}

.xy-data-empty strong {
  color: #5e606b;
  font-size: 10px;
}

.xy-data-empty small {
  color: #a0a2ac;
  font-size: 9px;
}

.xy-data-truth ul {
  display: flex;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  color: #767987;
  list-style: none;
  flex-direction: column;
  font-size: 9px;
  line-height: 1.6;
}

.xy-data-truth li {
  position: relative;
  padding-left: 13px;
}

.xy-data-truth li::before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 5px;
  height: 5px;
  content: "";
  background: #715de8;
  border-radius: 50%;
}

.xy-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 14px;
  background: linear-gradient(125deg, #f1efff, #e8efff);
  border: 1px solid #e5e2f8;
  border-radius: 22px;
}

.xy-menu-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 4px 0;
}

.xy-menu-group-heading span {
  color: #2d2e3b;
  font-size: 12px;
  font-weight: 650;
}

.xy-menu-group-heading small {
  color: #9698a4;
  font-size: 8px;
}

.xy-profile-card > img {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 9px 23px rgba(72, 66, 132, 0.12);
}

.xy-profile-card > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-profile-card span {
  color: #725ee8;
  font-size: 9px;
}

.xy-profile-card h1 {
  margin: 4px 0 0;
  font-size: 18px;
}

.xy-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.xy-account-stats > div {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ebebf1;
  flex-direction: column;
}

.xy-account-stats > div:last-child {
  border-right: 0;
}

.xy-account-stats strong {
  font-size: 19px;
}

.xy-account-stats small {
  margin-top: 4px;
  color: #898c99;
  font-size: 8px;
}

.xy-menu-list {
  padding-top: 7px;
  padding-bottom: 7px;
}

.xy-menu-list > button {
  display: flex;
  width: 100%;
  min-height: 61px;
  align-items: center;
  gap: 10px;
  padding: 7px 3px;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eeeef3;
}

.xy-menu-list > button:last-child {
  border-bottom: 0;
}

.xy-menu-list > button > span {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: #6854ed;
  background: #efecff;
  border-radius: 12px;
}

.xy-menu-list > button > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-menu-list strong {
  font-size: 11px;
}

.xy-menu-list small {
  margin-top: 3px;
  color: #8a8d99;
  font-size: 8px;
}

.xy-menu-list > button > svg {
  color: #989aa6;
}

.xy-core-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.xy-core-note > svg {
  color: #6b56ed;
  flex: 0 0 auto;
}

.xy-core-note strong {
  font-size: 11px;
}

.xy-core-note p {
  margin: 4px 0 0;
  color: #838692;
  font-size: 9px;
  line-height: 1.6;
}

.xy-toast {
  position: absolute;
  z-index: 100;
  right: 24px;
  bottom: 88px;
  left: 24px;
  padding: 11px 14px;
  color: white;
  text-align: center;
  background: rgba(34, 34, 45, 0.92);
  border-radius: 13px;
  box-shadow: 0 13px 30px rgba(18, 18, 28, 0.22);
  font-size: 10px;
  line-height: 1.5;
  backdrop-filter: blur(14px);
}

.xy-task-dispatch-overlay {
  position: absolute;
  z-index: 520;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(25, 31, 29, 0.38);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.xy-task-dispatch-overlay.is-error {
  z-index: 530;
  background: rgba(25, 31, 29, 0.46);
}

.xy-task-dispatch-loading-card,
.xy-task-dispatch-error-card {
  width: min(100%, 304px);
  border: 1px solid rgba(129, 162, 147, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 64px rgba(29, 48, 40, 0.2);
  text-align: center;
}

.xy-task-dispatch-loading-card {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 30px 24px 27px;
}

.xy-task-dispatch-loading-card > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 3px;
  border-radius: 19px;
  color: #4f8c72;
  background: linear-gradient(145deg, #eef8f3, #deefe6);
}

.xy-task-dispatch-loading-card svg {
  animation: xy-task-dispatch-spin 0.85s linear infinite;
}

.xy-task-dispatch-loading-card strong,
.xy-task-dispatch-error-card h2 {
  color: #17211d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.xy-task-dispatch-loading-card p,
.xy-task-dispatch-error-card p {
  margin: 0;
  color: #78827e;
  font-size: 13px;
  line-height: 1.65;
}

.xy-task-dispatch-error-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 27px 22px 20px;
}

.xy-task-dispatch-error-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 17px;
  color: #b66b37;
  background: #fff1e7;
}

.xy-task-dispatch-error-card h2 {
  margin: 2px 0 0;
}

.xy-task-dispatch-error-card p {
  width: 100%;
  overflow-wrap: anywhere;
  color: #5f6864;
}

.xy-task-dispatch-error-card button {
  width: 100%;
  min-height: 47px;
  margin-top: 7px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #6da78e, #4f8c72);
  box-shadow: 0 10px 24px rgba(79, 140, 114, 0.23);
  font-size: 15px;
  font-weight: 700;
}

.xy-task-dispatch-error-card button:focus-visible {
  outline: 3px solid rgba(79, 140, 114, 0.28);
  outline-offset: 2px;
}

@keyframes xy-task-dispatch-spin {
  to { transform: rotate(360deg); }
}

.xy-task-dispatch-overlay.is-dry-run {
  z-index: 525;
  overflow-y: auto;
}

.xy-task-dry-run-card p {
  font-size: 14px;
}

.xy-task-dry-run-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.xy-task-dry-run-actions button {
  background: #7460e8;
  box-shadow: none;
}

.xy-task-dry-run-actions button:first-child {
  color: #6554c0;
  background: #f0edff;
}

.xy-task-dry-run-actions button:focus-visible {
  outline-color: #c4baff;
}

.xy-composer-sheet,
.xy-task-detail {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.xy-sheet-label {
  color: #5f6270;
  font-size: 10px;
  font-weight: 600;
}

.xy-platform-picker {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xy-platform-picker button {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  color: #666977;
  background: #f8f8fb;
  border: 1px solid #e9e9ef;
  border-radius: 13px;
  font-size: 9px;
}

.xy-platform-picker button.is-active {
  color: #5e49df;
  background: #f0edff;
  border-color: #a99cf0;
  box-shadow: 0 6px 16px rgba(100, 78, 226, 0.09);
}

.xy-platform-picker .xy-platform-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.xy-platform-picker button > svg:last-child {
  position: absolute;
  top: 4px;
  right: 4px;
}

.xy-composer-sheet textarea {
  min-height: 94px;
  resize: none;
  padding: 12px;
  color: #3e404b;
  background: #f8f8fb;
  border: 1px solid #e6e7ee;
  border-radius: 14px;
  outline: 0;
  font-size: 16px;
  line-height: 1.6;
}

.xy-composer-sheet textarea:focus {
  background: white;
  border-color: #9182ee;
  box-shadow: 0 0 0 3px rgba(113, 91, 232, 0.1);
}

.xy-review-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  color: #7160dc;
  background: #f2f0ff;
  border-radius: 13px;
}

.xy-review-note > svg {
  flex: 0 0 auto;
}

.xy-review-note > span {
  display: flex;
  color: #555866;
  flex-direction: column;
}

.xy-review-note strong {
  font-size: 9px;
}

.xy-review-note small {
  margin-top: 3px;
  color: #777a88;
  font-size: 8px;
  line-height: 1.5;
}

.xy-sheet-primary {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white;
  background: linear-gradient(145deg, #7a68ff, #5c43e9);
  border: 0;
  border-radius: 15px;
  box-shadow: 0 12px 24px rgba(92, 67, 233, 0.22);
  font-size: 11px;
  font-weight: 600;
}

.xy-sheet-primary:disabled {
  opacity: 0.58;
}

.xy-notice-list {
  display: flex;
  flex-direction: column;
}

.xy-notice-list > button {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eeeef3;
}

.xy-notice-list > button > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #6652ec;
  background: #efecff;
  border-radius: 12px;
}

.xy-notice-list > button > span.is-green {
  color: #18a85b;
  background: #eaf9f0;
}

.xy-notice-list > button > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-notice-list strong {
  font-size: 10px;
}

.xy-notice-list small {
  margin-top: 4px;
  color: #898c99;
  font-size: 8px;
}

.xy-notice-list em {
  color: #a0a2ad;
  font-size: 8px;
  font-style: normal;
}

.xy-task-detail-platform {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fafafd;
  border: 1px solid #ebebf1;
  border-radius: 14px;
}

.xy-task-detail-platform > span {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.xy-task-detail-platform small {
  color: #8a8d99;
  font-size: 8px;
}

.xy-task-detail-platform strong {
  margin-top: 3px;
  font-size: 11px;
}

.xy-task-detail-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xy-task-detail-grid > span {
  display: flex;
  min-height: 58px;
  justify-content: center;
  padding: 10px;
  background: #f8f8fb;
  border: 1px solid #ececf2;
  border-radius: 13px;
  flex-direction: column;
}

.xy-task-detail-grid small {
  color: #8c8f9b;
  font-size: 8px;
}

.xy-task-detail-grid strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 10px;
}

.xy-task-description {
  margin: 0;
  padding: 9px 10px;
  color: #6f7280;
  background: #fafafd;
  border: 1px solid #ededf3;
  border-radius: 12px;
  font-size: 8px;
  line-height: 1.55;
}

.xy-task-parameter-panel {
  padding: 10px;
  background: #fafafd;
  border: 1px solid #ececf2;
  border-radius: 14px;
}

.xy-task-parameter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xy-task-parameter-heading > span {
  display: flex;
  flex-direction: column;
}

.xy-task-parameter-heading small {
  color: #92949f;
  font-size: 8px;
}

.xy-task-parameter-heading strong {
  margin-top: 2px;
  color: #3f414c;
  font-size: 10px;
}

.xy-task-parameter-heading > em {
  padding: 3px 7px;
  color: #6d59dc;
  background: #efecff;
  border-radius: 999px;
  font-size: 7px;
  font-style: normal;
}

.xy-task-parameter-list {
  display: grid;
  gap: 6px;
  margin-top: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xy-task-parameter-list > span {
  display: flex;
  min-width: 0;
  min-height: 42px;
  justify-content: center;
  padding: 7px 8px;
  background: #ffffff;
  border: 1px solid #ececf2;
  border-radius: 10px;
  flex-direction: column;
}

.xy-task-parameter-list > span.is-missing {
  background: #fff8f0;
  border-color: #f2ceb0;
}

.xy-task-parameter-list small {
  overflow: hidden;
  color: #8c8f9b;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-task-parameter-list strong {
  overflow: hidden;
  margin-top: 3px;
  color: #484a55;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-task-parameter-empty {
  margin: 8px 0 0;
  color: #888b97;
  font-size: 8px;
  line-height: 1.5;
}

.xy-review-note.is-warning {
  color: #d47a1e;
  background: #fff4e8;
}

.xy-review-note.is-warning > span {
  color: #6b5744;
}

.xy-review-note.is-warning small {
  color: #8b735d;
}

.xy-fixed-task-note {
  margin-top: 2px;
}

.scanner-overlay {
  position: absolute;
  z-index: 90;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  color: white;
  background: rgba(10, 10, 18, 0.98);
  border: 0;
}

.scanner-overlay:not([open]) {
  display: none;
}

.scanner-dialog {
  display: flex;
  height: 100%;
  padding: 54px 18px 28px;
  flex-direction: column;
}

.mobile-app-viewport[data-platform="android"] .scanner-dialog {
  padding-top: 68px;
}

.scanner-header {
  display: grid;
  align-items: center;
  gap: 9px;
  grid-template-columns: 42px 1fr auto;
}

.scanner-header > button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.scanner-header h2 {
  margin: 0;
  font-size: 17px;
}

.scanner-header p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 8px;
}

.scanner-mode {
  padding: 5px 7px;
  color: #b9b0ff;
  background: rgba(119, 98, 242, 0.16);
  border-radius: 9px;
  font-size: 8px;
}

.scanner-preview {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  flex: 1;
  margin: 18px 0;
  background: #15151f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
}

.scanner-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-state-card,
.scanner-success,
.native-camera-state {
  position: absolute;
  display: flex;
  max-width: 275px;
  align-items: center;
  color: white;
  text-align: center;
  flex-direction: column;
}

.scanner-state-card svg,
.scanner-success-icon {
  color: #8c7aff;
}

.scanner-state-card strong,
.scanner-success h3 {
  margin-top: 12px;
  font-size: 14px;
}

.scanner-state-card span,
.scanner-success p,
.native-camera-state span {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 9px;
  line-height: 1.6;
}

.scanner-state-card.is-error svg {
  color: #ff7182;
}

.scanner-primary-action,
.scanner-demo-action {
  min-height: 42px;
  margin-top: 14px;
  padding: 0 16px;
  color: white;
  background: #6e59ed;
  border: 0;
  border-radius: 13px;
  font-size: 10px;
}

.scanner-reticle {
  position: absolute;
  color: rgba(155, 139, 255, 0.9);
}

.scanner-live-pill {
  position: absolute;
  bottom: 21px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.58);
  border-radius: 13px;
  font-size: 9px;
}

.scanner-live-pill span {
  width: 7px;
  height: 7px;
  background: #3de082;
  border-radius: 50%;
}

.scanner-device-summary {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-direction: column;
}

.scanner-device-summary span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.scanner-success small {
  max-width: 270px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 8px;
  line-height: 1.6;
}

.scanner-footer {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 8px;
  line-height: 1.6;
}

.scanner-footer p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
}

.scanner-torch {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  color: white;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  font-size: 9px;
}

.is-spinning {
  animation: xy-spin 0.85s linear infinite;
}

@keyframes xy-spin {
  to { transform: rotate(360deg); }
}

.device-screen[data-device="pixel-10"] .xy-home-view {
  gap: 10px;
}

.device-screen[data-device="pixel-10"] .xy-hero {
  min-height: 132px;
}

.device-screen[data-device="pixel-10"] .xy-device-card {
  min-height: 76px;
}

.device-screen[data-device="pixel-10"] .xy-task-row {
  min-height: 39px;
}

.device-screen[data-device="pixel-10"] .xy-ai-banner {
  min-height: 49px;
}

.device-screen[data-device="pixel-10"] .xy-metric-grid button {
  min-height: 48px;
}

.device-screen[data-device="pixel-10"] .xy-data-overview {
  padding-top: 9px;
  padding-bottom: 9px;
}

@media (max-width: 340px) {
  .xy-scroll-content {
    padding-right: 11px;
    padding-left: 11px;
  }

  .xy-brand-lockup strong {
    font-size: 20px;
  }

  .xy-hero h1 {
    font-size: 21px;
  }

  .xy-hero-mascot {
    right: -32px;
    width: 143px;
    height: 143px;
  }

  .xy-task-row > em {
    display: none;
  }

  .xy-ai-banner > b {
    padding: 7px 9px;
  }
}

/* Reference-calibrated Xiaoyou home: 853 × 1844 source, normalized to 427 × 922 CSS. */
.h5-mode .phone-stage {
  width: min(100%, 427px);
}

.h5-mode .xy-app-shell {
  background: #fbfbfe;
}

.h5-mode .xy-scroll-content,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-scroll-content {
  padding: calc(env(safe-area-inset-top, 0px) + 50px) 16px calc(70px + env(safe-area-inset-bottom, 0px));
}

.h5-mode .xy-brand-header {
  min-height: 40px;
  margin-bottom: 16px;
}

.h5-mode .xy-brand-lockup {
  gap: 10px;
}

.h5-mode .xy-brand-mark {
  width: 40px;
  height: 40px;
  border-color: rgba(100, 82, 236, 0.16);
  border-radius: 50%;
  background: #f4f5ff;
  box-shadow: 0 6px 18px rgba(77, 65, 188, 0.1);
}

.h5-mode .xy-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.h5-mode .xy-brand-lockup strong {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.h5-mode .xy-brand-lockup small {
  margin-top: 2px;
  color: #7d8090;
  font-size: 11px;
}

.h5-mode .xy-header-actions {
  gap: 8px;
}

.h5-mode .xy-icon-button,
.h5-mode .xy-profile-button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.h5-mode .xy-icon-button {
  color: #555865;
}

.h5-mode .xy-profile-button {
  border: 2px solid rgba(255, 255, 255, 0.95);
}

.h5-mode .xy-notice-dot {
  top: 5px;
  right: 4px;
}

.h5-mode .xy-home-view {
  gap: 11px;
}

.h5-mode .xy-home-view .xy-hero {
  min-height: 129px;
  border: 1px solid #f0efff;
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.88), transparent 27%),
    linear-gradient(128deg, #f2f1ff 0%, #e9efff 58%, #f3f1ff 100%);
  box-shadow: 0 8px 25px rgba(72, 68, 130, 0.045);
}

.h5-mode .xy-home-view .xy-hero::after {
  display: none;
}

.h5-mode .xy-home-view .xy-hero-copy {
  width: 72%;
  padding: 17px 0 12px 18px;
}

.h5-mode .xy-home-view .xy-hero h1 {
  gap: 5px;
  margin-bottom: 4px;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.h5-mode .xy-home-view .xy-hero h1 svg {
  color: #54a9d5;
}

.h5-mode .xy-home-view .xy-hero p {
  width: 100%;
  color: #6f7280;
  font-size: 10px;
  line-height: 1.45;
  white-space: nowrap;
}

.h5-mode .xy-home-view .xy-hero-input {
  width: 100%;
  min-height: 47px;
  margin-top: 13px;
  padding: 4px 5px 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 7px 20px rgba(72, 68, 125, 0.055);
}

.h5-mode .xy-home-view .xy-hero-input textarea {
  min-width: 0;
  height: 37px;
  min-height: 37px;
  flex: 1;
  resize: none;
  overflow: hidden;
  padding: 2px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #565966;
  font-size: 16px;
  line-height: 1.65;
}

.h5-mode .xy-home-view .xy-hero-input button {
  width: 32px;
  height: 32px;
  box-shadow: 0 8px 16px rgba(91, 66, 232, 0.23);
}

.h5-mode .xy-home-view .xy-hero-mascot {
  right: 22px;
  bottom: 3px;
  width: 120px;
  height: 120px;
}

.h5-mode .xy-home-view .xy-bubble {
  top: 16px;
  right: 96px;
  width: 30px;
  height: 24px;
  color: #8e82ee;
  border-radius: 12px 12px 4px 12px;
}

.h5-mode .xy-home-view .xy-card {
  border-color: #edeef5;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 24px rgba(48, 50, 76, 0.045);
}

.h5-mode .xy-home-view .xy-section-heading {
  min-height: 28px;
}

.h5-mode .xy-home-view .xy-section-heading h2 {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.35px;
}

.h5-mode .xy-home-view .xy-section-heading > div > span:not(.xy-mini-label) {
  font-size: 10.5px;
}

.h5-mode .xy-home-view .xy-section-heading > div > span.is-preview i {
  background: #8f84ec;
}

.h5-mode .xy-home-view .xy-section-heading button {
  min-height: 32px;
  color: #747785;
  font-size: 11px;
}

.h5-mode .xy-home-view .xy-device-section,
.h5-mode .xy-home-view .xy-task-section {
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 12px;
}

.h5-mode .xy-home-view .xy-device-section {
  padding-bottom: 8px;
}

.h5-mode .xy-home-view .xy-task-section {
  padding-bottom: 9px;
}

.h5-mode .xy-home-view .xy-task-section > .xy-section-heading,
.h5-mode .xy-home-view .xy-task-section > .xy-section-heading button {
  min-height: 24px;
}

.h5-mode .xy-home-view .xy-device-carousel {
  margin-top: 0;
}

.h5-mode .xy-home-view .xy-device-track {
  gap: 9px;
  padding-bottom: 3px;
}

.h5-mode .xy-home-view .xy-device-card {
  width: 115px;
  min-height: 103px;
  padding: 10px 8px 8px;
  border-color: #eff0f5;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(50, 52, 79, 0.045);
}

.h5-mode .xy-home-view .xy-device-name {
  gap: 5px;
}

.h5-mode .xy-home-view .xy-device-name .xy-platform-icon {
  width: 29px;
  height: 29px;
  border-radius: 9px;
}

.h5-mode .xy-home-view .xy-device-name strong {
  font-size: 9.5px;
  font-weight: 600;
}

.h5-mode .xy-home-view .xy-device-name > span {
  padding: 2px 4px;
  font-size: 7px;
}

.h5-mode .xy-home-view .xy-device-card > p {
  margin: 9px 0 7px;
  font-size: 8.5px;
}

.h5-mode .xy-home-view .xy-device-runtime > span {
  font-size: 7.5px;
}

.h5-mode .xy-home-view .xy-device-runtime strong {
  font-size: 8.5px;
}

.h5-mode .xy-home-view .xy-progress-ring {
  width: 28px;
  height: 28px;
}

.h5-mode .xy-home-view .xy-progress-ring::before {
  width: 22px;
  height: 22px;
}

.h5-mode .xy-home-view .xy-device-card.platform-douyin .xy-progress-ring {
  background: conic-gradient(#35bdb7 var(--progress), #edf1f5 0);
}

.h5-mode .xy-home-view .xy-device-card.platform-kuaishou .xy-progress-ring {
  background: conic-gradient(#3e98e9 var(--progress), #edf1f5 0);
}

.h5-mode .xy-home-view .xy-device-card.platform-xiaohongshu .xy-progress-ring {
  background: conic-gradient(#20bc68 var(--progress), #edf1f5 0);
}

.h5-mode .xy-home-view .xy-device-card.platform-douyin .xy-progress-ring b {
  color: #2baea8;
}

.h5-mode .xy-home-view .xy-device-card.platform-kuaishou .xy-progress-ring b {
  color: #338add;
}

.h5-mode .xy-home-view .xy-device-card.platform-xiaohongshu .xy-progress-ring b {
  color: #19aa5c;
}

.h5-mode .xy-home-view .xy-platform-icon.platform-douyin,
.h5-mode .xy-home-view .xy-platform-icon.platform-x {
  background: #16161f;
  color: #ffffff;
}

.h5-mode .xy-home-view .xy-platform-icon.platform-kuaishou {
  background: #ff5b16;
  color: #ffffff;
}

.h5-mode .xy-home-view .xy-platform-icon.platform-xiaohongshu {
  background: #ff2442;
  color: #ffffff;
}

.h5-mode .xy-home-view .xy-platform-icon.platform-wechat,
.h5-mode .xy-home-view .xy-platform-icon.platform-wechat_channels {
  background: #20bf5b;
  color: #ffffff;
}

.h5-mode .xy-home-view .xy-platform-icon.platform-telegram {
  background: #29a9ea;
  color: #ffffff;
}

.h5-mode .xy-home-view .xy-filter-carousel {
  margin: 2px 0 3px;
}

.h5-mode .xy-home-view .xy-filter-track {
  gap: 3px;
  padding-right: 11px;
}

.h5-mode .xy-home-view .xy-filter {
  min-height: 24px;
  padding: 0 5px;
  font-size: 10px;
}

.h5-mode .xy-home-view .xy-filter .xy-platform-icon {
  width: 18px;
  height: 18px;
  background: transparent;
  border-radius: 0;
  color: var(--platform-color);
}

.h5-mode .xy-home-view .xy-filter.is-active {
  padding-right: 9px;
  padding-left: 9px;
}

.h5-mode .xy-home-view .xy-task-list {
  gap: 4px;
}

.h5-mode .xy-home-view .xy-task-row {
  min-height: 43px;
  gap: 9px;
  padding: 5px 5px 5px 8px;
  border-color: #eff0f5;
  border-radius: 13px;
  box-shadow: 0 3px 10px rgba(51, 53, 78, 0.03);
}

.h5-mode .xy-home-view .xy-task-row .xy-platform-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.h5-mode .xy-home-view .xy-task-copy strong {
  font-size: 10.5px;
  font-weight: 600;
}

.h5-mode .xy-home-view .xy-task-copy small {
  margin-top: 1px;
  font-size: 8.5px;
}

.h5-mode .xy-home-view .xy-task-row > em {
  padding: 4px 7px;
  font-size: 9px;
}

.h5-mode .xy-home-view .xy-task-control {
  width: 29px;
  height: 29px;
}

.h5-mode .xy-home-view .xy-ai-banner {
  height: 52px;
  min-height: 52px;
  padding: 0 9px 0 5px;
  border-color: #e8e6fb;
  border-radius: 15px;
  background: linear-gradient(112deg, #efedff 0%, #ebefff 58%, #f4f2ff 100%);
}

.h5-mode .xy-home-view .xy-ai-banner img {
  width: 64px;
  height: 64px;
  transform: translateY(11px);
}

.h5-mode .xy-home-view .xy-ai-banner strong {
  font-size: 12px;
}

.h5-mode .xy-home-view .xy-ai-banner small {
  font-size: 9.5px;
}

.h5-mode .xy-home-view .xy-ai-banner > b {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 18px;
  font-size: 10.5px;
}

.h5-mode .xy-home-view .xy-data-overview {
  padding: 5px 8px;
}

.h5-mode .xy-home-view .xy-data-overview .xy-section-heading {
  min-height: 24px;
  padding: 0 4px;
}

.h5-mode .xy-home-view .xy-data-overview .xy-section-heading button {
  min-height: 24px;
}

.h5-mode .xy-home-view .xy-data-overview .xy-section-heading h2 {
  font-size: 15px;
}

.h5-mode .xy-home-view .xy-metric-grid {
  gap: 6px;
  margin-top: 5px;
}

.h5-mode .xy-home-view .xy-metric-grid button {
  min-height: 52px;
  padding: 7px;
  border-color: #eef0f4;
  border-radius: 12px;
  background: #ffffff;
}

.h5-mode .xy-home-view .xy-metric-grid small {
  font-size: 7.5px;
}

.h5-mode .xy-home-view .xy-metric-grid strong {
  margin-top: 4px;
  font-size: 14px;
}

.h5-mode .xy-home-view .xy-metric-grid em {
  right: 5px;
  bottom: 6px;
  font-size: 6.5px;
}

.h5-mode .xy-bottom-nav,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-bottom-nav {
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  min-height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
  border-top-color: #eff0f5;
  box-shadow: 0 -8px 28px rgba(48, 50, 75, 0.04);
}

.h5-mode .xy-bottom-nav button {
  min-height: 46px;
  gap: 2px;
  font-size: 10px;
}

@media (max-width: 374px) {
  .h5-mode .xy-scroll-content,
  .h5-mode .mobile-app-viewport[data-platform="android"] .xy-scroll-content {
    padding-right: 12px;
    padding-left: 12px;
  }

  .h5-mode .xy-home-view .xy-hero-copy {
    width: 68%;
    padding-left: 15px;
  }

  .h5-mode .xy-home-view .xy-hero p {
    font-size: 9.5px;
  }

  .h5-mode .xy-home-view .xy-hero-mascot {
    right: -3px;
  }
}

/* Shared account + first-level referral, branded for Xiaoling. */
.xy-invite-banner {
  position: relative;
  display: grid;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 12px;
  padding: 10px 38px 10px 10px;
  color: #383047;
  background: linear-gradient(135deg, #fff8ee 0%, #f5f1ff 100%);
  border: 1px solid #eee2d1;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(73, 58, 126, 0.07);
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.xy-invite-banner-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #7057e8;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
}

.xy-invite-banner > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-invite-banner strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-invite-banner small {
  margin-top: 3px;
  color: #807989;
  font-size: 8px;
}

.xy-invite-banner > button:not(.xy-invite-banner-close) {
  min-height: 32px;
  padding: 0 10px;
  color: #fff;
  background: #6b56e8;
  border: 0;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
}

.xy-invite-banner-close {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 28px;
  height: 28px;
  color: #9b94a5;
  background: transparent;
  border: 0;
  font-size: 18px;
}

.xy-account-overlay,
.xy-referral-overlay {
  position: absolute;
  z-index: 180;
  inset: 0;
  overflow: hidden;
  background: #f8f8fd;
}

.xy-account-scroll,
.xy-referral-scroll {
  background:
    radial-gradient(circle at 85% 1%, rgba(112, 86, 235, 0.13), transparent 28%),
    #f8f8fd;
}

.xy-account-screen,
.xy-referral-screen {
  min-height: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 30px);
}

.xy-account-back,
.xy-referral-screen > header > button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #514d61;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e7e5ef;
  border-radius: 14px;
  box-shadow: 0 7px 20px rgba(48, 43, 81, 0.07);
}

.xy-account-hero {
  position: relative;
  display: flex;
  min-height: 172px;
  align-items: flex-start;
  gap: 11px;
  margin-top: 12px;
  padding: 22px 15px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 30%, rgba(139, 117, 255, 0.2), transparent 36%),
    linear-gradient(140deg, #ffffff 0%, #efefff 100%);
  border: 1px solid #e7e4fa;
  border-radius: 25px;
}

.xy-account-hero > span {
  display: grid;
  width: 43px;
  height: 43px;
  overflow: hidden;
  place-items: center;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(75, 57, 171, 0.11);
}

.xy-account-hero > span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xy-account-hero > div {
  position: relative;
  z-index: 2;
  max-width: 65%;
  padding-top: 2px;
}

.xy-account-hero small {
  color: #725de4;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.xy-account-hero h1 {
  margin: 7px 0 5px;
  font-size: 22px;
  line-height: 1.2;
}

.xy-account-hero p {
  margin: 0;
  color: #777583;
  font-size: 9px;
  line-height: 1.6;
}

.xy-account-hero > img {
  position: absolute;
  right: -18px;
  bottom: -15px;
  width: 150px;
  height: 150px;
  object-fit: contain;
  pointer-events: none;
}

.xy-account-card {
  position: relative;
  z-index: 2;
  margin-top: -27px;
  padding: 16px 15px 17px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #e8e7ef;
  border-radius: 23px;
  box-shadow: 0 16px 40px rgba(44, 38, 83, 0.1);
}

.xy-account-reason {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 13px;
  padding: 9px 10px;
  color: #695b97;
  background: #f5f2ff;
  border-radius: 11px;
  font-size: 9px;
}

.xy-account-reason svg {
  color: #6e59ea;
  flex: 0 0 auto;
}

.xy-account-tabs {
  display: grid;
  gap: 5px;
  padding: 4px;
  background: #f2f2f7;
  border-radius: 13px;
  grid-template-columns: repeat(2, 1fr);
}

.xy-account-tabs button {
  min-height: 38px;
  color: #8b8994;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

.xy-account-tabs button.is-active {
  color: #5947d1;
  background: #fff;
  box-shadow: 0 5px 14px rgba(64, 55, 105, 0.08);
}

.xy-account-form {
  display: flex;
  gap: 12px;
  margin-top: 15px;
  flex-direction: column;
}

.xy-account-form > label {
  display: flex;
  gap: 7px;
  color: #5e5c69;
  flex-direction: column;
  font-size: 10px;
  font-weight: 600;
}

.xy-account-form > label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xy-account-form > label > span em {
  color: #a2a0aa;
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
}

.xy-account-form input {
  width: 100%;
  height: 47px;
  padding: 0 13px;
  color: #262530;
  background: #fafafe;
  border: 1px solid #dedde8;
  border-radius: 13px;
  outline: 0;
  font-size: 16px;
}

.xy-account-form input:focus {
  background: #fff;
  border-color: #7b68ed;
  box-shadow: 0 0 0 3px rgba(112, 87, 234, 0.1);
}

.xy-password-field {
  position: relative;
}

.xy-password-field input {
  padding-right: 48px;
}

.xy-password-field button {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 46px;
  height: 47px;
  place-items: center;
  color: #8d899c;
  background: transparent;
  border: 0;
}

.xy-account-forgot {
  align-self: flex-end;
  margin: -8px 1px 0;
  padding: 4px 0;
  color: #6550df;
  background: transparent;
  border: 0;
  font-size: 10px;
  font-weight: 600;
}

.xy-account-consent {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  color: #82808c;
  flex-wrap: wrap;
  font-size: 8.5px;
}

.xy-account-consent > button {
  padding: 0;
  color: #6853df;
  background: transparent;
  border: 0;
  font-size: 8.5px;
}

.xy-account-consent > button:first-child {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #82808c;
  text-align: left;
}

.xy-account-consent i {
  display: grid;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  place-items: center;
  color: #fff;
  background: #fff;
  border: 1px solid #c8c6d1;
  border-radius: 6px;
  font-size: 11px;
  font-style: normal;
}

.xy-account-consent > button.is-accepted i {
  background: #6c56e8;
  border-color: #6c56e8;
}

.xy-account-error {
  margin: -3px 0 0;
  padding: 8px 10px;
  color: #bf3348;
  background: #fff1f3;
  border-radius: 10px;
  font-size: 9px;
  line-height: 1.5;
}

.xy-account-success {
  margin: -3px 0 0;
  padding: 8px 10px;
  color: #26744a;
  background: #edf9f1;
  border-radius: 10px;
  font-size: 9px;
  line-height: 1.5;
}

.xy-account-submit {
  min-height: 48px;
  color: #fff;
  background: linear-gradient(135deg, #7862f0, #5944d5);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 23px rgba(94, 70, 218, 0.23);
  font-size: 12px;
  font-weight: 700;
}

.xy-account-submit:disabled {
  opacity: 0.65;
}

.xy-account-switch {
  margin: 15px 0 0;
  color: #898792;
  text-align: center;
  font-size: 9px;
}

.xy-account-switch button {
  padding: 4px;
  color: #6550df;
  background: transparent;
  border: 0;
  font-size: 9px;
  font-weight: 600;
}

.xy-account-security {
  margin: 14px 18px 0;
  color: #9896a2;
  text-align: center;
  font-size: 8px;
  line-height: 1.6;
}


.xy-sms-unavailable > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #6c57e6;
  background: #f0edff;
  border-radius: 19px;
}

.xy-sms-unavailable strong {
  margin-top: 13px;
  font-size: 13px;
}

.xy-sms-unavailable p {
  max-width: 250px;
  margin: 7px 0 14px;
  color: #888691;
  font-size: 9px;
  line-height: 1.6;
}

.xy-sms-unavailable button {
  min-height: 38px;
  padding: 0 15px;
  color: #6651df;
  background: #f1eeff;
  border: 0;
  border-radius: 11px;
  font-size: 9px;
  font-weight: 600;
}

.xy-legal-overlay {
  position: absolute;
  z-index: 230;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 18px;
  background: rgba(26, 23, 42, 0.5);
  backdrop-filter: blur(7px);
}

.xy-legal-overlay section {
  padding: 20px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(18, 15, 34, 0.24);
}

.xy-legal-overlay h2 {
  margin: 0 0 10px;
  font-size: 17px;
}

.xy-legal-overlay p {
  margin: 0;
  color: #74717d;
  font-size: 10px;
  line-height: 1.8;
}

.xy-legal-overlay button {
  width: 100%;
  min-height: 44px;
  margin-top: 17px;
  color: #fff;
  background: #6853df;
  border: 0;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 600;
}

.xy-referral-screen > header {
  display: grid;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
  grid-template-columns: 68px minmax(0, 1fr) 68px;
}

.xy-referral-screen > header > div {
  min-width: 0;
}

.xy-referral-screen > header small {
  color: #735fe4;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.xy-referral-screen > header h1 {
  margin: 2px 0;
  font-size: 22px;
}

.xy-referral-screen > header p {
  margin: 0;
  color: #85828e;
  font-size: 8px;
}

.xy-referral-screen > header > button:last-child {
  font-size: 20px;
}

.xy-referral-loading {
  display: flex;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  color: #5e5a6b;
  flex-direction: column;
}

.xy-referral-loading span {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border: 3px solid #e5e1fa;
  border-top-color: #6b56e8;
  border-radius: 50%;
  animation: xy-referral-spin 0.8s linear infinite;
}

.xy-referral-loading strong {
  font-size: 12px;
}

.xy-referral-loading small {
  margin-top: 5px;
  color: #92909b;
  font-size: 8px;
}

@keyframes xy-referral-spin {
  to {
    transform: rotate(360deg);
  }
}

.xy-referral-hero {
  display: grid;
  align-items: center;
  gap: 11px;
  padding: 15px;
  background:
    radial-gradient(circle at 96% 4%, rgba(154, 128, 255, 0.22), transparent 34%),
    linear-gradient(140deg, #ffffff, #eeefff);
  border: 1px solid #e5e2f7;
  border-radius: 23px;
  box-shadow: 0 12px 32px rgba(60, 50, 112, 0.09);
  grid-template-columns: minmax(0, 1fr) 96px;
}

.xy-referral-hero > div:first-child {
  min-width: 0;
}

.xy-referral-hero > div:first-child > span {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  color: #6c55e6;
  background: #fff;
  border-radius: 12px;
}

.xy-referral-hero > div:first-child > small {
  display: block;
  margin-top: 9px;
  color: #898592;
  font-size: 8px;
}

.xy-referral-hero > div:first-child > strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #4c3abb;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-referral-hero p {
  margin: 7px 0 0;
  color: #777482;
  font-size: 8px;
  line-height: 1.6;
}

.xy-referral-hero > img {
  width: 96px;
  height: 96px;
  padding: 5px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(52, 43, 98, 0.09);
}

.xy-referral-actions {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, 1fr);
}

.xy-referral-actions button {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #5e49d7;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ded9f7;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
}

.xy-referral-truth {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #777482;
  grid-column: 1 / -1;
  font-size: 7.5px;
}

.xy-referral-truth svg {
  color: #6550de;
}

.xy-referral-metrics {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  grid-template-columns: repeat(4, 1fr);
}

.xy-referral-metrics > div {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  color: #6d58e6;
  background: #fff;
  border: 1px solid #ecebf1;
  border-radius: 15px;
  flex-direction: column;
}

.xy-referral-metrics strong {
  margin-top: 5px;
  color: #292733;
  font-size: 15px;
}

.xy-referral-metrics small {
  margin-top: 2px;
  color: #92909a;
  text-align: center;
  font-size: 7px;
}

.xy-referral-section {
  margin-top: 10px;
  padding: 13px;
}

.xy-referral-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.xy-referral-section-heading > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-referral-section-heading strong {
  font-size: 11px;
}

.xy-referral-section-heading small {
  margin-top: 3px;
  color: #92909a;
  font-size: 7.5px;
}

.xy-referral-section-heading button {
  min-height: 33px;
  padding: 0 10px;
  color: #fff;
  background: #6b56e8;
  border: 0;
  border-radius: 10px;
  font-size: 8px;
  font-weight: 600;
}

.xy-referral-section-heading button:disabled {
  color: #9996a2;
  background: #eeeeF3;
}

.xy-referral-section-heading > em {
  color: #6d58e6;
  font-size: 10px;
  font-style: normal;
}

.xy-referral-list,
.xy-leaderboard {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-direction: column;
}

.xy-referral-list > div {
  display: grid;
  min-height: 45px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #f0eff4;
  grid-template-columns: 31px minmax(0, 1fr) auto;
}

.xy-referral-list > div > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #6550dd;
  background: #f0edff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

.xy-referral-list > div > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-referral-list strong {
  font-size: 9px;
}

.xy-referral-list small,
.xy-referral-list em {
  color: #97949f;
  font-size: 7px;
  font-style: normal;
}

.xy-referral-list > div > em {
  color: #4aa36b;
}

.xy-referral-list > p,
.xy-leaderboard > p {
  margin: 5px 0 0;
  padding: 15px 3px;
  color: #94919c;
  text-align: center;
  font-size: 8px;
}

.xy-leaderboard > div {
  display: grid;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 7px;
  border-radius: 9px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

.xy-leaderboard > div.is-me {
  color: #5f4bd5;
  background: #f3f0ff;
}

.xy-leaderboard b {
  color: #8c8995;
  font-size: 9px;
}

.xy-leaderboard span,
.xy-leaderboard strong {
  overflow: hidden;
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-privacy-toggle {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 6px;
  color: inherit;
  text-align: left;
  background: #faf9fd;
  border: 0;
  border-radius: 11px;
}

.xy-privacy-toggle > i {
  position: relative;
  width: 34px;
  height: 20px;
  flex: 0 0 auto;
  background: #ccc9d4;
  border-radius: 999px;
}

.xy-privacy-toggle > i span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 160ms ease;
}

.xy-privacy-toggle > i.is-on {
  background: #6b56e8;
}

.xy-privacy-toggle > i.is-on span {
  transform: translateX(14px);
}

.xy-privacy-toggle > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-privacy-toggle strong {
  font-size: 9px;
}

.xy-privacy-toggle small {
  margin-top: 2px;
  color: #94919c;
  font-size: 7px;
}

@media (max-width: 360px) {
  .xy-account-screen,
  .xy-referral-screen {
    padding-right: 12px;
    padding-left: 12px;
  }

  .xy-account-hero > img {
    right: -34px;
  }

  .xy-referral-metrics {
    gap: 5px;
  }

  .xy-referral-metrics small {
    font-size: 6.5px;
  }
}

/* Phone → APP → task workspace, grounded in the phone-management reference. */
.xy-phone-manager {
  overflow: hidden;
  padding: 11px 10px 10px;
}

.xy-phone-manager .xy-section-heading {
  padding: 0 2px;
}

.xy-phone-manager .xy-section-heading > div {
  min-width: 0;
}

.xy-phone-manager .xy-section-heading > div > span {
  white-space: nowrap;
}

.xy-phone-empty {
  display: grid;
  align-items: center;
  gap: 10px 11px;
  margin: 10px 2px 2px;
  padding: 13px;
  background: linear-gradient(135deg, #faf9ff 0%, #f2f0ff 100%);
  border: 1px dashed #cec7f5;
  border-radius: 16px;
  grid-template-columns: 48px minmax(0, 1fr);
}

.xy-phone-empty-icon {
  position: relative;
  display: grid;
  width: 48px;
  height: 52px;
  place-items: center;
  color: #6653e8;
  background: #ffffff;
  border: 1px solid #e5e1fb;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(81, 62, 184, 0.08);
}

.xy-phone-empty-icon i {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #ffffff;
  background: #6d59ea;
  border: 2px solid #f4f2ff;
  border-radius: 50%;
}

.xy-phone-empty > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-phone-empty > div strong {
  color: #292a35;
  font-size: 12px;
  font-weight: 600;
}

.xy-phone-empty > div small {
  margin-top: 4px;
  color: #858895;
  font-size: 8.5px;
  line-height: 1.5;
}

.xy-phone-empty > button {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  grid-column: 1 / -1;
  color: #ffffff;
  background: #6d59ea;
  border: 0;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(85, 64, 203, 0.18);
}

.xy-phone-empty.is-compact {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  padding: 10px;
}

.xy-phone-empty.is-compact .xy-phone-empty-icon {
  width: 38px;
  height: 42px;
  border-radius: 12px;
}

.xy-phone-empty.is-compact > button {
  min-height: 34px;
  padding: 0 11px;
  grid-column: auto;
  white-space: nowrap;
}

.xy-phone-carousel {
  margin: 7px 0 0;
}

.xy-phone-track {
  display: flex;
  gap: 8px;
  padding: 1px 2px 5px;
}

.xy-phone-option {
  position: relative;
  display: flex;
  width: 148px;
  min-height: 62px;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px;
  color: #454854;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e7e8ef;
  border-radius: 14px;
  box-shadow: 0 5px 14px rgba(56, 58, 90, 0.035);
}

.xy-phone-option.is-selected {
  color: #4937c8;
  background: #f7f5ff;
  border-color: #7764ec;
  box-shadow: 0 7px 18px rgba(98, 77, 223, 0.11);
}

.xy-phone-option.is-offline {
  color: #8d8f99;
  background: #fafafb;
}

.xy-phone-option.is-inactive {
  color: #b0b2be;
  background: #f5f5f7;
  border-color: #e4e4ea;
  opacity: 0.72;
  cursor: not-allowed;
}

.xy-phone-option.is-inactive .xy-phone-device {
  color: #b0b2be;
  background: #ebebef;
}

.xy-phone-device {
  display: grid;
  width: 32px;
  height: 38px;
  place-items: center;
  flex: 0 0 auto;
  color: #6653e8;
  background: #efecff;
  border-radius: 10px;
}

.xy-phone-option.is-offline .xy-phone-device {
  color: #9c9da5;
  background: #f0f1f3;
}

.xy-phone-option > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-phone-option strong {
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-phone-option small {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: #828591;
  font-size: 8px;
}

.xy-phone-option small > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-phone-option small > em {
  padding: 2px 4px;
  color: #6451dc;
  background: #ece8ff;
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
}

.xy-phone-option small i {
  width: 6px;
  height: 6px;
  background: #25b767;
  border-radius: 50%;
}

.xy-phone-option.is-offline small i {
  background: #b7b9c1;
}

.xy-phone-check {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #6c58e9;
}

.xy-phone-manager.is-compact {
  padding-bottom: 8px;
}

.xy-phone-manager.is-compact .xy-phone-option {
  width: 128px;
  min-height: 52px;
}

.xy-phone-manager.is-compact .xy-phone-device {
  width: 28px;
  height: 32px;
}

.xy-unbound-guide {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  padding: 16px 14px 13px;
  background:
    radial-gradient(circle at 92% 8%, rgba(118, 96, 239, 0.16), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #f7f5ff 100%);
  border-color: #e7e2fb;
}

.xy-home-view.is-unbound .xy-unbound-guide {
  min-height: 420px;
}

.xy-unbound-visual {
  position: absolute;
  top: 9px;
  right: 8px;
  width: 104px;
  height: 92px;
}

.xy-unbound-visual > span {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 4px;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: #624fe0;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e5e0fb;
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(76, 58, 173, 0.1);
}

.xy-unbound-visual img {
  position: absolute;
  right: 31px;
  bottom: -2px;
  width: 72px;
  height: 82px;
  object-fit: contain;
  object-position: center bottom;
}

.xy-unbound-copy {
  width: calc(100% - 102px);
}

.xy-unbound-copy h2 {
  margin: 3px 0 5px;
  color: #24252f;
  font-size: 17px;
  line-height: 1.2;
}

.xy-unbound-copy p {
  margin: 0;
  color: #7b7e8b;
  font-size: 9px;
  line-height: 1.6;
}

.xy-unbound-guide ol {
  display: grid;
  gap: 7px;
  margin: 15px 0 11px;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xy-unbound-guide li {
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  gap: 7px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #ebe8f8;
  border-radius: 12px;
}

.xy-unbound-guide li em {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  flex: 0 0 auto;
  color: #ffffff;
  background: #6d59ea;
  border-radius: 50%;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.xy-unbound-guide li span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-unbound-guide li strong {
  color: #464854;
  font-size: 9px;
  font-weight: 600;
}

.xy-unbound-guide li small {
  margin-top: 2px;
  color: #9698a3;
  font-size: 7px;
  line-height: 1.35;
}

.xy-unbound-guide > button,
.xy-locked-workspace > button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #ffffff;
  background: linear-gradient(90deg, #7661ed 0%, #5d49d9 100%);
  border: 0;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 9px 20px rgba(86, 67, 196, 0.19);
}

.xy-unbound-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  color: #8f91a0;
  font-size: 7.5px;
}

.xy-unbound-note svg {
  color: #7360e6;
}

.xy-unbound-after {
  margin-top: auto;
  padding: 11px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e9e5f8;
  border-radius: 13px;
}

.xy-unbound-after > strong {
  display: block;
  margin-bottom: 7px;
  color: #50525f;
  font-size: 9px;
  font-weight: 600;
}

.xy-unbound-after > div {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xy-unbound-after span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: #7f8190;
  font-size: 7.5px;
  line-height: 1.35;
}

.xy-unbound-after svg {
  flex: 0 0 auto;
  color: #7160df;
}

.xy-locked-workspace {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 22px 16px 16px;
  text-align: center;
}

.xy-locked-workspace > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #6855e3;
  background: #efecff;
  border-radius: 17px;
}

.xy-locked-workspace h2 {
  margin: 10px 0 4px;
  color: #30313a;
  font-size: 14px;
}

.xy-locked-workspace p {
  margin: 0 0 13px;
  color: #8b8e99;
  font-size: 9px;
  line-height: 1.6;
}

.xy-command-builder {
  position: relative;
  min-height: 145px;
  overflow: hidden;
  padding: 11px 12px 10px;
  background: #faf9ff;
  border-color: #e8e5fb;
}

.xy-command-builder .xy-section-heading {
  position: relative;
  z-index: 2;
}

.xy-command-builder .xy-section-heading > div,
.xy-app-task-workspace .xy-section-heading > div,
.xy-task-app-context .xy-section-heading > div {
  display: block;
}

.xy-command-builder .xy-mini-label,
.xy-app-task-workspace .xy-mini-label,
.xy-task-app-context .xy-mini-label {
  display: block;
  margin-bottom: 2px;
}

.xy-command-context {
  position: relative;
  z-index: 2;
  display: flex;
  width: calc(100% - 82px);
  align-items: center;
  gap: 4px;
  margin: 7px 0 6px;
  color: #7a7d89;
  font-size: 8px;
}

.xy-command-context > span {
  display: inline-flex;
  min-width: 0;
  min-height: 23px;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  overflow: hidden;
  color: #5d4ad8;
  background: #ffffff;
  border: 1px solid #e8e5f8;
  border-radius: 999px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-command-context .xy-platform-icon {
  width: 17px;
  height: 17px;
  background: transparent;
  border-radius: 4px;
}

.xy-command-input {
  position: relative;
  z-index: 2;
  display: grid;
  width: calc(100% - 84px);
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 100px;
}

.xy-command-input textarea {
  min-width: 0;
  min-height: 58px;
  resize: none;
  padding: 8px 9px;
  color: #4f5260;
  background: #ffffff;
  border: 1px solid #e8e8ef;
  border-radius: 12px;
  outline: 0;
  font-size: 16px;
  line-height: 1.5;
}

.xy-command-input textarea:focus {
  border-color: #8c7bed;
  box-shadow: 0 0 0 3px rgba(108, 88, 232, 0.09);
}

.xy-command-input > button {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  color: #ffffff;
  background: #6d59ea;
  border: 0;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
}

.xy-command-builder > img {
  position: absolute;
  z-index: 1;
  right: -2px;
  bottom: -11px;
  width: 92px;
  height: 104px;
  object-fit: contain;
  object-position: center bottom;
}

.xy-default-task-guide {
  padding: 11px 12px;
  background: linear-gradient(145deg, #fbfaff, #f6f4ff);
  border-color: #e7e2fb;
}

.xy-default-task-guide-main {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #ece9fa;
  border-radius: 14px;
}

.xy-default-task-guide-main > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 auto;
  color: #6753df;
  background: #efecff;
  border-radius: 12px;
}

.xy-default-task-guide-main > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-default-task-guide-main strong {
  color: #3d3f4b;
  font-size: 10px;
}

.xy-default-task-guide-main small {
  margin-top: 4px;
  color: #7f8290;
  font-size: 8px;
  line-height: 1.5;
}

.xy-default-task-guide-main > button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  flex: 0 0 auto;
  color: #5c48d7;
  background: #f0edff;
  border: 0;
  border-radius: 10px;
  font-size: 8px;
  font-weight: 600;
}

.xy-app-task-workspace {
  padding: 11px 10px 10px;
}

.xy-app-picker {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xy-app-picker button {
  position: relative;
  display: flex;
  min-height: 57px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  color: #5f626f;
  text-align: left;
  background: #ffffff;
  border: 1px solid #ececf2;
  border-radius: 14px;
  box-shadow: 0 5px 14px rgba(52, 55, 86, 0.035);
}

.xy-app-picker button.is-selected {
  color: #4f3bd0;
  background: #f7f5ff;
  border-color: #806dec;
  box-shadow: 0 7px 18px rgba(97, 76, 218, 0.09);
}

.xy-app-picker button > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-app-picker button strong {
  font-size: 10.5px;
  font-weight: 600;
}

.xy-app-picker button small {
  margin-top: 3px;
  color: #9496a1;
  font-size: 7.5px;
}

.xy-app-picker button > svg:last-child {
  color: #8575e9;
  flex: 0 0 auto;
}

.xy-app-picker.is-compact {
  display: flex;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.xy-app-picker.is-compact::-webkit-scrollbar {
  display: none;
}

.xy-app-picker.is-compact button {
  width: 126px;
  min-height: 50px;
  flex: 0 0 auto;
}

.xy-app-empty {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 8px;
  color: #7c7f8c;
  background: #f8f8fb;
  border: 1px dashed #dcdde6;
  border-radius: 13px;
}

.xy-app-loading {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 8px;
  color: #9a9db0;
  font-size: 11px;
  background: #f8f8fb;
  border: 1px dashed #dcdde6;
  border-radius: 13px;
}

.xy-app-loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #d8dae8;
  border-top-color: #6c5ce7;
  border-radius: 50%;
  animation: xy-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes xy-spin {
  to { transform: rotate(360deg); }
}

.xy-app-empty > span {
  display: flex;
  flex-direction: column;
}

/* ─── Phone manage overlay (list + detail) ───────────────────────────────── */

.xy-phone-manage-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: #f7f6fb;
  overflow: hidden;
}

/* Header */
.xy-phone-list-header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  min-height: calc(58px + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  background: #fff;
  border-bottom: 1px solid #eeeaf2;
  flex-shrink: 0;
}

.xy-phone-list-header button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3d3847;
  cursor: pointer;
}

.xy-phone-list-header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  color: #1e1b28;
}

.xy-phone-list-add {
  color: #6c42d8 !important;
}

/* Phone list */
.xy-phone-list-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 15px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xy-phone-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  color: #9994a6;
  text-align: center;
}

.xy-phone-list-empty strong {
  font-size: 15px;
  color: #4a4455;
}

.xy-phone-list-empty small {
  font-size: 12px;
}

.xy-phone-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border: 1px solid #ece8f3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(80, 55, 120, 0.045);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.xy-phone-list-item:active {
  transform: scale(0.99);
}

.xy-phone-list-item.is-active {
  border-color: #c8b3f0;
  background: #fdfaff;
}

.xy-phone-list-item.is-offline {
  opacity: 0.65;
}

.xy-phone-list-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1ecfc;
  color: #7040dc;
  flex-shrink: 0;
}

.xy-phone-list-icon i {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.xy-phone-list-icon i.is-online { background: #34c759; }
.xy-phone-list-icon i.is-offline { background: #aaa5b4; }

.xy-phone-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.xy-phone-list-body strong {
  font-size: 15px;
  font-weight: 650;
  color: #231e30;
}

.xy-phone-list-body small {
  font-size: 12px;
  color: #8e8999;
}

.xy-phone-list-battery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.xy-battery-bar {
  position: relative;
  width: 30px;
  height: 12px;
  border: 1.5px solid #b0a8c0;
  border-radius: 3px;
  background: #f0edf5;
  overflow: hidden;
}

.xy-battery-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 3px;
  height: 5px;
  border-radius: 0 1px 1px 0;
  background: #b0a8c0;
  transform: translateY(-50%);
}

.xy-battery-bar > span {
  display: block;
  height: 100%;
  border-radius: 1px;
  transition: width 300ms ease;
}

.xy-phone-list-battery em {
  font-size: 10px;
  font-style: normal;
  color: #7e7a8a;
}

.xy-phone-list-caret {
  color: #b8b4c2;
  flex-shrink: 0;
}

/* Phone detail */
.xy-phone-detail-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 15px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xy-phone-detail-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px 18px;
  border: 1px solid #ece8f3;
  border-radius: 18px;
  background: #fff;
}

.xy-phone-detail-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(145deg, #f0e9ff, #faf7ff);
  color: #7040dc;
}

.xy-phone-detail-icon i {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border: 2.5px solid #fff;
  border-radius: 50%;
}

.xy-phone-detail-icon i.is-online { background: #34c759; }
.xy-phone-detail-icon i.is-offline { background: #aaa5b4; }

.xy-phone-detail-name {
  display: flex;
  align-items: center;
  gap: 7px;
}

.xy-phone-detail-name strong {
  font-size: 19px;
  font-weight: 720;
  color: #1e1b28;
}

.xy-phone-detail-name button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e4dff0;
  border-radius: 8px;
  background: #f8f5ff;
  color: #7040dc;
  cursor: pointer;
}

.xy-phone-detail-identity > small {
  font-size: 12px;
  color: #8e8999;
}

.xy-device-rename {
  display: flex;
  align-items: center;
  gap: 7px;
}

.xy-device-rename input {
  flex: 1;
  height: 36px;
  padding: 0 11px;
  border: 1.5px solid #9b72e8;
  border-radius: 9px;
  background: #fff;
  color: #1e1b28;
  font-size: 16px;
  font: inherit;
  outline: none;
  box-shadow: 0 0 0 3px rgba(113, 64, 220, 0.08);
}

.xy-device-rename button {
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.xy-device-rename button.is-save {
  background: linear-gradient(100deg, #7443ef, #a050e8);
  color: #fff;
  font-weight: 650;
}

.xy-device-rename button.is-cancel {
  background: #f0edf5;
  color: #6c6577;
}

/* Info grid */
.xy-phone-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.xy-phone-info-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid #ece8f3;
  border-radius: 14px;
  background: #fff;
}

.xy-phone-info-block > span:first-child {
  font-size: 11px;
  color: #9290a0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.xy-phone-info-block strong {
  font-size: 15px;
  font-weight: 650;
  color: #231e30;
}

.xy-phone-info-block small {
  font-size: 11px;
  color: #8c8997;
}

.xy-battery-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xy-battery-bar-lg {
  flex: 1;
  height: 10px;
  border: 1.5px solid #b0a8c0;
  border-radius: 4px;
  background: #f0edf5;
  overflow: hidden;
  position: relative;
}

.xy-battery-bar-lg > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 300ms ease;
}

.xy-battery-display strong {
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.xy-wifi-chip {
  display: flex;
  align-items: center;
  gap: 5px;
}

.xy-wifi-chip strong {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.xy-wifi-chip.is-connected { color: #2a9d5c; }
.xy-wifi-chip.is-disconnected { color: #9a94a6; }

.xy-phone-current-task {
  font-size: 12px;
  color: #6d6877;
  line-height: 1.4;
}

.xy-phone-info-apps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #ece8f3;
  border-radius: 14px;
  background: #fff;
}

.xy-phone-info-apps > span {
  font-size: 11px;
  color: #9290a0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.xy-phone-app-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Records list: refresh button + load more */

.xy-record-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xy-record-refresh-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e4e0ed;
  border-radius: 8px;
  background: #f8f5fd;
  color: #7040dc;
  cursor: pointer;
}

.xy-record-refresh-btn:active svg {
  animation: xy-spin 600ms linear;
}

.xy-record-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 4px;
  border: 1px dashed #cec9db;
  border-radius: 12px;
  background: transparent;
  color: #7040dc;
  font-size: 13px;
  font: inherit;
  cursor: pointer;
  transition: background 120ms ease;
}

.xy-record-load-more:active {
  background: #f3edff;
}

.xy-app-empty strong {
  font-size: 10px;
}

.xy-app-empty small {
  margin-top: 2px;
  font-size: 8px;
}

.xy-corresponding-tasks {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #eeeeF4;
}

.xy-task-picker-heading {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
}

.xy-task-picker-heading > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.xy-task-picker-heading em {
  padding: 3px 7px;
  color: #6451dc;
  background: #efecff;
  border-radius: 999px;
  font-size: 7px;
  font-style: normal;
}

.xy-task-picker-heading strong {
  color: #31323c;
  font-size: 11px;
}

.xy-task-picker-heading small {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #92949f;
  font-size: 8px;
}

.xy-task-picker-heading small > span {
  white-space: nowrap;
}

.xy-task-picker-heading small > b {
  padding: 3px 6px;
  color: #428bd6;
  background: #edf6ff;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 600;
  white-space: nowrap;
}

.xy-current-context-task {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 7px 8px;
  color: #454753;
  text-align: left;
  background: #f8f7ff;
  border: 1px solid #e1dcfb;
  border-radius: 14px;
}

.xy-current-context-task > span:not(.xy-platform-icon) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-current-context-task > .xy-platform-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
}

.xy-current-context-task strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-current-context-task small {
  overflow: hidden;
  margin-top: 3px;
  color: #898c98;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-current-context-task > em {
  padding: 4px 7px;
  color: #6551dc;
  background: #eeeaff;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.xy-current-context-task > em.is-running {
  color: #149c55;
  background: #eaf9f0;
}

.xy-task-list.is-contextual {
  gap: 5px;
  margin-top: 5px;
}

.xy-task-list.is-contextual .xy-task-row {
  min-height: 48px;
}

.xy-task-list.is-contextual .xy-task-control {
  display: none;
}

.xy-context-create {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 7px;
  color: #5d49db;
  background: #f0edff;
  border: 0;
  border-radius: 11px;
  font-size: 9px;
  font-weight: 600;
}

.xy-task-app-context {
  padding: 11px;
}

.xy-phone-unbind-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid #f0dfe3;
  border-radius: 14px;
  background: #fffafb;
}

.xy-phone-unbind-card > div:first-child {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.xy-phone-unbind-card > div:first-child strong { color: #4b3037; font-size: 13px; }
.xy-phone-unbind-card > div:first-child small { color: #94777f; font-size: 11px; line-height: 1.45; }

.xy-phone-unbind-button {
  min-height: 38px;
  padding: 0 13px;
  color: #bd5361;
  background: #fff1f3;
  border: 1px solid #efccd2;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.xy-phone-unbind-confirm {
  display: flex;
  width: 100%;
  flex: 1 0 100%;
  flex-direction: column;
  gap: 10px;
}

.xy-phone-unbind-card:has(.xy-phone-unbind-confirm) { align-items: stretch; flex-wrap: wrap; }
.xy-phone-unbind-confirm > span { color: #74434d; font-size: 12px; }
.xy-phone-unbind-confirm > div { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }

.xy-phone-unbind-confirm button {
  min-height: 40px;
  color: #6d6877;
  background: #fff;
  border: 1px solid #e4dfe6;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
}

.xy-phone-unbind-confirm button.is-danger { color: #fff; background: #c95765; border-color: #c95765; }
.xy-phone-unbind-confirm button:disabled { opacity: .55; }

.xy-task-app-context .xy-section-heading h2,
.xy-phone-manager.is-compact .xy-section-heading h2 {
  margin-top: 4px;
}

.xy-sheet-phone-picker {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xy-sheet-phone-picker button {
  position: relative;
  display: flex;
  min-height: 51px;
  align-items: center;
  gap: 5px;
  padding: 6px;
  color: #666977;
  text-align: left;
  background: #f8f8fb;
  border: 1px solid #e9e9ef;
  border-radius: 12px;
}

.xy-sheet-phone-picker button.is-active {
  color: #5e49df;
  background: #f0edff;
  border-color: #a99cf0;
}

.xy-sheet-phone-picker button:disabled,
.xy-sheet-phone-picker button.is-inactive {
  color: #c0c2cc;
  background: #f5f5f7;
  border-color: #e4e4ea;
  opacity: 0.7;
  cursor: not-allowed;
}

.xy-sheet-phone-picker button > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xy-sheet-phone-picker strong,
.xy-sheet-phone-picker small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-sheet-phone-picker strong {
  font-size: 8.5px;
}

.xy-sheet-phone-picker small {
  margin-top: 2px;
  color: #92949f;
  font-size: 7px;
}

.xy-empty-state.is-inline {
  min-height: 62px;
  padding: 8px;
}

@media (max-width: 390px) {
  .xy-phone-option {
    width: 112px;
  }

  .xy-command-input {
    width: calc(100% - 76px);
    grid-template-columns: minmax(0, 1fr);
  }

  .xy-command-input > button {
    min-height: 34px;
  }

  .xy-command-builder > img {
    width: 84px;
  }
}

/* Shared Xiaoxi release/download mechanics, rendered in the Xiaoling brand. */
.xy-update-banner {
  position: relative;
  z-index: 6;
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 11px 9px 12px;
  overflow: hidden;
  color: #302a49;
  text-align: left;
  background: linear-gradient(135deg, #f0edff, #ffffff);
  border: 1px solid rgba(108, 86, 232, 0.2);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(79, 61, 167, 0.1);
}

.xy-update-banner-copy,
.xy-update-banner-action {
  margin: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.xy-update-banner-copy {
  flex: 1 1 auto;
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
}

.xy-update-banner-copy strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-update-banner-copy small {
  overflow: hidden;
  color: #706987;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-update-banner-action {
  flex: 0 0 auto;
  min-width: 76px;
  height: 32px;
  padding: 0 13px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  border-radius: 999px;
  background: linear-gradient(135deg, #846cf2, #6750d9);
  box-shadow: 0 7px 16px rgba(86, 66, 191, 0.22);
}

.xy-update-banner-copy:focus-visible,
.xy-update-banner-action:focus-visible {
  outline: 3px solid rgba(108, 86, 232, 0.22);
  outline-offset: 2px;
}

.xy-bottom-nav button {
  position: relative;
}

.xy-update-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  width: 7px;
  height: 7px;
  background: #ff5c6f;
  border: 2px solid #fff;
  border-radius: 50%;
}

.xy-invite-banner-actions {
  display: grid !important;
  gap: 4px;
  grid-template-columns: 1fr !important;
}

.xy-invite-banner-actions button {
  min-width: 54px;
  min-height: 26px;
  padding: 0 8px;
  color: #fff;
  background: #6b56e8;
  border: 0;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 600;
}

.xy-invite-banner-actions button:last-child {
  color: #6853df;
  background: #fff;
  border: 1px solid #ded8f5;
}

.xy-account-download-link {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  color: #614cda;
  background: #f4f1ff;
  border: 0;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
}

.xy-referral-download-link {
  display: grid;
  width: 100%;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  color: #5e49d7;
  text-align: left;
  background: linear-gradient(135deg, #f1eeff, #fff);
  border: 1px solid #ded9f7;
  border-radius: 16px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.xy-referral-download-link > span {
  display: flex;
  flex-direction: column;
}

.xy-referral-download-link strong {
  color: #3a3547;
  font-size: 9.5px;
}

.xy-referral-download-link small {
  margin-top: 3px;
  color: #898593;
  font-size: 7px;
  line-height: 1.5;
}

/* Xiaoling invitation and leaderboard pages use the same violet card language as 我的. */
.xy-referral-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 14px;
  padding: 4px;
  border-radius: 13px;
  background: #f2f0fc;
}
.xy-referral-periods button {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #77718d;
  font-size: 13px;
  font-weight: 650;
}
.xy-referral-periods button.is-active {
  background: #fff;
  color: #6549dc;
  box-shadow: 0 3px 10px rgba(71, 54, 151, .1);
}
.xy-referral-disclosure {
  display: block;
  margin-top: 10px;
  color: #837d96;
  font-size: 11px;
  line-height: 1.5;
}
.xy-referral-rewards { margin-top: 10px; }
.xy-referral-rewards > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #f0edf8;
  font-size: 12px;
}
.xy-referral-rewards > div strong { flex: 0 0 auto; color: #664be0; }
.xy-referral-rewards > p { color: #89839a; font-size: 12px; }
.xy-referral-loading > button {
  margin-top: 16px;
  padding: 10px 18px;
  border: 0;
  border-radius: 11px;
  background: #7055e8;
  color: #fff;
  font-size: 13px;
}
.xy-referral-screen > header small,
.xy-referral-screen > header p,
.xy-referral-hero > div:first-child > small,
.xy-referral-hero p,
.xy-referral-truth,
.xy-referral-metrics small,
.xy-referral-section-heading small,
.xy-referral-list small,
.xy-referral-list em,
.xy-referral-list > p,
.xy-leaderboard > p,
.xy-privacy-toggle small,
.xy-referral-download-link small { font-size: 11px; }
.xy-referral-screen > header h1 { font-size: 22px; }
.xy-referral-hero > div:first-child > strong { font-size: 19px; }
.xy-referral-actions button,
.xy-referral-section-heading button,
.xy-referral-list strong,
.xy-leaderboard span,
.xy-leaderboard strong,
.xy-referral-download-link strong { font-size: 12px; }
.xy-referral-section-heading strong { font-size: 15px; }
.xy-referral-metrics strong { font-size: 17px; }
.xy-referral-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xy-referral-metrics > div { min-height: 84px; }
.xy-referral-loading strong { font-size: 14px; }
.xy-referral-loading small { font-size: 12px; }

.xy-public-invite-route { min-height: 100dvh; background: #f8f7ff; }
.xy-public-invite {
  display: grid;
  gap: 14px;
  max-width: 600px;
  min-height: 100dvh;
  margin: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 100px);
  align-content: start;
}
.xy-public-invite-toolbar { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; text-align: center; }
.xy-public-invite-toolbar button { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 13px; background: #fff; color: #56418d; }
.xy-public-invite-toolbar strong { color: #282039; font-size: 17px; }
.xy-public-invite-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  min-height: 175px;
  padding: 20px;
  border-radius: 25px;
  background: radial-gradient(circle at 92% 12%, #d9d1ff, transparent 55%), linear-gradient(135deg, #f8f6ff, #eae9ff);
  overflow: hidden;
}
.xy-public-invite-hero small { color: #7055d0; font-size: 12px; font-weight: 700; }
.xy-public-invite-hero h1 { margin: 8px 0; color: #312155; font-size: 22px; line-height: 1.3; }
.xy-public-invite-hero p { margin: 0; color: #77708e; font-size: 12px; line-height: 1.6; }
.xy-public-invite-hero img { width: 125px; max-width: none; justify-self: center; object-fit: contain; }
.xy-public-invite-card { padding: 17px; border-radius: 20px; background: #fff; }
.xy-public-invite-title { display: flex; align-items: center; gap: 10px; color: #6a50df; }
.xy-public-invite-title > div { display: flex; flex-direction: column; gap: 3px; }
.xy-public-invite-title strong { color: #322c40; font-size: 15px; }
.xy-public-invite-title small { color: #837d94; font-size: 11px; }
.xy-public-invite-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.xy-public-invite-benefits > div { display: flex; flex-direction: column; gap: 4px; padding: 13px; border-radius: 13px; background: #f5f2ff; }
.xy-public-invite-benefits small { color: #79718c; font-size: 11px; }
.xy-public-invite-benefits strong { color: #674bdd; font-size: 17px; }
.xy-public-invite-code { margin: 14px 0 0; color: #807a8d; font-size: 12px; }
.xy-public-invite-code strong { margin-left: 8px; color: #3c2e70; font-size: 16px; letter-spacing: 1px; }
.xy-public-invite-qr { display: block; width: 160px; height: 160px; margin: 14px auto; padding: 7px; border: 1px solid #eeeafb; border-radius: 14px; }
.xy-public-invite-share { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #dbd4fb; border-radius: 12px; background: #faf9ff; color: #684fdf; font-size: 13px; font-weight: 700; }
.xy-public-invite-truth { display: block; margin-top: 11px; color: #817c8b; font-size: 11px; line-height: 1.5; }
.xy-public-invite-actions { position: fixed; z-index: 5; right: max(16px, calc((100vw - 568px) / 2)); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); left: max(16px, calc((100vw - 568px) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px; border: 1px solid #ece9f5; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 8px 30px rgba(42,31,101,.12); }
.xy-public-invite-actions button { min-height: 44px; border: 0; border-radius: 12px; background: #7054e8; color: #fff; font-size: 13px; font-weight: 700; }
.xy-public-invite-actions button + button { background: #eeeaff; color: #654adb; }

.xy-download-overlay {
  position: absolute;
  z-index: 195;
  inset: 0;
  overflow: hidden;
  background: #f8f8fd;
}

.xy-download-scroll {
  background:
    radial-gradient(circle at 92% 0%, rgba(112, 86, 235, 0.15), transparent 27%),
    #f8f8fd;
}

.xy-download-screen {
  min-height: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 34px);
}

.xy-download-screen > header {
  display: grid;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.xy-download-screen > header > button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #514d61;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e7e5ef;
  border-radius: 14px;
}

.xy-download-screen > header small {
  color: #705ae6;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.xy-download-screen > header h1 {
  margin: 2px 0;
  font-size: 21px;
}

.xy-download-screen > header p {
  margin: 0;
  color: #85818f;
  font-size: 7.5px;
}

.xy-download-wechat {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 10px 12px;
  color: #9b5a15;
  background: #fff8ea;
  border: 1px solid #f0dfbf;
  border-radius: 14px;
}

.xy-download-wechat > span {
  display: flex;
  flex-direction: column;
}

.xy-download-wechat strong {
  font-size: 9px;
}

.xy-download-wechat small {
  margin-top: 2px;
  color: #9e7b54;
  font-size: 7px;
}

.xy-download-hero {
  position: relative;
  display: grid;
  min-height: 145px;
  align-items: start;
  gap: 10px;
  padding: 18px 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 25%, rgba(129, 105, 248, 0.22), transparent 38%),
    linear-gradient(140deg, #fff, #ececff);
  border: 1px solid #e1def8;
  border-radius: 24px;
  grid-template-columns: 42px minmax(0, 1fr);
}

.xy-download-hero > span {
  width: 42px;
  height: 42px;
  overflow: hidden;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(70, 52, 160, 0.12);
}

.xy-download-hero > span img {
  width: 100%;
  height: 100%;
}

.xy-download-hero > div {
  position: relative;
  z-index: 2;
  max-width: 72%;
}

.xy-download-hero small {
  color: #6c57df;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.9px;
}

.xy-download-hero h2 {
  margin: 7px 0 5px;
  font-size: 20px;
}

.xy-download-hero p {
  margin: 0;
  color: #787482;
  font-size: 8px;
  line-height: 1.6;
}

.xy-download-hero > img {
  position: absolute;
  right: -12px;
  bottom: -23px;
  width: 142px;
  height: 142px;
  object-fit: contain;
}

.xy-release-card {
  margin-top: 10px;
  padding: 14px;
}

.xy-release-heading {
  display: grid;
  align-items: center;
  gap: 9px;
  grid-template-columns: 39px minmax(0, 1fr) auto;
}

.xy-release-heading > span {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  color: #684fdd;
  background: #f0edff;
  border-radius: 12px;
}

.xy-release-heading > div {
  display: flex;
  flex-direction: column;
}

.xy-release-heading small {
  color: #96929e;
  font-size: 7px;
}

.xy-release-heading strong {
  margin-top: 3px;
  font-size: 11px;
}

.xy-release-heading em {
  padding: 4px 7px;
  color: #8c8894;
  background: #f1f0f4;
  border-radius: 999px;
  font-size: 7px;
  font-style: normal;
}

.xy-release-heading em.is-ready {
  color: #338756;
  background: #eaf8ef;
}

.xy-release-meta {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  grid-template-columns: repeat(3, 1fr);
}

.xy-release-meta > span {
  display: flex;
  min-height: 47px;
  justify-content: center;
  padding: 7px 4px;
  text-align: center;
  background: #f8f8fb;
  border-radius: 10px;
  flex-direction: column;
}

.xy-release-meta small {
  color: #9a96a1;
  font-size: 6.5px;
}

.xy-release-meta strong {
  margin-top: 3px;
  font-size: 8px;
}

.xy-release-card ul {
  margin: 11px 0 0;
  padding-left: 18px;
  color: #686572;
  font-size: 7.5px;
  line-height: 1.7;
}

.xy-release-card code {
  display: block;
  margin-top: 9px;
  overflow: hidden;
  color: #8d8995;
  font-size: 6.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-release-error {
  margin: 9px 0 0;
  padding: 8px;
  color: #b13d51;
  background: #fff1f4;
  border-radius: 9px;
  font-size: 7.5px;
}

.xy-download-primary {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  color: #fff;
  background: linear-gradient(135deg, #7861ee, #5743d2);
  border: 0;
  border-radius: 13px;
  box-shadow: 0 10px 22px rgba(91, 67, 210, 0.22);
  font-size: 10px;
  font-weight: 700;
}

.xy-download-primary:disabled {
  color: #98949f;
  background: #ecebf0;
  box-shadow: none;
}

.xy-update-progress {
  margin-top: 10px;
}

.xy-update-progress > span {
  display: block;
  height: 6px;
  overflow: hidden;
  background: #ebe8f7;
  border-radius: 999px;
}

.xy-update-progress i {
  display: block;
  height: 100%;
  background: #6b55e3;
}

.xy-update-progress small {
  display: block;
  margin-top: 5px;
  color: #85818e;
  font-size: 7px;
}

.xy-update-progress button {
  min-height: 32px;
  margin-top: 7px;
  padding: 0 10px;
  color: #fff;
  background: #6b55e3;
  border: 0;
  border-radius: 9px;
  font-size: 8px;
}

.xy-version-card {
  display: grid;
  gap: 0;
  margin-top: 10px;
  padding: 5px 13px;
}

.xy-version-card > div,
.xy-version-history > div {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f0eff4;
}

.xy-version-card > div:first-child {
  border-top: 0;
}

.xy-version-card span,
.xy-version-history span {
  display: flex;
  flex-direction: column;
}

.xy-version-card strong,
.xy-version-history strong {
  font-size: 9px;
}

.xy-version-card small,
.xy-version-history small {
  margin-top: 2px;
  color: #98949f;
  font-size: 7px;
}

.xy-version-card em,
.xy-version-history em {
  color: #6350d8;
  font-size: 8px;
  font-style: normal;
}

.xy-version-history {
  margin-top: 10px;
  padding: 12px 13px;
}

.xy-version-history h3 {
  margin: 0 0 3px;
  font-size: 11px;
}

.xy-download-share-card {
  display: grid;
  min-height: 66px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  color: #6753dc;
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.xy-download-share-card > span {
  display: flex;
  color: #373340;
  flex-direction: column;
}

.xy-download-share-card strong {
  font-size: 9px;
}

.xy-download-share-card small {
  margin-top: 3px;
  color: #918d99;
  font-size: 7px;
  line-height: 1.5;
}

.xy-download-share-card button {
  min-height: 34px;
  padding: 0 11px;
  color: #fff;
  background: #6b55e3;
  border: 0;
  border-radius: 10px;
  font-size: 8px;
}

.xy-download-account-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.xy-download-account-actions button,
.xy-download-referral-link {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #5f4bd6;
  background: #f0edff;
  border: 1px solid #ddd7f8;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
}

.xy-download-referral-link {
  width: 100%;
  margin-top: 10px;
}

.xy-download-truth {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 6px 0;
  color: #8c8895;
  font-size: 7px;
  line-height: 1.7;
}

.xy-download-truth svg {
  flex: 0 0 auto;
  color: #6550dc;
}

.xy-download-share-sheet {
  display: flex;
  align-items: center;
  padding: 4px 12px 24px;
  flex-direction: column;
}

.xy-download-share-sheet > img {
  width: 190px;
  height: 190px;
  padding: 7px;
  background: #fff;
  border: 1px solid #e7e4ef;
  border-radius: 17px;
}

.xy-download-share-sheet > strong {
  margin-top: 12px;
  font-size: 12px;
}

.xy-download-share-sheet > small {
  margin-top: 4px;
  color: #918d99;
  font-size: 8px;
}

.xy-download-share-sheet > div {
  display: grid;
  width: 100%;
  gap: 8px;
  margin-top: 15px;
  grid-template-columns: repeat(2, 1fr);
}

.xy-download-share-sheet button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #5d49d5;
  background: #f2efff;
  border: 1px solid #ddd7f8;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
}

.xy-post-register-overlay {
  position: absolute;
  z-index: 245;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 16px;
  background: rgba(28, 24, 45, 0.52);
  backdrop-filter: blur(7px);
}

.xy-post-register-overlay section {
  padding: 24px 20px 18px;
  text-align: center;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(28, 21, 66, 0.26);
}

.xy-post-register-overlay section > span {
  color: #5bce82;
}

.xy-post-register-overlay small {
  display: block;
  margin-top: 7px;
  color: #705be3;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.xy-post-register-overlay h2 {
  margin: 5px 0 7px;
  font-size: 19px;
}

.xy-post-register-overlay p {
  margin: 0 0 16px;
  color: #7f7b87;
  font-size: 9px;
  line-height: 1.7;
}

.xy-post-register-overlay button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: #6751df;
  border: 0;
  border-radius: 13px;
  font-size: 10px;
  font-weight: 600;
}

.xy-post-register-overlay button:last-child {
  margin-top: 7px;
  color: #777380;
  background: transparent;
}

@media (max-width: 360px) {
  .xy-download-screen {
    padding-right: 12px;
    padding-left: 12px;
  }

  .xy-download-hero > img {
    right: -30px;
  }

  .xy-release-meta {
    gap: 4px;
  }
}

/* ── task config form ────────────────────────────────────────────────────── */
.xy-task-config-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  padding: 10px;
  background: #fafafd;
  border: 1px solid #ececf2;
  border-radius: 14px;
}

.xy-task-config-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  grid-column: 1 / -1;
}

.xy-task-config-heading > span {
  display: flex;
  flex-direction: column;
}

.xy-task-config-heading small {
  color: #92949f;
  font-size: 8px;
}

.xy-task-config-heading strong {
  margin-top: 2px;
  color: #3f414c;
  font-size: 10px;
}

.xy-task-config-heading > em {
  padding: 3px 7px;
  color: #6d59dc;
  background: #efecff;
  border-radius: 999px;
  font-size: 7px;
  font-style: normal;
}

.xy-config-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

/* string / text inputs — span all columns */
.xy-config-field--full {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: stretch;
  min-height: unset;
  gap: 4px;
}

.xy-config-field--full .xy-config-label {
  flex: none;
}

.xy-config-field--full .xy-config-input {
  width: 100%;
  text-align: left;
}

.xy-config-bool {
  cursor: pointer;
}

/* ── toggle switch ──────────────────────────────────────────────────────── */
.xy-config-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.xy-config-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.xy-config-toggle-track {
  position: absolute;
  inset: 0;
  background: #d5d3e8;
  border-radius: 20px;
  cursor: pointer;
  transition: background 160ms;
}
.xy-config-toggle-track::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform 160ms;
}
.xy-config-toggle input:checked + .xy-config-toggle-track {
  background: #6d59dc;
}
.xy-config-toggle input:checked + .xy-config-toggle-track::before {
  transform: translateX(16px);
}

/* ── select dropdown ────────────────────────────────────────────────────── */
.xy-config-select {
  padding: 4px 8px;
  border: 1px solid #d8d6e8;
  border-radius: 6px;
  background: #fff;
  font-size: 10px;
  color: #3a3c48;
  cursor: pointer;
  min-width: 80px;
  outline: none;
}
.xy-config-select:focus {
  border-color: #9489dc;
}

.xy-config-label {
  flex: 1;
  color: #4a4c58;
  font-size: 9px;
  line-height: 1.4;
}

.xy-config-input {
  width: 68px;
  padding: 4px 7px;
  color: #2d2f3a;
  background: #ffffff;
  border: 1px solid #dddde8;
  border-radius: 7px;
  font-size: 16px;
  outline: none;
  text-align: right;
}

.xy-config-input:focus {
  border-color: #9489dc;
}

.xy-config-section {
  grid-column: 1 / -1;
  border: 1px solid #e6e6f0;
  border-radius: 10px;
  overflow: hidden;
}

.xy-config-section-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  background: #f4f4fa;
  border: 0;
  color: #3f414c;
  font-size: 9px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.xy-config-section-head > em {
  color: #8a87a8;
  font-size: 8px;
  font-style: normal;
}

.xy-config-section-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 9px;
}

.xy-config-list-field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.xy-config-list-field > .xy-config-label {
  color: #4a4c58;
  font-size: 9px;
  font-weight: 600;
}

.xy-config-list-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

.xy-config-list-row .xy-config-input {
  flex: 1;
  width: auto;
  text-align: left;
}

.xy-config-rm,
.xy-config-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid #dddde8;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: #888;
}

.xy-config-add {
  color: #6d59dc;
  border-color: #c5bef5;
  background: #f5f3ff;
}

.xy-config-upload-field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.xy-config-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 5px 10px;
  color: #5e49df;
  background: #f0edff;
  border: 1px solid #c5bef5;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}

.xy-config-upload-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.xy-config-upload-name {
  color: #7a7d8a;
  font-size: 8px;
}

.xy-config-upload-url {
  width: 100%;
  text-align: left;
}

/* ── full-screen task parameter page ────────────────────────────────────── */
.xy-iframe-container {
  position: absolute;
  inset: 0;
  top: calc(66px + env(safe-area-inset-top, 0px));
}

.xy-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.xy-param-page {
  position: absolute;
  z-index: 220;
  inset: 0;
  overflow: hidden;
  color: #181823;
  background: #f7f7fb;
  display: flex;
  flex-direction: column;
}

.xy-param-page-scroll {
  position: relative;
  inset: auto;
  min-height: 0;
  flex: 1 1 0;
  background: #f7f7fb;
}

.xy-param-page-scroll .mobile-scroll {
  inset: 0;
}

.xy-param-page-header {
  position: relative;
  flex-shrink: 0;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  min-height: calc(66px + env(safe-area-inset-top, 0px));
  grid-template-columns: 38px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 7px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: rgba(250, 250, 253, 0.96);
  border-bottom: 1px solid rgba(230, 230, 239, 0.86);
  box-shadow: 0 5px 20px rgba(65, 55, 110, 0.035);
  backdrop-filter: blur(14px);
}

.xy-param-page-header > div {
  min-width: 0;
}

.xy-param-page-header h1 {
  margin: 0;
  overflow: hidden;
  color: #15151d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-param-page-header > div > span {
  display: block;
  margin-top: 2px;
  color: #9595a2;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
}

.xy-param-page-header > .xy-platform-icon {
  width: 36px;
  height: 36px;
  justify-self: end;
  background: #fff;
  border: 1px solid #eeeef4;
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(49, 42, 91, 0.07);
}

.xy-param-back {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  color: #33333f;
  background: transparent;
  border: 0;
  border-radius: 10px;
}

.xy-param-back:active {
  background: #ededf4;
}

.xy-param-page-content {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 12px 14px 16px;
}

.xy-param-preview-badge {
  align-self: flex-start;
  padding: 5px 9px;
  color: #6b55df;
  background: #eeebff;
  border: 1px solid #ddd7ff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
}

.xy-task-target-card {
  padding: 14px;
  background: #fff;
  border: 1px solid #e9e7f2;
  border-radius: 16px;
  box-shadow: 0 7px 22px rgba(57, 48, 101, 0.055);
}

.xy-task-target-heading,
.xy-task-target-heading > span,
.xy-task-target-summary,
.xy-task-target-list > button,
.xy-task-target-list > button > span:nth-child(2),
.xy-task-target-card > p {
  display: flex;
}

.xy-task-target-heading {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.xy-task-target-heading > span,
.xy-task-target-list > button > span:nth-child(2) {
  min-width: 0;
  flex-direction: column;
}

.xy-task-target-heading small {
  color: #9693a4;
  font-size: 10px;
}

.xy-task-target-heading strong {
  margin-top: 2px;
  color: #262332;
  font-size: 14px;
}

.xy-task-target-heading > button {
  flex: none;
  min-height: 32px;
  padding: 5px 10px;
  color: #6448df;
  background: #f2efff;
  border: 1px solid #ded6ff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.xy-task-target-heading > button:disabled {
  color: #aaa7b1;
  background: #f2f1f4;
  border-color: #e8e7eb;
}

.xy-task-target-summary {
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 10px;
  color: #686474;
  background: #f8f7fc;
  border-radius: 11px;
  font-size: 11px;
}

.xy-task-target-summary svg,
.xy-task-target-summary strong {
  color: #6045dd;
}

.xy-task-target-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.xy-task-target-list > button {
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  color: #4b4856;
  text-align: left;
  background: #fbfbfd;
  border: 1px solid #eceaf2;
  border-radius: 13px;
}

.xy-task-target-list > button.is-selected {
  color: #5034cf;
  background: #f5f2ff;
  border-color: #bcaeff;
  box-shadow: inset 0 0 0 1px rgba(105, 77, 229, 0.08);
}

.xy-task-target-list > button.is-disabled {
  color: #aaa7b1;
  background: #f7f6f8;
  border-color: #ecebed;
  opacity: 0.78;
}

.xy-task-target-device {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  color: #6750d9;
  background: #eeebff;
  border-radius: 11px;
}

.xy-task-target-list > button.is-disabled .xy-task-target-device {
  color: #9996a0;
  background: #ecebef;
}

.xy-task-target-list > button > span:nth-child(2) {
  flex: 1;
}

.xy-task-target-list > button strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-task-target-list > button small {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: #8e8a99;
  font-size: 9px;
}

.xy-task-target-list > button small i {
  width: 6px;
  height: 6px;
  background: #36bc78;
  border-radius: 50%;
}

.xy-task-target-list > button.is-disabled small i {
  background: #b6b3bb;
}

.xy-task-target-list > button > svg {
  flex: none;
  color: #6244df;
}

.xy-task-target-check {
  width: 19px;
  height: 19px;
  flex: none;
  border: 1.5px solid #cbc7d4;
  border-radius: 50%;
}

.xy-task-target-card > p {
  align-items: flex-start;
  gap: 6px;
  margin: 10px 2px 0;
  color: #888493;
  font-size: 9px;
  line-height: 1.45;
}

.xy-task-target-card > p svg {
  flex: none;
  margin-top: 1px;
  color: #39a672;
}

.xy-param-card,
.xy-param-accordion {
  overflow: hidden;
  background: #fff;
  border: 1px solid #ececf3;
  border-radius: 16px;
  box-shadow: 0 7px 22px rgba(54, 46, 99, 0.045);
}

.xy-param-card {
  padding: 15px 14px 14px;
}

.xy-param-card-head {
  display: flex;
  min-height: 29px;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.xy-param-section-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  color: #6248ee;
  background: #f0edff;
  border-radius: 9px;
}

.xy-param-card-head h2 {
  min-width: 0;
  margin: 0;
  color: #20202a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.xy-param-card-trailing {
  margin-left: auto;
}

.xy-param-inline-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xy-param-inline-toggle em {
  color: #595966;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.xy-param-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  background: #dedee7;
  border: 0;
  border-radius: 999px;
  transition: background 160ms ease;
}

.xy-param-toggle > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(40, 37, 66, 0.22);
  transition: transform 160ms ease;
}

.xy-param-toggle.is-on {
  background: #6046ed;
}

.xy-param-toggle.is-on > span {
  transform: translateX(18px);
}

.xy-param-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.xy-param-number-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.xy-param-number-grid .xy-param-control-label {
  min-height: 30px;
}

.xy-param-section-fields {
  display: grid;
  gap: 14px;
}

.xy-param-object-group {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #efedf5;
}

.xy-param-object-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.xy-param-object-group > h3 {
  margin: 0;
  color: #5f5c6b;
  font-size: 11px;
  font-weight: 600;
}

.xy-param-mode-note {
  margin: 0;
  padding: 10px 11px;
  color: #747381;
  background: #f7f7fb;
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.55;
}

.xy-param-mode-note.is-accent {
  margin-bottom: 12px;
  color: #5946bd;
  background: #f2efff;
}

.xy-param-number {
  min-width: 0;
}

.xy-param-control-label {
  display: block;
  margin-bottom: 7px;
  color: #30303a;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.xy-param-control-label em {
  color: #694fee;
  font-style: normal;
}

.xy-param-stepper {
  display: grid;
  height: 43px;
  grid-template-columns: 43px minmax(44px, 1fr) 43px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e0e9;
  border-radius: 10px;
}

.xy-param-stepper button {
  display: grid;
  place-items: center;
  padding: 0;
  color: #57546b;
  background: #fcfcfe;
  border: 0;
}

.xy-param-stepper button:first-child {
  border-right: 1px solid #e5e5ed;
}

.xy-param-stepper button:last-child {
  border-left: 1px solid #e5e5ed;
}

.xy-param-stepper input {
  min-width: 0;
  padding: 0 3px;
  color: #191922;
  background: #fff;
  border: 0;
  outline: 0;
  font-family: "Roboto", "Noto Sans SC", sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  -moz-appearance: textfield;
}

.xy-param-stepper input::-webkit-inner-spin-button,
.xy-param-stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.xy-param-stepper:focus-within,
.xy-param-tag-input:focus-within,
.xy-param-text-field:focus-within,
.xy-param-upload:focus-within {
  border-color: #725bf0;
  box-shadow: 0 0 0 2px rgba(101, 75, 236, 0.09);
}

.xy-param-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 13px;
}

.xy-param-choice-field {
  min-width: 0;
}

.xy-param-choice-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 4px;
  background: #f4f4f8;
  border: 1px solid #ecebf2;
  border-radius: 12px;
}

.xy-param-choice-options.is-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xy-param-choice-options > button {
  min-height: 37px;
  min-width: 0;
  padding: 7px 6px;
  color: #777482;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.xy-param-choice-options > button.is-selected {
  color: #553bd8;
  background: #fff;
  box-shadow: 0 4px 12px rgba(55, 45, 100, 0.1), inset 0 0 0 1px rgba(99, 75, 223, 0.12);
}

.xy-param-option-list {
  display: grid;
  gap: 2px;
}

.xy-param-option-row {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 1px;
  border-top: 1px solid #efedf4;
}

.xy-param-option-row:first-child {
  padding-top: 2px;
  border-top: 0;
}

.xy-param-option-row:last-child {
  padding-bottom: 2px;
}

.xy-param-option-row > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.xy-param-option-row strong {
  color: #30303a;
  font-size: 11px;
  font-weight: 600;
}

.xy-param-option-row small {
  color: #92909d;
  font-size: 9px;
  line-height: 1.4;
}

.xy-param-search-count-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.xy-param-number.is-compact .xy-param-control-label {
  min-height: 30px;
  margin-bottom: 7px;
  text-align: center;
}

.xy-param-number.is-compact .xy-param-stepper {
  grid-template-columns: 38px minmax(38px, 1fr) 38px;
}

.xy-param-tag-editor {
  min-width: 0;
}

.xy-param-list-summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 10px 9px 12px;
  background: #fafafe;
  border: 1px solid #e3e1ed;
  border-radius: 11px;
}

.xy-param-list-summary > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.xy-param-list-summary strong {
  color: #2c2b35;
  font-size: 12px;
  line-height: 1.35;
}

.xy-param-list-summary small {
  color: #9593a0;
  font-size: 10px;
  line-height: 1.35;
}

.xy-param-list-launch {
  display: inline-flex;
  min-width: 76px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  color: #fff;
  background: #654bec;
  border: 0;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.xy-param-tag-input.is-legacy-inline {
  display: none;
}

.xy-param-tag-editor > .xy-param-empty-copy {
  display: none;
}

.xy-list-editor-sheet {
  display: grid;
  gap: 14px;
  padding: 2px 0 4px;
}

.xy-list-editor-input {
  display: grid;
  gap: 8px;
}

.xy-list-editor-input > span {
  color: #2d2b38;
  font-size: 13px;
  font-weight: 650;
}

.xy-list-editor-input input,
.xy-list-editor-input textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  color: #22212b;
  background: #fff;
  border: 1px solid #dcd9e9;
  border-radius: 12px;
  outline: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
}

.xy-list-editor-input input {
  min-height: 46px;
}

.xy-list-editor-input textarea {
  min-height: 132px;
  resize: none;
}

.xy-list-editor-input input:focus,
.xy-list-editor-input textarea:focus {
  border-color: #725bf0;
  box-shadow: 0 0 0 3px rgba(101, 75, 236, 0.1);
}

.xy-list-editor-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.xy-list-editor-tools button,
.xy-list-editor-ai {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #5d45d7;
  background: #f4f1ff;
  border: 1px solid #e3dcff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.xy-referral-actions button.is-copied {
  color: #fff;
  background: #7058e8;
  border-color: #7058e8;
  box-shadow: 0 7px 18px rgba(94, 73, 215, 0.24);
  animation: xy-referral-button-pulse 650ms ease-out both;
}

.xy-referral-copy-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.xy-referral-actions button.is-copied .xy-referral-copy-feedback {
  animation: xy-referral-copy-pop 650ms cubic-bezier(.2, 1.6, .4, 1) both;
}

@keyframes xy-referral-button-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(112, 88, 232, .16); }
}

@keyframes xy-referral-copy-pop {
  0% { opacity: .55; transform: scale(.78); }
  65% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .xy-referral-actions button.is-copied { animation: none; outline: 2px solid #7058e8; outline-offset: 2px; }
  .xy-referral-actions button.is-copied .xy-referral-copy-feedback { animation: none; }
}

.xy-list-editor-emoji {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
  background: #f8f7fb;
  border: 1px solid #ece9f3;
  border-radius: 12px;
}

.xy-list-editor-emoji button {
  display: grid;
  min-height: 36px;
  place-items: center;
  padding: 0;
  background: #fff;
  border: 1px solid #ece9f3;
  border-radius: 9px;
  font-size: 20px;
}

.xy-list-editor-message {
  margin: -4px 0 0;
  color: #6c6879;
  font-size: 11px;
  line-height: 1.45;
}

.xy-list-editor-confirm {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: #654bec;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

.xy-list-editor-confirm:disabled {
  color: #aaa5bd;
  background: #ebe9f1;
}

.xy-param-tag-input {
  display: grid;
  min-height: 43px;
  grid-template-columns: minmax(0, 1fr) auto 42px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dddde8;
  border-radius: 10px;
}

.xy-param-tag-editor.is-template .xy-param-tag-input,
.xy-param-tag-editor.is-tag .xy-param-tag-input {
  grid-template-columns: minmax(0, 1fr) 42px;
}

.xy-param-tag-input > input {
  grid-column: 1;
  min-height: 43px;
  min-width: 0;
  padding: 0 10px;
  color: #292934;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
}

.xy-param-tag-editor.is-template .xy-param-tag-input > input,
.xy-param-tag-editor.is-tag .xy-param-tag-input > input {
  grid-column: auto;
}

.xy-param-tag-input > input::placeholder,
.xy-param-upload > input::placeholder,
.xy-param-text-field input::placeholder {
  color: #aaa9b7;
}

.xy-param-ai-fill,
.xy-param-add {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  color: #6046e7;
  background: #fff;
  border: 0;
  border-left: 1px solid #e7e5f1;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.xy-param-ai-fill {
  gap: 4px;
  justify-content: flex-start;
  border-top: 0;
  border-left: 1px solid #e7e5f1;
}

.xy-param-add {
  padding: 0;
  border-top: 0;
}

.xy-param-tag-editor.is-template .xy-param-add,
.xy-param-tag-editor.is-tag .xy-param-add {
  border-top: 0;
}

.xy-param-ai-fill:disabled {
  color: #8f80dd;
}

.xy-param-example.is-error {
  color: #c45151;
}

.xy-ai-keyword-sheet {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  color: #292836;
}

.xy-ai-keyword-loading,
.xy-ai-keyword-error {
  display: flex;
  min-height: 360px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 28px 18px;
  text-align: center;
}

.xy-ai-keyword-loader {
  position: relative;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  margin-bottom: 20px;
  color: #6b52ec;
  background: linear-gradient(145deg, #f4f0ff, #ebe8ff);
  border: 1px solid #ded7ff;
  border-radius: 28px;
  box-shadow: 0 18px 36px rgba(91, 66, 211, 0.15);
  animation: xy-ai-keyword-pulse 1.8s ease-in-out infinite;
}

.xy-ai-keyword-loader > i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #8c78f5;
  border-radius: 999px;
  animation: xy-ai-keyword-orbit 1.5s linear infinite;
}

.xy-ai-keyword-loader > i:nth-of-type(2) {
  animation-delay: -0.5s;
}

.xy-ai-keyword-loader > i:nth-of-type(3) {
  animation-delay: -1s;
}

.xy-ai-keyword-loading strong,
.xy-ai-keyword-error strong {
  font-size: 17px;
  line-height: 1.35;
}

.xy-ai-keyword-loading p,
.xy-ai-keyword-error p {
  max-width: 292px;
  margin: 8px 0 0;
  color: #817e90;
  font-size: 13px;
  line-height: 1.65;
}

.xy-ai-keyword-skeleton {
  display: grid;
  width: 100%;
  max-width: 310px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 28px;
}

.xy-ai-keyword-skeleton span {
  height: 42px;
  background: linear-gradient(90deg, #f2f0f8 25%, #faf9fd 50%, #f2f0f8 75%);
  background-size: 200% 100%;
  border-radius: 12px;
  animation: xy-ai-keyword-shimmer 1.35s ease-in-out infinite;
}

.xy-ai-keyword-error {
  color: #d06060;
}

.xy-ai-keyword-error button {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding: 0 20px;
  color: #fff;
  background: #6750e8;
  border: 0;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 700;
}

.xy-ai-keyword-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 12px;
  color: #777486;
  font-size: 12px;
}

.xy-ai-keyword-summary strong {
  color: #6650e5;
  font-size: 12px;
}

.xy-ai-keyword-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding-bottom: 12px;
}

.xy-ai-keyword-options > button {
  display: grid;
  min-height: 44px;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 7px;
  padding: 0 11px 0 13px;
  color: #4a4857;
  background: #faf9fc;
  border: 1px solid #e7e4ed;
  border-radius: 13px;
  text-align: left;
  font-size: 13px;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.xy-ai-keyword-options > button:active {
  transform: scale(0.98);
}

.xy-ai-keyword-options > button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-ai-keyword-options > button > i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #6b50e8;
  border: 1px solid #d3cfde;
  border-radius: 999px;
  font-style: normal;
}

.xy-ai-keyword-options > button.is-selected {
  color: #5138d1;
  background: #f1edff;
  border-color: #8068ef;
  box-shadow: 0 7px 16px rgba(103, 80, 232, 0.1);
}

.xy-ai-keyword-options > button.is-selected > i {
  border-color: transparent;
}

.xy-ai-keyword-actions {
  position: sticky;
  bottom: -1px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  margin-top: auto;
  padding: 14px 0 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 24%);
}

.xy-ai-keyword-actions > button {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
}

.xy-ai-keyword-actions .is-secondary {
  color: #646171;
  background: #f5f4f8;
  border: 1px solid #e8e5ed;
}

.xy-ai-keyword-actions .is-primary {
  color: #fff;
  background: linear-gradient(135deg, #765cf0, #5c45db);
  border: 0;
  box-shadow: 0 10px 22px rgba(92, 69, 219, 0.22);
}

.xy-ai-keyword-actions .is-primary:disabled {
  color: #aaa6b8;
  background: #eceaf1;
  box-shadow: none;
}

@keyframes xy-ai-keyword-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes xy-ai-keyword-orbit {
  from { transform: rotate(0deg) translateX(50px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes xy-ai-keyword-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.xy-param-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.xy-param-tags button {
  display: inline-flex;
  max-width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 6px 12px;
  color: #292933;
  background: #f5f5f9;
  border: 0;
  border-radius: 8px;
  font-size: 11px;
}

.xy-param-tags button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.xy-param-tags button i {
  color: #858594;
  font-size: 15px;
  font-style: normal;
  line-height: 1;
}

.xy-param-example,
.xy-param-empty-copy {
  margin: 9px 0 0;
  color: #9695a3;
  font-size: 9px;
  line-height: 1.55;
}

.xy-param-example::before {
  content: "ⓘ";
  margin-right: 5px;
  color: #6d64a3;
}

.xy-param-accordion-head {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 28px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  color: #23232c;
  background: #fff;
  border: 0;
  text-align: left;
}

.xy-param-accordion-head strong {
  font-size: 14px;
  font-weight: 700;
}

.xy-param-accordion-head small {
  color: #9b9aa8;
  font-size: 9px;
  font-weight: 500;
}

.xy-param-accordion-head > svg:last-child {
  color: #5d5a70;
  transition: transform 160ms ease;
}

.xy-param-accordion.is-open .xy-param-accordion-head > svg:last-child {
  transform: rotate(180deg);
}

.xy-param-accordion-body {
  display: none;
  padding: 2px 14px 14px;
  border-top: 1px solid #efeff4;
}

.xy-param-accordion.is-open .xy-param-accordion-body {
  display: block;
}

.xy-param-toggle-row {
  display: flex;
  min-height: 47px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #30303a;
  font-size: 11px;
}

.xy-param-toggle-row + .xy-param-toggle-row,
.xy-param-text-field + .xy-param-text-field,
.xy-param-generic-fields > * + * {
  border-top: 1px solid #f0f0f5;
}

.xy-param-text-field {
  display: grid;
  grid-template-columns: minmax(95px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
  min-height: 49px;
  color: #30303a;
  font-size: 11px;
}

.xy-param-text-field input {
  width: 100%;
  min-width: 0;
  height: 35px;
  padding: 0 9px;
  color: #24242e;
  background: #fafafe;
  border: 1px solid #e3e3eb;
  border-radius: 8px;
  outline: 0;
  font-size: 16px;
  text-align: right;
}

.xy-param-text-field.is-stacked {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
  min-height: 0;
}

.xy-param-text-field.is-stacked > span {
  color: #30303a;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.xy-param-text-field.is-stacked input {
  height: 43px;
  padding: 0 11px;
  text-align: left;
}

.xy-param-stacked-fields {
  display: grid;
  gap: 13px;
}

.xy-param-stacked-fields .xy-param-text-field + .xy-param-text-field {
  padding-top: 13px;
}

.xy-param-generic-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xy-param-generic-fields > .xy-param-tag-editor,
.xy-param-generic-fields > .xy-param-upload {
  padding: 8px 0;
}

.xy-param-generic-fields > .xy-param-number {
  padding: 8px 0;
}

.xy-param-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.xy-param-upload > .xy-param-control-label,
.xy-param-upload > small {
  grid-column: 1 / -1;
  margin: 0;
}

.xy-param-upload > button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  color: #5d45df;
  background: #f0edff;
  border: 1px solid #d7d0ff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
}

.xy-param-upload > input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  color: #292934;
  background: #fafafe;
  border: 1px solid #e3e3eb;
  border-radius: 9px;
  outline: 0;
  font-size: 10px;
}

.xy-param-upload > small {
  color: #888895;
  font-size: 9px;
}

.xy-param-upload-preview {
  width: 56px;
  height: 56px;
  justify-self: end;
  object-fit: cover;
  background: #f4f7f4;
  border: 1px solid #dfe8e1;
  border-radius: 12px;
}

.xy-param-upload-ready {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #348258;
  font-size: 9px;
  font-weight: 600;
}

.xy-param-upload > small > button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 2px 5px;
  color: #777783;
  background: transparent;
  border: 0;
  font: inherit;
}

.xy-param-upload > small.is-error {
  color: #d14e57;
}

.xy-param-no-fields {
  margin: 0;
  color: #777783;
  font-size: 11px;
  line-height: 1.65;
}

.xy-param-runtime-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  color: #5a469c;
  background: #f6f3ff;
  border: 1px solid #e5defb;
  border-radius: 12px;
}

.xy-param-runtime-notice > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.xy-param-runtime-notice strong {
  color: #3b3066;
  font-size: 11px;
}

.xy-param-runtime-notice small {
  color: #756b91;
  font-size: 10px;
  line-height: 1.55;
}

.xy-param-blocker {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 11px 12px;
  color: #b24c54;
  background: #fff3f3;
  border: 1px solid #f2d7d9;
  border-radius: 12px;
}

.xy-param-blocker > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.xy-param-blocker strong {
  font-size: 11px;
}

.xy-param-blocker small {
  color: #a75c62;
  font-size: 9px;
  line-height: 1.5;
}

.xy-param-page-footer {
  position: relative;
  flex-shrink: 0;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 250, 253, 0.96);
  border-top: 1px solid rgba(229, 229, 238, 0.9);
  backdrop-filter: blur(14px);
}

.xy-param-page-footer button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  color: #fff;
  background: linear-gradient(100deg, #6a4ff2 0%, #5036e7 100%);
  border: 0;
  border-radius: 13px;
  box-shadow: 0 9px 22px rgba(81, 56, 221, 0.24);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.xy-param-page-footer button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.xy-param-page-footer button:disabled {
  color: #aaa8b5;
  background: #e7e6ec;
  box-shadow: none;
}

@media (max-width: 360px) {
  .xy-param-page-content {
    padding-right: 10px;
    padding-left: 10px;
  }

  .xy-param-page-header,
  .xy-param-page-footer {
    padding-right: 10px;
    padding-left: 10px;
  }

  .xy-param-card {
    padding-right: 11px;
    padding-left: 11px;
  }

  .xy-param-source-grid {
    grid-template-columns: 1fr;
  }

  .xy-param-number.is-compact .xy-param-control-label {
    min-height: 0;
    text-align: left;
  }

  .xy-param-inline-toggle em {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xy-param-toggle,
  .xy-param-toggle > span,
  .xy-param-accordion-head > svg:last-child {
    transition: none;
  }
}

/* ─── PhoneDetailView: additional info display classes (2026-08) ─── */

.xy-device-info-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid #ece8f3;
  border-radius: 14px;
  background: #fff;
}

.xy-device-info-label {
  font-size: 11px;
  color: #9290a0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.xy-battery-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.xy-battery-row > .xy-battery-bar-lg {
  flex: 1;
}

.xy-charge-badge {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  background: #f0f0f3;
  color: #8e8999;
}

.xy-charge-badge.is-charging {
  background: #eafaf1;
  color: #2a9d5c;
}

.xy-monospace {
  font-family: "SF Mono", "Courier New", monospace;
  font-size: 13px;
}

.xy-mini-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xy-mini-bar {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: #eeeaf3;
  overflow: hidden;
}

.xy-mini-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 300ms ease;
}

.xy-mini-bar-row > strong {
  font-size: 12px;
  font-weight: 650;
  color: #231e30;
  flex-shrink: 0;
}

.xy-status-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.xy-status-badge.is-on {
  background: #eafaf1;
  color: #2a9d5c;
}

.xy-status-badge.is-off {
  background: #f5f4f8;
  color: #9994a6;
}

.xy-phone-info-grid .xy-info-block-full {
  grid-column: 1 / -1;
}

/* ─── Task param templates ─────────────────────────────────────────────────── */

.xy-template-bar {
  position: relative;
  flex-shrink: 0;
  z-index: 4;
  top: auto;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 6px;
  border-bottom: 1px solid #f0edf5;
  overflow-x: auto;
  background: rgba(250, 248, 253, 0.98);
  flex-wrap: nowrap;
  scrollbar-width: none;
  backdrop-filter: blur(12px);
}

.xy-template-bar::-webkit-scrollbar { display: none; }

.xy-tpl-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e4def0;
  border-radius: 15px;
  background: #fff;
  color: #554d61;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.xy-tpl-btn:active { background: #f5f0ff; }
.xy-tpl-btn.is-primary { color: #fff; background: #6b55e7; border-color: #6b55e7; }
.xy-tpl-btn.is-save { border-color: #c4b0ee; color: #7040dc; }

.xy-template-empty {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  color: #7562df;
  flex-direction: column;
  text-align: center;
}

.xy-template-empty strong {
  margin-top: 8px;
  color: #302c3b;
  font-size: 14px;
}

.xy-template-empty small {
  max-width: 240px;
  margin-top: 5px;
  color: #9994a6;
  font-size: 11px;
  line-height: 1.5;
}

/* Xiaoling embeds the video studio without the legacy Xiaodian console header. */
.xy-app-shell .app-header.brand-header {
  display: none !important;
}

.xy-template-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 6px 14px 20px;
}

.xy-template-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xy-template-load {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid #ece8f3;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.xy-template-load:active { background: #f8f5ff; border-color: #c4b0ee; }
.xy-template-load strong { color: #2d2837; font-size: 14px; }
.xy-template-load small  { color: #9994a6; font-size: 11px; }

.xy-template-delete {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #ede8f3;
  border-radius: 10px;
  background: #fff;
  color: #9994a6;
  cursor: pointer;
  flex-shrink: 0;
}

.xy-save-template-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 14px 32px;
}

.xy-template-name-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid #d8d0e8;
  border-radius: 12px;
  background: #fff;
  color: #1e1b28;
  font: inherit;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.xy-template-name-input:focus {
  border-color: #9b72e8;
  box-shadow: 0 0 0 3px rgba(123, 67, 224, 0.08);
}

.xy-save-template-confirm {
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(100deg, #7443ef, #a050e8);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.xy-save-template-confirm:disabled { opacity: 0.4; cursor: not-allowed; }


/* --- SMS / phone tab form (xiaoling) --- */
.xy-sms-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.xy-sms-note {
  font-size: 11px;
  color: #a2a0aa;
  text-align: center;
  margin: 0 0 4px;
}
.xy-sms-form > label {
  display: flex;
  gap: 7px;
  color: #5e5c69;
  flex-direction: column;
  font-size: 10px;
  font-weight: 600;
}
.xy-sms-form > label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xy-sms-form input {
  width: 100%;
  height: 47px;
  padding: 0 13px;
  color: #262530;
  background: #fafafe;
  border: 1px solid #dedde8;
  border-radius: 13px;
  outline: 0;
  font-size: 16px;
  box-sizing: border-box;
}
.xy-sms-form input:focus {
  background: #fff;
  border-color: #7b68ed;
  box-shadow: 0 0 0 3px rgba(112, 87, 234, 0.1);
}
.xy-sms-input-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #dedde8;
  border-radius: 13px;
  overflow: hidden;
  background: #fafafe;
}
.xy-sms-input-row:focus-within {
  border-color: #7b68ed;
  box-shadow: 0 0 0 3px rgba(112, 87, 234, 0.1);
  background: #fff;
}
.xy-sms-input-row input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0;
}
.xy-send-code-btn {
  flex-shrink: 0;
  padding: 0 14px;
  height: 47px;
  border: none;
  border-left: 1px solid #dedde8;
  background: transparent;
  color: #7b68ed;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 120ms;
}
.xy-send-code-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.xy-sms-validity {
  display: block;
  margin-top: 7px;
  color: #6f63ad;
  font-size: 12px;
  line-height: 1.45;
}

.xy-sms-captcha {
  padding: 2px 2px 8px;
}

.xy-sms-captcha-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #5b5765;
  font-size: 12px;
  font-weight: 600;
}

.xy-sms-captcha-toolbar button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  color: #6851d8;
  background: #f0ecff;
  border: 0;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
}

.xy-sms-captcha-picture {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #dde0f3;
  border: 1px solid #dedbea;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.xy-sms-captcha-picture > canvas:first-child {
  display: block;
  width: 100%;
  height: auto;
}

.xy-sms-captcha-piece {
  position: absolute;
  z-index: 2;
  width: 13.75%;
  height: auto;
  filter: drop-shadow(0 4px 5px rgba(35, 30, 67, .28));
  pointer-events: none;
}

.xy-sms-captcha-track {
  position: relative;
  height: 48px;
  margin-top: 12px;
  overflow: hidden;
  background: #f2f1f6;
  border: 1px solid #dedce7;
  border-radius: 13px;
  transition: background 160ms ease, border-color 160ms ease;
}

.xy-sms-captcha-progress {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(118, 92, 234, .2), rgba(107, 82, 222, .34));
}

.xy-sms-captcha-track > div {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #817d8a;
  font-size: 10px;
  font-weight: 500;
  pointer-events: none;
}

.xy-sms-captcha-range {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 4px;
  cursor: grab;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  touch-action: none;
}

.xy-sms-captcha-range::-webkit-slider-runnable-track {
  height: 40px;
  background: transparent;
}

.xy-sms-captcha-range::-webkit-slider-thumb {
  width: 40px;
  height: 40px;
  margin-top: 0;
  cursor: grab;
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%236b53df' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  border: 1px solid #c9c2ed;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(77, 59, 155, .17);
}

.xy-sms-captcha-range::-moz-range-track {
  height: 40px;
  background: transparent;
  border: 0;
}

.xy-sms-captcha-range::-moz-range-thumb {
  width: 38px;
  height: 38px;
  cursor: grab;
  background: #fff;
  border: 1px solid #c9c2ed;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(77, 59, 155, .17);
}

.xy-sms-captcha-track.is-failed {
  background: #fff2f3;
  border-color: #f0bdc4;
}

.xy-sms-captcha-track.is-failed > div {
  color: #b54b5b;
}

.xy-sms-captcha-track.is-verified {
  background: #eaf8f1;
  border-color: #9ed2bb;
}

.xy-sms-captcha-track.is-verified .xy-sms-captcha-progress {
  width: 100% !important;
  background: #d9f0e5;
}

.xy-sms-captcha-track.is-verified > div {
  color: #3f8267;
  font-weight: 650;
}

.xy-sms-captcha-track.is-verified input {
  opacity: 0;
}

.xy-sms-captcha > p {
  margin: 9px 0 0;
  color: #9995a1;
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

.xy-sms-switch {
  font-size: 11px;
  color: #a2a0aa;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  padding: 4px 0 0;
  text-decoration: underline;
  align-self: center;
}

/* ─── Main-page hierarchy refresh + fixed meeting tool ──────────────── */

.xy-subview {
  position: relative;
  isolation: isolate;
}

.xy-subview::before {
  position: absolute;
  z-index: -1;
  top: -58px;
  right: -68px;
  width: 190px;
  height: 190px;
  content: "";
  background: radial-gradient(circle, rgba(118, 96, 242, 0.13), rgba(118, 96, 242, 0) 68%);
  pointer-events: none;
}

.xy-task-page-intro,
.xy-me-page-intro {
  position: relative;
  min-height: 94px;
  overflow: hidden;
  align-items: center;
  padding: 14px 14px;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.9), transparent 25%),
    linear-gradient(132deg, #f4f2ff 0%, #edf2ff 58%, #f8f7ff 100%);
  border: 1px solid #e3e1f6;
  border-radius: 21px;
  box-shadow: 0 13px 32px rgba(67, 59, 119, 0.075);
}

.xy-task-page-intro::after,
.xy-me-page-intro::after {
  position: absolute;
  right: 66px;
  bottom: -42px;
  width: 112px;
  height: 112px;
  content: "";
  background: rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  pointer-events: none;
}

.xy-task-page-intro > *,
.xy-me-page-intro > * {
  position: relative;
  z-index: 1;
}

.xy-phone-manager.is-compact,
.xy-task-app-context,
.xy-all-tasks {
  position: relative;
  border-color: rgba(226, 225, 239, 0.96);
  box-shadow: 0 10px 28px rgba(54, 50, 93, 0.055);
}

.xy-task-app-context::before,
.xy-all-tasks::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -1px;
  width: 3px;
  content: "";
  background: linear-gradient(180deg, #7a65f3, #9daaf8);
  border-radius: 0 4px 4px 0;
}

.xy-app-picker > .xy-app-empty,
.xy-app-picker > .xy-app-loading {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0;
}

.xy-app-picker button.is-fixed-tool {
  color: #5744c7;
  background: linear-gradient(145deg, #f8f6ff, #eef2ff);
  border-color: #dcd7fa;
  box-shadow: 0 7px 18px rgba(94, 73, 207, 0.08);
}

.xy-app-picker button.is-fixed-tool .xy-meeting-tool-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 auto;
  color: #654fe1;
  background: linear-gradient(145deg, #e9e4ff, #e5edff);
  border-radius: 12px;
}

.xy-app-picker.is-compact button.is-fixed-tool .xy-meeting-tool-icon {
  width: 31px;
  height: 31px;
  border-radius: 10px;
}

.xy-app-picker button.is-fixed-tool > em {
  position: absolute;
  top: 5px;
  right: 6px;
  padding: 2px 5px;
  color: #6c56dd;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 7px;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.xy-app-picker button.is-fixed-tool > svg:last-child {
  margin-top: 14px;
}

.xy-records-hero {
  box-shadow: 0 15px 34px rgba(65, 61, 119, 0.085);
}

.xy-record-list-section {
  padding: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #e8e8f1;
  border-radius: 19px;
  box-shadow: 0 12px 30px rgba(52, 54, 87, 0.045);
}

.xy-execution-row {
  border-color: #e3e4ed;
  box-shadow: 0 8px 21px rgba(48, 51, 84, 0.06);
}

.xy-profile-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 34px rgba(71, 63, 133, 0.09);
}

.xy-profile-card::after {
  position: absolute;
  right: -38px;
  bottom: -62px;
  width: 150px;
  height: 150px;
  content: "";
  background: rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  pointer-events: none;
}

.xy-profile-card > * {
  position: relative;
  z-index: 1;
}

.xy-account-stats {
  overflow: hidden;
  background: linear-gradient(180deg, #fff, #faf9ff);
  box-shadow: 0 10px 26px rgba(52, 54, 87, 0.045);
}

.xy-account-stats > div:nth-child(2) {
  background: rgba(242, 239, 255, 0.6);
}

.xy-menu-group-heading {
  margin-top: 3px;
  padding: 10px 5px 2px;
}

.xy-menu-group-heading span::before {
  display: inline-block;
  width: 4px;
  height: 12px;
  margin-right: 7px;
  content: "";
  background: linear-gradient(180deg, #765ff0, #9a8df7);
  border-radius: 4px;
  vertical-align: -2px;
}

.xy-menu-list {
  border-color: #e6e6ef;
  box-shadow: 0 10px 28px rgba(50, 52, 83, 0.05);
}

.xy-menu-list > button > span {
  box-shadow: inset 0 0 0 1px rgba(109, 87, 235, 0.06);
}

/* ─── Meeting minutes ───────────────────────────────────────────────── */

.xy-meeting-overlay {
  position: absolute;
  z-index: 180;
  inset: 0;
  display: flex;
  min-height: 0;
  overflow: hidden;
  color: #1c1d27;
  background:
    radial-gradient(circle at 88% 5%, rgba(112, 91, 239, 0.13), transparent 28%),
    #f7f8fc;
  flex-direction: column;
}

.xy-meeting-header {
  display: grid;
  min-height: calc(66px + env(safe-area-inset-top, 0px));
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 15px 10px;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #e6e6ef;
  grid-template-columns: 38px minmax(0, 1fr);
  backdrop-filter: blur(16px);
}

.xy-meeting-header > button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #565868;
  background: #fff;
  border: 1px solid #e1e2ea;
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(52, 54, 83, 0.05);
}

.xy-meeting-header > button { padding: 0; }

.xy-meeting-header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-meeting-header h1 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.xy-meeting-tabs {
  display: grid;
  gap: 5px;
  margin: 10px 15px 0;
  padding: 4px;
  background: #ebeaf2;
  border-radius: 13px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xy-meeting-tabs button {
  min-height: 35px;
  color: #7c7e8b;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.xy-meeting-tabs button.is-active {
  color: #5e48dc;
  background: #fff;
  box-shadow: 0 5px 14px rgba(49, 48, 71, 0.08);
}

.xy-meeting-tabs em {
  margin-left: 4px;
  padding: 2px 5px;
  color: #6b56de;
  background: #efecff;
  border-radius: 7px;
  font-size: 14px;
  font-style: normal;
}

.xy-meeting-scroll.mobile-page {
  position: relative !important;
  inset: auto !important;
  width: auto;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.xy-meeting-content {
  display: flex;
  gap: 10px;
  padding: 12px 15px 16px;
  flex-direction: column;
}

.xy-meeting-card {
  padding: 13px;
  background: #fff;
  border: 1px solid #e5e5ee;
  border-radius: 18px;
  box-shadow: 0 9px 24px rgba(48, 50, 80, 0.045);
}

.xy-meeting-card-heading {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.xy-meeting-card-heading > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.xy-meeting-card-heading i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  background: #6b55e6;
  border-radius: 8px;
  font-size: 14px;
  font-style: normal;
}

.xy-meeting-card-heading strong { font-size: 14px; }
.xy-meeting-card-heading > small { color: #9a9ca8; font-size: 14px; }

.xy-meeting-card-heading > button,
.xy-meeting-history-detail header button {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  color: #6550db;
  background: #f0edff;
  border: 0;
  border-radius: 9px;
  font-size: 14px;
}

.xy-meeting-card textarea {
  width: 100%;
  min-height: 160px;
  resize: none;
  padding: 11px;
  color: #262733;
  background: #fafafe;
  border: 1px solid #dedee8;
  border-radius: 13px;
  outline: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;
}

.xy-meeting-card textarea:focus {
  background: #fff;
  border-color: #7560e8;
  box-shadow: 0 0 0 3px rgba(105, 82, 224, 0.09);
}

.xy-meeting-input-actions {
  display: grid;
  gap: 6px;
  margin-top: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xy-meeting-input-actions > button {
  display: flex;
  min-width: 0;
  min-height: 57px;
  align-items: center;
  gap: 6px;
  padding: 7px;
  color: #6250cc;
  text-align: left;
  background: #f5f3ff;
  border: 1px solid #e4e0fa;
  border-radius: 12px;
}

.xy-meeting-input-actions > button.is-recording {
  color: #fff;
  background: linear-gradient(145deg, #ff7082, #e64e67);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(218, 68, 93, 0.2);
}

.xy-meeting-input-actions > button:disabled { opacity: .48; }

.xy-meeting-input-actions > button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.xy-meeting-input-actions strong { font-size: 14px; white-space: nowrap; }
.xy-meeting-input-actions small { margin-top: 2px; color: #9693a7; font-size: 14px; white-space: nowrap; }
.xy-meeting-input-actions .is-recording small { color: rgba(255,255,255,.78); }

.xy-meeting-audio-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 9px;
  color: #6050c7;
  background: #f4f2ff;
  border-radius: 11px;
}

.xy-meeting-audio-status.is-error { color: #c34d5b; background: #fff0f2; }
.xy-meeting-audio-status > svg { flex: 0 0 auto; }
.xy-meeting-audio-status > span { display: flex; min-width: 0; flex-direction: column; }
.xy-meeting-audio-status strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.xy-meeting-audio-status small { margin-top: 2px; overflow: hidden; color: #8b889b; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

.xy-meeting-result pre,
.xy-meeting-history-detail pre {
  margin: 0;
  color: #343541;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.75;
}

.xy-meeting-status {
  margin: 0;
  padding: 8px 10px;
  color: #6352c7;
  text-align: center;
  background: #f1efff;
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.5;
}

.xy-meeting-status.is-error { color: #bd4657; background: #fff0f2; }

.xy-meeting-footer {
  flex: 0 0 auto;
  padding: 9px 15px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: rgba(255,255,255,.94);
  border-top: 1px solid #e5e5ed;
  box-shadow: 0 -10px 28px rgba(44, 46, 73, 0.06);
  backdrop-filter: blur(16px);
}

.xy-meeting-footer > button {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: linear-gradient(145deg, #765ff1, #5940dc);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 23px rgba(86, 62, 216, 0.23);
  font-size: 14px;
  font-weight: 650;
}

.xy-meeting-footer > button:disabled {
  color: #a09ead;
  background: #e4e3e9;
  box-shadow: none;
}

.xy-meeting-history-list {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.xy-meeting-history-list > button {
  display: flex;
  width: 100%;
  min-height: 94px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid #e4e5ed;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(49, 51, 82, 0.045);
}

.xy-meeting-history-list > button > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #6651de;
  background: #efecff;
  border-radius: 12px;
  flex: 0 0 auto;
}

.xy-meeting-history-list > button > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.xy-meeting-history-list strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.xy-meeting-history-list small { margin-top: 3px; color: #8f919e; font-size: 14px; }
.xy-meeting-history-list p { margin: 5px 0 0; overflow: hidden; color: #747684; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.xy-meeting-history-list > button > svg { color: #989aa6; flex: 0 0 auto; }

.xy-meeting-history-empty {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #7660e5;
  text-align: center;
  background: #fff;
  border: 1px solid #e6e6ee;
  border-radius: 18px;
  flex-direction: column;
}

.xy-meeting-history-empty strong { margin-top: 9px; color: #3b3d49; font-size: 12px; }
.xy-meeting-history-empty p { margin: 5px 0 0; color: #898b98; font-size: 14px; line-height: 1.55; }
.xy-meeting-history-empty button { min-height: 36px; margin-top: 12px; padding: 0 13px; color: #fff; background: #6750e1; border: 0; border-radius: 11px; font-size: 14px; }

.xy-meeting-history-detail {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.xy-meeting-history-detail > button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 0 9px;
  color: #6550d8;
  background: #efecff;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
}

.xy-meeting-history-detail > div,
.xy-meeting-history-detail > section,
.xy-meeting-history-detail > details {
  padding: 13px;
  background: #fff;
  border: 1px solid #e5e5ed;
  border-radius: 16px;
}

.xy-meeting-history-detail > div span { color: #8e90a0; font-size: 14px; }
.xy-meeting-history-detail > div h2 { margin: 5px 0 4px; font-size: 15px; }
.xy-meeting-history-detail > div small { color: #6954df; font-size: 14px; }
.xy-meeting-history-detail header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.xy-meeting-history-detail header strong { font-size: 14px; }
.xy-meeting-history-detail details summary { color: #6551d8; font-size: 14px; font-weight: 600; }
.xy-meeting-history-detail details p { margin: 9px 0 0; color: #6f7180; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }

/* Meeting content must remain readable in the embedded mobile WebView. */
.xy-meeting-overlay,
.xy-meeting-overlay button,
.xy-meeting-overlay textarea,
.xy-meeting-overlay small,
.xy-meeting-overlay p,
.xy-meeting-overlay strong,
.xy-meeting-overlay span,
.xy-meeting-overlay em,
.xy-meeting-overlay i,
.xy-meeting-overlay pre,
.xy-meeting-overlay summary {
  font-size: 14px;
}

/* ─── AI data profile onboarding ─────────────────────────────────────── */

.xy-data-profile-overlay {
  position: absolute;
  z-index: 210;
  inset: 0;
  display: flex;
  min-height: 0;
  overflow: hidden;
  color: #171827;
  background: #fbfbfe;
  flex-direction: column;
}

.xy-data-profile-header {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: calc(58px + env(safe-area-inset-top, 0px));
  flex-shrink: 0;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(232, 231, 241, 0.82);
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  backdrop-filter: blur(18px);
}

.xy-data-profile-header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.25px;
  text-align: center;
}

.xy-data-profile-header > button {
  display: grid;
  min-width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  color: #171827;
  background: transparent;
  border: 0;
}

.xy-data-profile-header .xy-data-profile-skip {
  color: #464756;
  font-size: 14px;
  font-weight: 500;
}

.xy-data-profile-scroll.mobile-page {
  position: relative !important;
  inset: auto !important;
  width: auto;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.xy-data-profile-content {
  min-height: 100%;
  overflow: hidden;
  padding: 18px 14px calc(24px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 92% 18%, rgba(105, 100, 255, 0.13), transparent 22%),
    radial-gradient(circle at 5% 32%, rgba(139, 123, 255, 0.09), transparent 18%),
    #fbfbfe;
}

.xy-data-profile-steps {
  display: grid;
  margin: 0;
  padding: 0 20px 13px;
  list-style: none;
  grid-template-columns: repeat(3, 1fr);
}

.xy-data-profile-steps li {
  position: relative;
  display: flex;
  align-items: center;
  color: #9a9ba9;
  flex-direction: column;
}

.xy-data-profile-steps li:not(:last-child)::after {
  position: absolute;
  top: 16px;
  left: calc(50% + 25px);
  width: calc(100% - 50px);
  height: 2px;
  content: "";
  background: #d9d9e3;
  border-radius: 99px;
}

.xy-data-profile-steps li.is-active:not(:last-child)::after {
  background: #6858f0;
}

.xy-data-profile-steps li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #9698a7;
  background: #fff;
  border: 1.5px solid #cfd0db;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 600;
}

.xy-data-profile-steps li.is-active > span {
  color: #fff;
  background: linear-gradient(145deg, #7854f2, #4758f6);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(89, 78, 235, 0.22);
}

.xy-data-profile-steps li.is-active > span svg {
  width: 34px;
  height: 34px;
}

.xy-data-profile-steps small {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 500;
}

.xy-data-profile-steps li.is-active small {
  color: #5e52e6;
}

.xy-data-profile-request-state {
  display: flex;
  max-width: 420px;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 24px auto 0;
  padding: 28px;
  color: #6553e8;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e8e5f3;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(70, 65, 130, 0.08);
  flex-direction: column;
}

.xy-data-profile-request-state strong {
  margin-top: 3px;
  color: #252634;
  font-size: 16px;
}

.xy-data-profile-request-state p {
  margin: 0;
  color: #858694;
  font-size: 12px;
}

.xy-data-profile-request-state.is-error {
  color: #cf3e57;
}

.xy-data-profile-request-state button {
  min-height: 36px;
  margin-top: 8px;
  padding: 0 18px;
  color: #fff;
  background: #6252e8;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
}

.xy-data-profile-hero {
  position: relative;
  display: grid;
  min-height: 109px;
  align-items: center;
  padding: 0 2px 8px 9px;
  grid-template-columns: minmax(0, 1.2fr) minmax(155px, 0.8fr);
}

.xy-data-profile-hero > div {
  position: relative;
  z-index: 1;
  width: 285px;
}

.xy-data-profile-hero h2 {
  max-width: 260px;
  margin: 0;
  font-size: clamp(24px, 6vw, 27px);
  font-weight: 750;
  letter-spacing: -1.1px;
  line-height: 1.28;
  white-space: nowrap;
}

.xy-data-profile-hero h2 em {
  color: #6154ed;
  font-style: normal;
}

.xy-data-profile-hero p {
  max-width: 245px;
  margin: 7px 0 0;
  color: #787989;
  font-size: 13px;
  line-height: 1.8;
}

.xy-data-profile-hero img {
  position: absolute;
  right: -4px;
  bottom: -9px;
  width: 175px;
  max-width: 50vw;
  filter: saturate(1.05);
  mix-blend-mode: multiply;
}

.xy-data-profile-form-card {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 11px;
  margin-top: -11px;
  padding: 17px 15px 13px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #eeecf5;
  border-radius: 25px;
  box-shadow: 0 18px 50px rgba(70, 65, 130, 0.09);
  flex-direction: column;
}

.xy-data-profile-field {
  display: flex;
  min-width: 0;
  gap: 7px;
  color: inherit;
  flex-direction: column;
}

.xy-data-profile-field > span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.xy-data-profile-field > span > i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(145deg, #785cf4, #4563f4);
  border-radius: 8px;
  box-shadow: 0 6px 13px rgba(89, 79, 232, 0.18);
}

.xy-data-profile-field > span strong {
  font-size: 14px;
  font-weight: 650;
}

.xy-data-profile-field > span strong small {
  color: #626472;
  font-size: 12px;
  font-weight: 400;
}

.xy-data-profile-field > input,
.xy-data-profile-link-input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 13px;
  color: #232431;
  background: #fff;
  border: 1px solid #d9d9e3;
  border-radius: 11px;
  outline: 0;
  font-size: 14px;
}

.xy-data-profile-field > input:focus,
.xy-data-profile-link-input:focus,
.xy-data-profile-textarea-wrap textarea:focus {
  border-color: #7563ee;
  box-shadow: 0 0 0 3px rgba(110, 91, 239, 0.1);
}

.xy-data-profile-field input::placeholder,
.xy-data-profile-field textarea::placeholder {
  color: #a4a4b2;
}

.xy-data-profile-textarea-wrap {
  position: relative;
}

.xy-data-profile-textarea-wrap textarea {
  display: block;
  width: 100%;
  height: 100px;
  min-height: 100px;
  box-sizing: border-box;
  resize: none;
  padding: 10px 13px 38px;
  color: #232431;
  background: #fff;
  border: 1px solid #d9d9e3;
  border-radius: 11px;
  outline: 0;
  font-size: 14px;
  line-height: 1.75;
}

.xy-data-profile-voice {
  position: absolute;
  bottom: 8px;
  left: 11px;
  display: flex;
  height: 28px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  color: #5e50e7;
  background: #f5f2ff;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.xy-data-profile-textarea-wrap > small {
  position: absolute;
  right: 11px;
  bottom: 11px;
  color: #9293a1;
  font-size: 11px;
}

.xy-data-profile-tags {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.xy-data-profile-tags > button,
.xy-data-profile-tag-input {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  color: #373846;
  background: linear-gradient(100deg, #f8f6ff, #f0effa);
  border: 0;
  border-radius: 999px;
  font-size: 13px;
}

.xy-data-profile-tags > button b {
  color: #9293a0;
  font-size: 16px;
  font-weight: 400;
}

.xy-data-profile-tags > button.is-add {
  color: #5e52e9;
  background: #fff;
  border: 1px dashed #6e5bf0;
  font-weight: 600;
}

.xy-data-profile-tag-input {
  width: 142px;
  padding: 0 6px;
}

.xy-data-profile-tag-input input {
  width: 100%;
  height: 27px;
  padding: 0 7px;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
}

.xy-data-profile-attachments {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xy-data-profile-attachments button {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 4px;
  color: #343542;
  background: #fff;
  border: 1px solid #dedee7;
  border-radius: 10px;
  font-size: 12px;
}

.xy-data-profile-attachments button svg {
  flex: 0 0 auto;
  color: #6657ec;
}

.xy-data-profile-attachments button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-data-profile-attachments button.is-ready {
  color: #315f55;
  background: #effaf6;
  border-color: #bfe5d7;
}

.xy-data-profile-attachments button.is-error {
  color: #b53b50;
  background: #fff4f6;
  border-color: #efbec7;
}

.xy-data-profile-attachments button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.xy-data-profile-help {
  margin: 0;
  color: #9293a2;
  font-size: 11px;
  line-height: 1.6;
}

.xy-data-profile-recognition {
  display: grid;
  align-items: center;
  gap: 3px 8px;
  padding: 6px 10px;
  background: linear-gradient(115deg, #f1e9ff, #edf4ff);
  border: 1px solid #e0daf8;
  border-radius: 16px;
  grid-template-columns: 46px minmax(0, 1fr);
}

.xy-data-profile-recognition > img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(91, 75, 223, 0.2);
}

.xy-data-profile-recognition > div strong {
  font-size: 14px;
}

.xy-data-profile-recognition > div p {
  margin: 2px 0 5px;
  color: #777889;
  font-size: 10px;
  line-height: 1.5;
}

.xy-data-profile-recognition ul {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.xy-data-profile-recognition li {
  padding: 4px 8px;
  color: #6251df;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-size: 10px;
}

.xy-data-profile-recognition li:nth-child(2) {
  color: #27785e;
  background: rgba(222, 245, 238, 0.85);
}

.xy-data-profile-recognition li:nth-child(3) {
  color: #3468d8;
  background: rgba(225, 235, 255, 0.9);
}

.xy-data-profile-recognition > button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: #6652e5;
  background: transparent;
  border: 0;
  font-size: 10px;
}

.xy-data-profile-recognition > button:not(.is-confirm) {
  grid-row: 2;
  grid-column: 1 / 3;
  justify-self: start;
}

.xy-data-profile-recognition > button.is-confirm {
  grid-row: 2;
  grid-column: 1 / 3;
  justify-self: end;
  font-size: 11px;
  font-weight: 600;
}

.xy-data-profile-validation {
  margin: -8px 0 -7px;
  color: #cf3e57;
  font-size: 12px;
  text-align: center;
}

.xy-data-profile-primary {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: linear-gradient(105deg, #9158ef, #4d4ff1 52%, #0564f3);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(81, 70, 232, 0.22);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.8px;
}

.xy-data-profile-primary:disabled {
  cursor: wait;
  opacity: 0.68;
  box-shadow: none;
}

.xy-data-profile-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: -6px 0 0;
  color: #9a9ba9;
  font-size: 11px;
}

.xy-data-profile-industry,
.xy-data-profile-complete {
  display: flex;
  max-width: 440px;
  min-height: 660px;
  margin: 0 auto;
  padding: 42px 6px 20px;
  flex-direction: column;
}

.xy-data-profile-kicker {
  align-self: flex-start;
  padding: 5px 10px;
  color: #6350e4;
  background: #f0edff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.xy-data-profile-industry > h2,
.xy-data-profile-complete > h2 {
  margin: 15px 0 0;
  font-size: 27px;
  letter-spacing: -0.8px;
}

.xy-data-profile-industry > p,
.xy-data-profile-complete > p {
  margin: 10px 0 0;
  color: #777887;
  font-size: 13px;
  line-height: 1.8;
}

.xy-data-profile-industry-list {
  display: flex;
  gap: 11px;
  margin-top: 26px;
  flex-direction: column;
}

.xy-data-profile-industry-list > button {
  display: flex;
  width: 100%;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  color: #292a38;
  text-align: left;
  background: #fff;
  border: 1px solid #e3e2eb;
  border-radius: 17px;
  box-shadow: 0 9px 24px rgba(55, 53, 91, 0.045);
}

.xy-data-profile-industry-list > button.is-selected {
  background: linear-gradient(110deg, #f2edff, #edf3ff);
  border-color: #8070ec;
  box-shadow: 0 12px 27px rgba(82, 69, 217, 0.11);
}

.xy-data-profile-industry-list > button > span:first-child {
  display: flex;
  gap: 4px;
  flex-direction: column;
}

.xy-data-profile-industry-list strong {
  font-size: 16px;
}

.xy-data-profile-industry-list small {
  color: #858694;
  font-size: 11px;
}

.xy-data-profile-industry-list svg {
  flex: 0 0 auto;
  color: #6451e2;
}

.xy-data-profile-radio {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border: 1.5px solid #c9cad5;
  border-radius: 50%;
}

.xy-data-profile-plan-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 18px 0 22px;
  padding: 15px;
  color: #5745d6;
  background: #f2efff;
  border-radius: 17px;
}

.xy-data-profile-plan-card div {
  color: #282938;
}

.xy-data-profile-plan-card strong {
  font-size: 14px;
}

.xy-data-profile-plan-card p {
  margin: 5px 0 0;
  color: #777887;
  font-size: 11px;
  line-height: 1.7;
}

.xy-data-profile-complete {
  align-items: center;
  justify-content: center;
  padding-top: 18px;
  text-align: center;
}

.xy-data-profile-complete-mark {
  display: grid;
  width: 112px;
  height: 112px;
  margin-bottom: 22px;
  place-items: center;
  color: #6352e8;
  background: linear-gradient(145deg, #f1ebff, #e8f1ff);
  border: 1px solid #dfdaf8;
  border-radius: 35px;
  box-shadow: 0 18px 40px rgba(77, 66, 191, 0.13);
}

.xy-data-profile-complete .xy-data-profile-kicker {
  align-self: center;
}

.xy-data-profile-complete dl {
  width: 100%;
  margin: 24px 0 20px;
  overflow: hidden;
  text-align: left;
  background: #fff;
  border: 1px solid #e6e5ed;
  border-radius: 18px;
}

.xy-data-profile-complete dl > div {
  display: grid;
  min-height: 58px;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid #efedf4;
  grid-template-columns: 92px minmax(0, 1fr);
}

.xy-data-profile-complete dl > div:last-child {
  border-bottom: 0;
}

.xy-data-profile-complete dt {
  color: #8a8b98;
  font-size: 12px;
}

.xy-data-profile-complete dd {
  margin: 0;
  color: #2a2b38;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.xy-data-profile-complete .xy-data-profile-preview-note {
  margin: 0 0 18px;
  color: #4b7b6d;
  font-size: 10px;
}

@media (max-width: 370px) {
  .xy-data-profile-content { padding-inline: 10px; }
  .xy-data-profile-steps { padding-inline: 8px; }
  .xy-data-profile-hero { grid-template-columns: minmax(0, 1.12fr) minmax(130px, 0.88fr); }
  .xy-data-profile-hero h2 { font-size: 23px; }
  .xy-data-profile-hero img { width: 170px; }
  .xy-data-profile-form-card { padding-inline: 13px; }
  .xy-data-profile-attachments button { min-height: 68px; flex-direction: column; }
}

.xy-meeting-header h1 { font-size: 18px; }
.xy-meeting-history-detail > div h2 { font-size: 16px; }

.xy-meeting-input-actions > button {
  min-height: 78px;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.xy-meeting-input-actions > button > span { align-items: center; }
.xy-meeting-input-actions strong,
.xy-meeting-input-actions small { white-space: normal; }

@media (max-width: 360px) {
  .xy-meeting-input-actions {
    grid-template-columns: 1fr;
  }

  .xy-meeting-input-actions > button {
    min-height: 46px;
  }
}

.xy-meeting-download-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 6px 14px;
  color: #6750e1;
  background: #f0eeff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
}

/* Digital-human studio — independent from AI-phone binding. */

.xy-dh-page {
  position: absolute;
  z-index: 240;
  inset: 0;
  overflow: hidden;
  color: #252332;
  background: #f7f7fb;
}

.xy-dh-header {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  min-height: calc(66px + env(safe-area-inset-top, 0px));
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 7px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: rgba(250, 250, 253, 0.96);
  border-bottom: 1px solid rgba(230, 230, 239, 0.85);
  backdrop-filter: blur(16px);
}

.xy-dh-header > button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #575064;
  background: #fff;
  border: 1px solid #eceaf2;
  border-radius: 12px;
}

.xy-dh-header > div { min-width: 0; }
.xy-dh-header h1 { margin: 0; color: #1f1d28; font-size: 17px; line-height: 1.25; }
.xy-dh-header span { display: block; margin-top: 2px; color: #9793a2; font-size: 13px; }
.xy-dh-history-shortcut { justify-self: end; color: #735ad9 !important; }

.xy-dh-tabs {
  position: absolute;
  z-index: 4;
  top: calc(66px + env(safe-area-inset-top, 0px));
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 7px 13px 9px;
  background: rgba(250, 250, 253, 0.97);
  border-bottom: 1px solid #ecebf2;
}

.xy-dh-tabs button {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #888390;
  background: transparent;
  border: 0;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
}

.xy-dh-tabs button.is-active { color: #684cd2; background: #eee9ff; }
.xy-dh-scroll { position: absolute; inset: 0; background: #f7f7fb; }
.xy-dh-scroll .mobile-scroll-content { padding: calc(127px + env(safe-area-inset-top, 0px)) 13px calc(28px + var(--mobile-safe-area-height, 0px)); }

.xy-dh-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
  padding: 17px;
  color: #29213f;
  background: linear-gradient(135deg, #eee9ff, #f4f5ff 60%, #eaf7f2);
  border: 1px solid rgba(113, 83, 217, 0.12);
  border-radius: 21px;
}

.xy-dh-hero > span { display: grid; width: 48px; height: 48px; place-items: center; color: #6f51d7; background: rgba(255,255,255,.78); border-radius: 16px; }
.xy-dh-hero small { color: #7057d1; font-size: 13px; font-weight: 700; }
.xy-dh-hero h2 { margin: 4px 0 5px; font-size: 18px; line-height: 1.3; }
.xy-dh-hero p { margin: 0; color: #777181; font-size: 13px; line-height: 1.55; }

.xy-dh-service { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 11px 12px; color: #6f58ca; background: #f1edff; border: 1px solid #ded5fa; border-radius: 14px; }
.xy-dh-service.is-ready { color: #3d8068; background: #edf9f4; border-color: #cde9dc; }
.xy-dh-service.is-unavailable { color: #a2534b; background: #fff2ef; border-color: #f2d6d0; }
.xy-dh-service > svg { margin-top: 1px; flex: 0 0 auto; }
.xy-dh-service span,
.xy-dh-service strong,
.xy-dh-service small { display: block; min-width: 0; }
.xy-dh-service strong { font-size: 13px; }
.xy-dh-service small { margin-top: 3px; overflow: hidden; font-size: 13px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }

.xy-dh-card { margin-bottom: 12px; padding: 16px; background: #fff; border: 1px solid #ecebf2; border-radius: 20px; box-shadow: 0 8px 25px rgba(60, 49, 105, 0.045); }
.xy-dh-section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.xy-dh-section-title > span { display: grid; width: 25px; height: 25px; place-items: center; color: #fff; background: linear-gradient(135deg, #8269e8, #5e43c5); border-radius: 9px; font-size: 13px; font-weight: 700; }
.xy-dh-section-title h3 { margin: 0; font-size: 14px; }
.xy-dh-section-title p { margin: 2px 0 0; color: #9995a1; font-size: 13px; }

.xy-dh-upload-grid,
.xy-dh-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.xy-dh-upload-grid label,
.xy-dh-mode-grid button { display: flex; min-width: 0; min-height: 110px; align-items: center; justify-content: center; padding: 12px 8px; color: #6f687a; text-align: center; background: #faf9fd; border: 1px dashed #dcd8e7; border-radius: 16px; flex-direction: column; }
.xy-dh-upload-grid label.is-ready { color: #4f8a72; background: #f0faf6; border-color: #9ed4bd; }
.xy-dh-upload-grid input,
.xy-dh-audio-upload input,
.xy-dh-training-upload input { display: none; }
.xy-dh-upload-grid strong,
.xy-dh-mode-grid strong { display: block; margin-top: 7px; color: #403a49; font-size: 13px; }
.xy-dh-upload-grid small,
.xy-dh-mode-grid small { display: block; width: 100%; margin-top: 4px; overflow: hidden; color: #a09ba7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh-storage-note { display: flex; align-items: flex-start; gap: 5px; margin: 11px 1px 0; color: #6b897e; font-size: 13px; line-height: 1.5; }
.xy-dh-storage-note svg { margin-top: 1px; flex: 0 0 auto; }
.xy-dh-remove-source-video { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; padding: 6px 8px; color: #9b514a; background: #fff1ef; border: 0; border-radius: 8px; font-size: 13px; }

.xy-dh-mode-grid { margin-bottom: 13px; }
.xy-dh-mode-grid button { min-height: 98px; border-style: solid; }
.xy-dh-mode-grid button.is-active { color: #684bd1; background: #f1edff; border-color: #8b70e6; box-shadow: inset 0 0 0 1px rgba(111, 81, 215, 0.09); }
.xy-dh-mode-grid button.is-active strong { color: #6045c3; }

.xy-dh-audio-upload { display: grid; min-height: 66px; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 8px; padding: 10px 12px; color: #745bd5; background: #f8f6ff; border: 1px dashed #b7a8e8; border-radius: 15px; }
.xy-dh-audio-upload.is-ready { color: #46806b; background: #f0faf6; border-color: #98cfb8; }
.xy-dh-audio-upload span { min-width: 0; }
.xy-dh-audio-upload strong,
.xy-dh-audio-upload small { display: block; }
.xy-dh-audio-upload strong { color: #40394b; font-size: 13px; }
.xy-dh-audio-upload small { margin-top: 3px; overflow: hidden; color: #9993a2; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.xy-dh-field { position: relative; display: block; margin-top: 12px; }
.xy-dh-field > span { display: block; margin-bottom: 7px; color: #55505e; font-size: 13px; font-weight: 700; }
.xy-dh-field input,
.xy-dh-field textarea { width: 100%; padding: 11px 12px; color: #302d39; background: #f8f7fb; border: 1px solid #e4e1ea; border-radius: 13px; outline: 0; font: inherit; font-size: 16px; resize: none; }
.xy-dh-field input:focus,
.xy-dh-field textarea:focus { background: #fff; border-color: #8c73e7; box-shadow: 0 0 0 3px rgba(112, 84, 214, 0.08); }
.xy-dh-field > small { position: absolute; right: 9px; bottom: 7px; color: #aaa5b0; font-size: 13px; }

.xy-dh-voice-heading { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.xy-dh-voice-heading > strong { font-size: 13px; }
.xy-dh-voice-heading button { display: inline-flex; align-items: center; gap: 3px; padding: 6px 8px; color: #6e51d2; background: #f0ecff; border: 0; border-radius: 9px; font-size: 13px; font-weight: 700; }
.xy-dh-voice-list { display: grid; gap: 7px; }
.xy-dh-voice-list > button { display: grid; min-height: 52px; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; background: #faf9fc; border: 1px solid #ebe8ef; border-radius: 13px; }
.xy-dh-voice-list > button.is-active { background: #f3efff; border-color: #947ce4; }
.xy-dh-voice-list > button > span { display: grid; width: 28px; height: 28px; place-items: center; color: #7559d6; background: #ebe5ff; border-radius: 50%; }
.xy-dh-voice-list > button > div { min-width: 0; }
.xy-dh-voice-list strong,
.xy-dh-voice-list small { display: block; }
.xy-dh-voice-list strong { color: #3d3846; font-size: 13px; }
.xy-dh-voice-list small { margin-top: 2px; color: #9b96a2; font-size: 13px; }
.xy-dh-voice-list > button > svg { color: #6f53d2; }
.xy-dh-voice-preview { display: block; width: 100%; height: 34px; margin-top: 8px; }

.xy-dh-ratio-row { display: flex; align-items: center; gap: 6px; margin-top: 13px; }
.xy-dh-ratio-row > span { margin-right: auto; color: #55505e; font-size: 13px; font-weight: 700; }
.xy-dh-ratio-row button { padding: 6px 7px; color: #8b8691; background: #f7f6f9; border: 1px solid #ebe9ee; border-radius: 8px; font-size: 13px; }
.xy-dh-ratio-row button.is-active { color: #684bd0; background: #eee9ff; border-color: #ac9ae5; }
.xy-dh-message { display: flex; align-items: flex-start; gap: 6px; margin: 0 2px 10px; padding: 10px 11px; color: #9d4b43; background: #fff2f0; border-radius: 11px; font-size: 13px; line-height: 1.45; }
.xy-dh-message svg { flex: 0 0 auto; }
.xy-dh-generate { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 7px; color: #fff; background: linear-gradient(135deg, #795ee0, #5839bd); border: 0; border-radius: 15px; box-shadow: 0 10px 24px rgba(93, 61, 188, 0.22); font-size: 13px; font-weight: 700; }
.xy-dh-generate:disabled { opacity: .58; box-shadow: none; }
.xy-dh-prototype-note { margin: 10px 10px 0; color: #a29da8; font-size: 13px; line-height: 1.55; text-align: center; }

.xy-dh-training-hero { margin-bottom: 12px; padding: 22px 18px; text-align: center; background: linear-gradient(145deg, #efebff, #f7f6ff 62%, #ecf8f3); border: 1px solid rgba(109, 80, 212, 0.12); border-radius: 21px; }
.xy-dh-training-hero > span { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 10px; color: #7355d7; background: #fff; border-radius: 19px; box-shadow: 0 10px 22px rgba(81, 61, 148, 0.11); }
.xy-dh-training-hero h2 { margin: 0; font-size: 17px; }
.xy-dh-training-hero p { margin: 8px 0 0; color: #797482; font-size: 13px; line-height: 1.6; }
.xy-dh-training-upload { display: flex; min-height: 145px; align-items: center; justify-content: center; margin-top: 14px; padding: 16px; color: #765bd7; text-align: center; background: #faf9fd; border: 1px dashed #b9aae7; border-radius: 17px; flex-direction: column; }
.xy-dh-training-upload.is-ready { color: #46806b; background: #f0faf6; border-color: #9bcfb9; }
.xy-dh-training-upload strong { margin-top: 8px; color: #423c4a; font-size: 13px; }
.xy-dh-training-upload small { max-width: 100%; margin-top: 4px; overflow: hidden; color: #98939f; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh-training-upload em { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 6px 10px; color: #7256d3; background: #eee9ff; border-radius: 9px; font-size: 13px; font-style: normal; font-weight: 700; }
.xy-dh-record-row { display: grid; gap: 10px; margin-top: 10px; }
.xy-dh-record-divider { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #a29da8; }
.xy-dh-record-divider::before, .xy-dh-record-divider::after { content: ""; flex: 1; height: 1px; background: #ebe9f0; }
.xy-dh-record-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 13px; background: #f3f0ff; color: #6d4be3; border: 0; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
.xy-dh-record-btn.is-recording { background: #fff1f1; color: #e53e3e; animation: xy-record-pulse 1s ease-in-out infinite; }
.xy-dh-record-dot { width: 10px; height: 10px; border-radius: 50%; background: #e53e3e; flex-shrink: 0; }
.xy-dh-record-playback { width: 100%; height: 40px; border-radius: 8px; }
@keyframes xy-record-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }
.xy-dh-consent { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: start; gap: 7px; margin-top: 13px; color: #77717d; font-size: 13px; line-height: 1.5; }
.xy-dh-consent input { width: 16px; height: 16px; margin: 0; accent-color: #6d50d3; }
.xy-dh-safe-card { display: flex; align-items: flex-start; gap: 10px; color: #4f806f; background: #f1faf6; border-color: #d8eee5; }
.xy-dh-safe-card svg { flex: 0 0 auto; }
.xy-dh-safe-card strong { color: #3f6658; font-size: 13px; }
.xy-dh-safe-card p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; }
.xy-dh-custom-voices > strong { display: block; margin-bottom: 9px; color: #443d4c; font-size: 13px; }
.xy-dh-custom-voices > div { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #eeeaf2; }
.xy-dh-custom-voices > div > span { display: grid; min-width: 0; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 7px; color: #7357d2; }
.xy-dh-custom-voices b,
.xy-dh-custom-voices small { display: block; grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh-custom-voices b { color: #443e49; font-size: 13px; }
.xy-dh-custom-voices small { color: #9993a0; font-size: 13px; font-weight: 400; }
.xy-dh-custom-voices button { display: grid; width: 32px; height: 32px; place-items: center; color: #a45d58; background: #fff2f0; border: 0; border-radius: 10px; }

.xy-dh-history-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.xy-dh-history-summary > div { padding: 13px 10px; text-align: center; background: #fff; border: 1px solid #eceaf1; border-radius: 15px; }
.xy-dh-history-summary small,
.xy-dh-history-summary strong { display: block; }
.xy-dh-history-summary small { color: #96919c; font-size: 13px; }
.xy-dh-history-summary strong { margin-top: 4px; color: #5e43c5; font-size: 18px; }
.xy-dh-history-list { display: grid; gap: 9px; }
.xy-dh-history-list article { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid #ebe9f0; border-radius: 17px; }
.xy-dh-history-cover { position: relative; display: grid; width: 62px; height: 76px; place-items: center; padding: 0; color: #755bd5; background: linear-gradient(145deg, #ebe6ff, #eaf6f1); border: 0; border-radius: 13px; }
.xy-dh-history-cover:disabled { opacity: 1; }
.xy-dh-history-cover > span { position: absolute; right: 5px; bottom: 5px; display: grid; width: 23px; height: 23px; place-items: center; color: #fff; background: rgba(91, 63, 190, .86); border-radius: 50%; }
.xy-dh-history-copy { min-width: 0; }
.xy-dh-history-copy > div { display: flex; align-items: center; gap: 5px; }
.xy-dh-history-copy strong { overflow: hidden; color: #3e3945; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh-history-copy em { padding: 2px 5px; color: #88828e; background: #f0eef3; border-radius: 5px; font-size: 13px; font-style: normal; }
.xy-dh-history-copy em.is-prototype { color: #775bd6; background: #eee9ff; }
.xy-dh-history-copy em.is-real { color: #438269; background: #eaf8f2; }
.xy-dh-history-copy p { margin: 5px 0 3px; color: #85808b; font-size: 13px; }
.xy-dh-history-copy small { color: #aaa5ae; font-size: 13px; }
.xy-dh-history-status { padding: 5px 7px; border: 0; border-radius: 8px; font-size: 13px; white-space: nowrap; }
.xy-dh-history-status.is-completed { color: #438269; background: #eaf8f2; }
.xy-dh-history-status.is-processing { color: #7759d5; background: #eee9ff; }
.xy-dh-history-status.is-failed { color: #a2534b; background: #fff0ed; }
.xy-dh-history-status:disabled { opacity: 1; }
.xy-dh-new { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 5px; margin-top: 13px; color: #674bc9; background: #f0ebff; border: 1px solid #d9cff8; border-radius: 14px; font-size: 13px; font-weight: 700; }
.xy-dh-empty { margin: 0; padding: 18px 12px; color: #9993a0; text-align: center; background: #fff; border: 1px dashed #ded9e5; border-radius: 14px; font-size: 13px; }
.xy-dh-preview-sheet { display: grid; gap: 12px; padding: 2px 0 calc(6px + env(safe-area-inset-bottom, 0px)); }
.xy-dh-preview-sheet > span { display: flex; min-height: 210px; align-items: center; justify-content: center; gap: 9px; color: #7258d0; background: #f4f1ff; border-radius: 16px; flex-direction: column; }

/* ── 数字人成片详情页 ──────────────────────────────────────────────────────── */
.xy-dh-detail { display: flex; flex-direction: column; gap: 14px; }

.xy-dh-detail-video {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  background: #13111e;
  border-radius: 18px;
  overflow: hidden;
}
.xy-dh-detail-video.is-landscape { min-height: 200px; }
.xy-dh-detail-video video { width: 100%; max-height: 420px; display: block; }
.xy-dh-detail-video > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #7e6dc8;
  padding: 28px;
  text-align: center;
}
.xy-dh-detail-video > span strong { color: #b8b0d8; font-size: 13px; }

.xy-dh-detail-info { padding: 2px 0; }
.xy-dh-detail-info h2 { margin: 0 0 5px; color: #1f1d28; font-size: 16px; font-weight: 700; }
.xy-dh-detail-info p { margin: 0; color: #9793a2; font-size: 13px; }

.xy-dh-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.xy-dh-detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: #674bc9;
  background: #f0ebff;
  border: 1px solid #ddd6f5;
}
.xy-dh-detail-btn.is-primary {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #6c5ce7);
  border-color: transparent;
}
.xy-dh-preview-sheet > span strong { font-size: 13px; }
.xy-dh-preview-sheet video { display: block; width: 100%; max-height: min(54vh, 460px); background: #17151d; border-radius: 16px; object-fit: contain; }
.xy-dh-preview-sheet a { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 6px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #795ee0, #5839bd); border-radius: 14px; font-size: 13px; font-weight: 700; }

@media (max-width: 360px) {
  .xy-dh-upload-grid,
  .xy-dh-mode-grid { gap: 7px; }
  .xy-dh-card { padding-inline: 13px; }
}

/* Digital-human ten-screen creator — purple/white Xiaoling visual system. */
.xy-dh-page.xy-dh2 {
  color: #252133;
  background: #fafafe;
}

.xy-dh2 button,
.xy-dh2 label { -webkit-tap-highlight-color: transparent; }
.xy-dh2 button { font-family: inherit; }

.xy-dh2-header {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  min-height: calc(58px + env(safe-area-inset-top, 0px));
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) 14px 0;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #f0eef7;
  backdrop-filter: blur(18px);
}

.xy-dh2-header h1 { margin: 0; font-size: 16px; font-weight: 700; text-align: center; }
.xy-dh2-header > button { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; color: #4a4656; background: transparent; border: 0; border-radius: 12px; }
.xy-dh2-header > button:last-child { justify-self: end; color: #6b50df; }
.xy-dh2-header > .xy-dh2-back {
  display: inline-flex !important;
  width: auto;
  min-width: 62px;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  visibility: visible !important;
  opacity: 1 !important;
  color: #403753;
  font-size: 13px;
  font-weight: 700;
}
.xy-dh2-scroll { position: absolute; inset: 0; background: #fafafe; }
.xy-dh2-scroll .mobile-scroll-content { padding: calc(72px + env(safe-area-inset-top, 0px)) 15px calc(28px + var(--mobile-safe-area-height, 0px)); }
.xy-dh2-scroll.has-bottom-nav .mobile-scroll-content { padding-bottom: calc(92px + var(--mobile-safe-area-height, 0px)); }

.xy-dh2-home,
.xy-dh2-flow,
.xy-dh2-library,
.xy-dh2-training,
.xy-dh2-compose,
.xy-dh2-progress,
.xy-dh2-works,
.xy-dh2-detail,
.xy-dh2-voices-mgmt,
.xy-dh2-publish,
.xy-dh2-avatars { display: grid; gap: 14px; }

/* 发布视频页 */
.xy-dh2-publish-preview { width: 100%; max-height: 240px; object-fit: contain; border-radius: 12px; background: #0a0a0a; }
.xy-dh2-publish-section h3 { font-size: 13px; font-weight: 600; color: #a29da8; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.xy-dh2-publish-device { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: #fff; border: 1.5px solid #ebe9f0; border-radius: 12px; font-size: 14px; color: #1a1a2e; cursor: pointer; }
.xy-dh2-publish-device.is-selected { border-color: #6d4be3; color: #6d4be3; font-weight: 600; }
.xy-dh2-publish-device.is-offline { opacity: .55; }
.xy-dh2-device-dot { width: 8px; height: 8px; border-radius: 50%; background: #c0bbca; flex-shrink: 0; }
.xy-dh2-device-dot.is-online { background: #22c55e; }
.xy-dh2-publish-device span:nth-child(2) { flex: 1; text-align: left; }
.xy-dh-message.is-success { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }

/* 人像/背景图预览 */
.xy-dh2-img-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 8px; }
.xy-dh2-img-preview img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 10px; background: #f0eef7; }
.xy-dh2-img-preview span { font-size: 13px; color: #a29da8; }

/* 音色管理列表 */
.xy-dh2-voice-list { display: grid; gap: 10px; }
.xy-dh2-voice-item { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.xy-dh2-voice-play { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; background: #f0eef7; border-radius: 50%; border: 0; color: #6d4be3; }
.xy-dh2-voice-info { flex: 1; min-width: 0; }
.xy-dh2-voice-info strong { display: block; font-size: 14px; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xy-dh2-voice-info small { font-size: 13px; color: #a29da8; }
.xy-dh2-voice-info em { display: block; margin-top: 3px; color: #817a88; font-size: 12px; font-style: normal; line-height: 1.35; white-space: normal; }
.xy-dh2-voice-item.is-cloning { background: #fbf9ff; border: 1px dashed #c8b9ee; box-shadow: none; }
.xy-dh2-voice-item.is-failed { background: #fff9f7; border: 1px solid #f2d7d0; box-shadow: none; }
.xy-dh2-voice-item.is-failed .xy-dh2-voice-play { color: #b85b51; background: #fff0ed; }
.xy-dh2-voice-status { display: inline-flex; width: fit-content; margin-top: 5px; padding: 3px 7px; color: #6a53bb; background: #f0ebff; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; }
.xy-dh2-voice-item.is-failed .xy-dh2-voice-status { color: #ad554b; background: #fcebe7; }
.xy-dh2-voice-select { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; background: #f0eef7; border-radius: 50%; border: 0; color: #a29da8; }
.xy-dh2-voice-select.is-active { background: #6d4be3; color: #fff; }
.xy-dh2-voice-delete { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 0; color: #c0bbca; }
.xy-dh2-voice-cloning { display: flex; align-items: center; gap: 10px; background: #faf9fd; border: 1px dashed #b9aae7; border-radius: 12px; padding: 12px 14px; color: #8070c0; font-size: 13px; }
.xy-dh2-voice-cloning span { width: 36px; height: 36px; display: grid; place-items: center; background: #eee9ff; border-radius: 50%; color: #6d4be3; flex-shrink: 0; }
.xy-dh2-voice-cloning strong { display: block; font-size: 14px; color: #1a1a2e; }
.xy-dh2-voice-cloning small { font-size: 13px; color: #a29da8; }

.xy-dh2-hero-card {
  position: relative;
  min-height: 184px;
  overflow: hidden;
  padding: 23px 43% 20px 18px;
  background: linear-gradient(135deg, #f1edff 0%, #f8f6ff 60%, #e9e5ff 100%);
  border: 1px solid #e7e0ff;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgb(94 67 183 / 8%);
}

.xy-dh2-hero-card > div { position: relative; z-index: 2; }
.xy-dh2-hero-card small { color: #6c53d7; font-size: 13px; font-weight: 700; letter-spacing: .8px; }
.xy-dh2-hero-card h2 { margin: 8px 0 6px; color: #261f3a; font-size: 21px; line-height: 1.2; }
.xy-dh2-hero-card p { margin: 0 0 18px; color: #716b7b; font-size: 13px; line-height: 1.5; }
.xy-dh2-hero-card button { display: inline-flex; min-height: 38px; align-items: center; gap: 5px; padding: 0 15px; color: #fff; background: linear-gradient(135deg, #7658ed, #5937d4); border: 0; border-radius: 11px; box-shadow: 0 8px 18px rgb(93 55 212 / 20%); font-size: 13px; font-weight: 700; }
.xy-dh2-hero-card > img { position: absolute; right: -3px; bottom: 0; width: 48%; height: 94%; object-fit: cover; object-position: center 15%; mask-image: linear-gradient(to left, #000 78%, transparent 100%); }

.xy-dh2-block { display: grid; gap: 10px; }
.xy-dh2-block-title { display: flex; align-items: center; justify-content: space-between; }
.xy-dh2-block-title h3 { margin: 0; font-size: 14px; }
.xy-dh2-block-title button { display: inline-flex; align-items: center; gap: 1px; padding: 5px 0; color: #928d9c; background: transparent; border: 0; font-size: 13px; }
.xy-dh2-block-title > span { padding: 3px 7px; color: #765ada; background: #f0ebff; border-radius: 999px; font-size: 13px; }
.xy-dh2-recent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xy-dh2-recent-grid > button { min-width: 0; padding: 0; text-align: left; background: transparent; border: 0; }
.xy-dh2-recent-grid > button > span { position: relative; display: block; height: 112px; overflow: hidden; background: #eeeaf9; border-radius: 14px; }
.xy-dh2-recent-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.xy-dh2-recent-grid i { position: absolute; top: 50%; left: 50%; display: grid; width: 34px; height: 34px; place-items: center; color: #6d4fd9; background: rgba(255,255,255,.9); border-radius: 50%; transform: translate(-50%,-50%); font-style: normal; box-shadow: 0 5px 15px rgb(40 30 65 / 16%); }
.xy-dh2-recent-grid strong,
.xy-dh2-recent-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh2-recent-grid strong { margin-top: 7px; font-size: 13px; }
.xy-dh2-recent-grid small { margin-top: 3px; color: #9994a1; font-size: 13px; }
.xy-dh2-recent-grid > .xy-dh-empty { grid-column: 1 / -1; }
.xy-dh2-recent-grid .is-real-work,
.xy-dh-history-cover.is-real-work { display: grid; place-items: center; color: #7459d8; background: linear-gradient(145deg,#f2effb,#e9f3ed); }
.xy-dh2-home-humans { display: grid; gap: 8px; }
.xy-dh2-home-humans > button { display: grid; min-height: 70px; grid-template-columns: 54px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 8px; text-align: left; background: #fff; border: 1px solid #eeebf3; border-radius: 14px; }
.xy-dh2-home-humans > button > img { width: 54px; height: 54px; border-radius: 11px; object-fit: cover; }
.xy-dh2-home-humans > button > span { display: grid; gap: 3px; min-width: 0; }
.xy-dh2-home-humans strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh2-home-humans small { overflow: hidden; color: #8f8997; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh2-home-humans > button.is-empty { grid-template-columns: 34px minmax(0,1fr); color: #6849d9; border-style: dashed; background: #faf9fd; }

.xy-dh2-template-tabs,
.xy-dh2-filter-tabs { display: flex; gap: 7px; }
.xy-dh2-template-tabs button,
.xy-dh2-filter-tabs button { min-height: 29px; padding: 0 12px; color: #918c99; background: #f4f3f7; border: 1px solid transparent; border-radius: 9px; font-size: 13px; }
.xy-dh2-template-tabs button.is-active,
.xy-dh2-filter-tabs button.is-active { color: #6547dc; background: #eee9ff; border-color: #d8ccff; font-weight: 700; }
.xy-dh2-template-card { position: relative; display: grid; min-height: 74px; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 11px; padding: 7px; text-align: left; background: #fff; border: 1px solid #efedf5; border-radius: 14px; box-shadow: 0 7px 20px rgb(48 38 77 / 5%); }
.xy-dh2-template-card img { width: 92px; height: 60px; object-fit: cover; object-position: center 22%; border-radius: 10px; }
.xy-dh2-template-card span { display: grid; gap: 2px; }
.xy-dh2-template-card strong { font-size: 13px; }
.xy-dh2-template-card small { color: #8f8997; font-size: 13px; }
.xy-dh2-template-card em { color: #aca6b1; font-size: 13px; font-style: normal; }
.xy-dh2-template-card > b { position: absolute; top: 7px; right: 7px; padding: 3px 5px; color: #fff; background: #ff735f; border-radius: 5px; font-size: 13px; }

.xy-dh2-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 4px; }
.xy-dh2-steps > span { position: relative; display: grid; justify-items: center; gap: 5px; color: #aaa6b0; font-size: 13px; }
.xy-dh2-steps > span:not(:last-child)::after { position: absolute; top: 11px; left: calc(50% + 16px); width: calc(100% - 32px); height: 1px; background: #e4e1e9; content: ""; }
.xy-dh2-steps b { position: relative; z-index: 1; display: grid; width: 23px; height: 23px; place-items: center; background: #efedf2; border-radius: 50%; font-size: 13px; }
.xy-dh2-steps .is-active { color: #6849e0; font-weight: 700; }
.xy-dh2-steps .is-active b { color: #fff; background: #6b4ce5; box-shadow: 0 4px 10px rgb(107 76 229 / 20%); }
.xy-dh2-flow-title { padding: 12px 0 4px; text-align: center; }
.xy-dh2-flow-title.is-left { text-align: left; }
.xy-dh2-flow-title h2 { margin: 0; font-size: 17px; }
.xy-dh2-flow-title p { margin: 6px 0 0; color: #918b99; font-size: 13px; }

.xy-dh2-source-card,
.xy-dh2-voice-source-card { position: relative; display: grid; min-height: 104px; grid-template-columns: 54px minmax(0,1fr) 22px; align-items: center; gap: 12px; padding: 15px; cursor: pointer; text-align: left; background: #fff; border: 1px solid #efedf4; border-radius: 18px; box-shadow: 0 9px 28px rgb(57 45 91 / 6%); }
.xy-dh2-source-card input { display: none; }
.xy-dh2-source-card > span,
.xy-dh2-voice-source-card > span { display: grid; width: 54px; height: 54px; place-items: center; color: #7052dc; background: #eeebff; border-radius: 17px; }
.xy-dh2-source-card.is-video > span { color: #bd4cdf; background: #faeaff; }
.xy-dh2-source-card.is-ready { border-color: #9c87ed; background: #faf8ff; }
.xy-dh2-source-card strong,
.xy-dh2-source-card small,
.xy-dh2-voice-source-card strong,
.xy-dh2-voice-source-card small { display: block; }
.xy-dh2-source-card strong,
.xy-dh2-voice-source-card strong { font-size: 13px; }
.xy-dh2-source-card small,
.xy-dh2-voice-source-card small { margin-top: 4px; overflow: hidden; color: #96909d; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh2-source-card > svg,
.xy-dh2-voice-source-card > svg { justify-self: end; color: #7457df; }
.xy-dh2-requirements { display: grid; gap: 8px; margin-top: 14px; }
.xy-dh2-requirements h3 { margin: 0 0 2px; color: #88828f; font-size: 13px; }
.xy-dh2-requirements p { display: flex; align-items: center; gap: 7px; margin: 0; color: #4e9c72; font-size: 13px; }
.xy-dh2-honest-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 10px 11px; color: #956b3b; background: #fff8ed; border-radius: 11px; font-size: 13px; line-height: 1.5; }

.xy-dh2-primary,
.xy-dh2-ghost { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; font-size: 13px; font-weight: 700; }
.xy-dh2-primary { color: #fff; background: linear-gradient(135deg,#714eff,#8d61ed); border: 0; box-shadow: 0 10px 23px rgb(102 69 222 / 22%); }
.xy-dh2-primary:disabled { opacity: .5; box-shadow: none; }
.xy-dh2-ghost { color: #7356d9; background: #f1edff; border: 1px solid #ded5fa; }

.xy-dh2-avatar-preview { position: relative; height: 302px; overflow: hidden; background: #e8e6e7; border-radius: 18px; }
.xy-dh2-avatar-preview > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.xy-dh2-avatar-preview > button { position: absolute; top: 50%; left: 50%; display: grid; width: 48px; height: 48px; place-items: center; color: #744fe0; background: rgba(255,255,255,.88); border: 0; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 8px 22px rgb(45 34 65 / 18%); }
.xy-dh2-avatar-preview > span { position: absolute; right: 10px; bottom: 10px; padding: 5px 8px; color: #5e48b9; background: rgba(255,255,255,.9); border-radius: 8px; font-size: 13px; font-weight: 700; }
.xy-dh2-avatar-meta { display: flex; align-items: center; justify-content: space-between; }
.xy-dh2-avatar-meta > span { display: flex; align-items: center; gap: 10px; }
.xy-dh2-avatar-meta small { color: #79727f; font-size: 13px; }
.xy-dh2-avatar-meta strong { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.xy-dh2-avatar-meta i { width: 7px; height: 7px; background: #53d796; border-radius: 50%; }
.xy-dh2-avatar-meta button { padding: 7px 10px; color: #5f4aae; background: #fff; border: 1px solid #ece9f2; border-radius: 9px; font-size: 13px; }
.xy-dh2-settings-card,
.xy-dh2-white-card { padding: 14px; background: #fff; border: 1px solid #efedf4; border-radius: 16px; box-shadow: 0 7px 22px rgb(56 44 88 / 5%); }
.xy-dh2-settings-card h3 { margin: 0 0 9px; font-size: 13px; }
.xy-dh2-segment { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.xy-dh2-segment button { min-height: 34px; color: #716b77; background: #f6f5f8; border: 1px solid transparent; border-radius: 9px; font-size: 13px; }
.xy-dh2-segment button.is-active { color: #6848df; background: #f0ebff; border-color: #8f76ed; font-weight: 700; }
.xy-dh2-settings-card label { display: grid; gap: 7px; margin-top: 13px; }
.xy-dh2-settings-card label > span { display: flex; align-items: center; justify-content: space-between; color: #5a5460; font-size: 13px; }
.xy-dh2-settings-card label b { color: #6c50d8; }
.xy-dh2-settings-card label > small { color: #928b98; font-size: 12px; line-height: 1.35; }
.xy-dh2-settings-card input { width: 100%; accent-color: #7657e6; }
.xy-dh-parameter-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 5px 0 2px; }
.xy-dh-parameter-presets button { display: grid; min-width: 0; gap: 3px; padding: 9px 6px; color: #67606d; text-align: center; background: #f7f6f9; border: 1px solid #ece9f1; border-radius: 10px; }
.xy-dh-parameter-presets button strong { font-size: 13px; }
.xy-dh-parameter-presets button small { overflow: hidden; color: #98919f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh-parameter-presets button.is-active { color: #6245d1; background: #f0ebff; border-color: #9c86e9; box-shadow: 0 0 0 1px rgb(108 76 220 / 8%); }
.xy-dh-parameter-presets button.is-active small { color: #725ebc; }

.xy-dh2-voice-source-card { width: 100%; border-color: #d8c8ff; background: linear-gradient(135deg,#fbf8ff,#f1ebff); }
.xy-dh2-voice-source-card.is-blue { border-color: #c9dfff; background: linear-gradient(135deg,#fbfdff,#eef6ff); }
.xy-dh2-voice-source-card.is-blue > span { color: #4e93e1; background: #e6f2ff; }
.xy-dh2-voice-preview-card { display: grid; gap: 8px; margin-top: 18px; }
.xy-dh2-voice-preview-card h3 { margin: 0; font-size: 13px; }
.xy-dh2-voice-preview-card > button { display: grid; min-height: 64px; grid-template-columns: 36px minmax(0,1fr) 20px; align-items: center; gap: 9px; padding: 10px; text-align: left; background: #fff; border: 1px solid #efedf4; border-radius: 14px; }
.xy-dh2-voice-preview-card > button > span { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: #6b4de2; border-radius: 50%; }
.xy-dh2-voice-preview-card strong,
.xy-dh2-voice-preview-card small { display: block; }
.xy-dh2-voice-preview-card strong { font-size: 13px; }
.xy-dh2-voice-preview-card small { margin-top: 2px; color: #98929e; font-size: 13px; }
.xy-dh2-voice-preview-card > button > svg { color: #6448db; }
.xy-dh2-voice-preview-card audio { width: 100%; height: 34px; }

.xy-dh2-library { gap: 12px; }
.xy-dh2-filter-tabs { position: sticky; z-index: 2; top: 0; padding: 4px 0 8px; background: #fafafe; }
.xy-dh2-filter-tabs button { flex: 1; }
.xy-dh2-voice-groups { display: grid; gap: 8px; }
.xy-dh2-voice-groups > button { display: grid; min-height: 70px; grid-template-columns: 38px minmax(0,1fr) 22px; align-items: center; gap: 10px; padding: 10px 11px; text-align: left; background: #fff; border: 1px solid #efedf4; border-radius: 14px; }
.xy-dh2-voice-groups > button.is-active { border-color: #8a70e9; background: #faf8ff; }
.xy-dh2-voice-groups > button > span { display: grid; width: 36px; height: 36px; place-items: center; color: #7154e0; background: #ece8ff; border-radius: 50%; }
.xy-dh2-voice-groups > button > span.is-pink { color: #c24cd3; background: #fae9ff; }
.xy-dh2-voice-groups > button > span.is-blue { color: #4f9dde; background: #e8f5ff; }
.xy-dh2-voice-groups strong,
.xy-dh2-voice-groups small { display: block; }
.xy-dh2-voice-groups strong { font-size: 13px; }
.xy-dh2-voice-groups small { margin-top: 4px; color: #948e9a; font-size: 13px; }
.xy-dh2-voice-groups > button > svg { justify-self: end; color: #6d50da; }

.xy-dh2-training .xy-dh-field:first-child { margin-top: 0; }
.xy-dh2 .xy-dh-field > span { margin-bottom: 8px; color: #4f4955; font-size: 13px; }
.xy-dh2 .xy-dh-field input,
.xy-dh2 .xy-dh-field textarea { background: #f8f7fb; border-color: #e8e4ed; border-radius: 12px; }
.xy-dh2 .xy-dh-field > small { font-size: 13px; }

.xy-dh2-selected-avatar,
.xy-dh2-selected-voice { display: grid; width: 100%; align-items: center; text-align: left; background: #fff; border: 1px solid #efedf4; border-radius: 14px; }
.xy-dh2-selected-avatar { min-height: 64px; grid-template-columns: 46px minmax(0,1fr) 20px; gap: 10px; padding: 8px; }
.xy-dh2-selected-avatar img { width: 46px; height: 46px; object-fit: cover; object-position: center top; border-radius: 11px; }
.xy-dh2-selected-avatar strong,
.xy-dh2-selected-avatar small,
.xy-dh2-selected-voice strong,
.xy-dh2-selected-voice small { display: block; }
.xy-dh2-selected-avatar strong,
.xy-dh2-selected-voice strong { font-size: 13px; }
.xy-dh2-selected-avatar small,
.xy-dh2-selected-voice small { margin-top: 3px; color: #958f9b; font-size: 13px; }
.xy-dh2-selected-avatar > svg,
.xy-dh2-selected-voice > svg { color: #9a94a0; }
.xy-dh2-script { margin-top: 0; }
.xy-dh2-selected-voice { min-height: 58px; grid-template-columns: 36px minmax(0,1fr) 20px; gap: 9px; padding: 10px; }
.xy-dh2-selected-voice > span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: #704fe5; border-radius: 50%; }
.xy-dh2-selected-voice.is-locked { cursor: default; background: #f7fbf5; border-color: #dce8d8; }
.xy-dh2-selected-voice.is-locked > span { background: #68a65e; }
.xy-dh2-selected-voice.is-locked > svg { color: #5a9a51; }
.xy-dh-background-upload { border-color: #cdddc8; background: #f8fcf7; }
/* 数字人整体最小字体 13px */
.xy-dh-page.xy-dh2 { font-size: 14px; }
.xy-dh-page.xy-dh2 small { font-size: 13px; }
.xy-dh-page.xy-dh2 em { font-size: 13px; }

.xy-dh-advanced { padding: 14px; background: #fff; border: 1px solid #ece9f1; border-radius: 14px; }
.xy-dh-advanced summary { display: flex; align-items: center; gap: 6px; color: #4a4450; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.xy-dh-advanced summary::-webkit-details-marker { display: none; }
.xy-dh-advanced > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.xy-dh-advanced > div > span { display: flex; justify-content: space-between; gap: 5px; padding: 7px; color: #89828e; background: #f8f7fa; border-radius: 8px; font-size: 14px; }
.xy-dh-advanced > div.is-form { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.xy-dh-advanced > div.is-form .xy-dh-field { padding: 0; border: 0; background: transparent; }
.xy-dh-advanced b { color: #5a4d80; }
.xy-dh-advanced > small { display: block; margin-top: 8px; color: #96909b; font-size: 14px; line-height: 1.45; }
/* 滑块 label */
.xy-dh-advanced > div.is-form > label:not(.xy-dh-field) { display: grid; gap: 8px; }
.xy-dh-advanced > div.is-form > label:not(.xy-dh-field) > span { display: flex; justify-content: space-between; font-size: 14px; color: #4f4955; font-weight: 500; }
.xy-dh-advanced > div.is-form > label:not(.xy-dh-field) > span b { color: #6d4be3; font-weight: 700; }
.xy-dh-advanced > div.is-form > label:not(.xy-dh-field) > small { color: #948e9a; font-size: 12px; line-height: 1.35; }
.xy-dh-advanced > div.is-form > label:not(.xy-dh-field) > input[type="range"] { width: 100%; height: 4px; accent-color: #6d4be3; cursor: pointer; }
.xy-dh-saved-parameter-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.xy-dh-saved-parameter-summary > small { grid-column: 1 / -1; color: #918a97; line-height: 1.4; }
.xy-dh-saved-parameter-summary > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px; color: #665f6c; background: #f8f7fa; border-radius: 9px; font-size: 12px; }
.xy-dh-saved-parameter-summary > span b { color: #81798a; }
.xy-dh-refresh-note { margin: 0; padding: 8px 10px; color: #6f6680; text-align: center; background: #f7f4fb; border-radius: 9px; font-size: 12px; }
.xy-dh2-mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xy-dh2-mode-row button { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 5px; color: #827b89; background: #f4f3f7; border: 1px solid transparent; border-radius: 10px; font-size: 13px; }
.xy-dh2-mode-row button.is-active { color: #6648dc; background: #eee9ff; border-color: #d4c9fa; font-weight: 700; }
.xy-dh2-backgrounds { display: grid; gap: 8px; }
.xy-dh2-backgrounds > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.xy-dh2-backgrounds h3 { margin: 0; font-size: 13px; }
.xy-dh2-backgrounds > div:first-child span { display: flex; align-items: center; color: #97919e; font-size: 13px; }
.xy-dh2-background-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.xy-dh2-background-grid button { min-width: 0; padding: 3px; background: #fff; border: 1px solid transparent; border-radius: 10px; }
.xy-dh2-background-grid button.is-active { border-color: #795ce2; background: #f0ebff; }
.xy-dh2-background-grid img { display: block; width: 100%; height: 55px; object-fit: cover; border-radius: 7px; }
.xy-dh2-background-grid small { display: block; margin-top: 4px; overflow: hidden; color: #716b78; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh2-ratios { display: grid; grid-template-columns: minmax(0,1fr) 66px 66px; align-items: center; gap: 7px; }
.xy-dh2-ratios span { font-size: 13px; font-weight: 700; }
.xy-dh2-ratios button { min-height: 36px; color: #8d8793; background: #f5f4f7; border: 1px solid transparent; border-radius: 10px; font-size: 13px; }
.xy-dh2-ratios button.is-active { color: #6848df; background: #eee9ff; border-color: #8f76ed; font-weight: 700; }
.xy-dh2-service { display: grid; gap: 2px; padding: 9px 11px; color: #785dd4; background: #f1edff; border-radius: 10px; }
.xy-dh2-service.is-ready { color: #39765d; background: #ecf8f3; }
.xy-dh2-service.is-unavailable { color: #9a5149; background: #fff1ef; }
.xy-dh2-service span { font-size: 13px; font-weight: 700; }
.xy-dh2-service small { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.xy-dh2-progress { justify-items: center; padding-top: 54px; text-align: center; }
.xy-dh2-progress-ring { display: grid; width: 132px; height: 132px; place-items: center; border-radius: 50%; }
.xy-dh2-progress-ring > span { display: grid; width: 108px; height: 108px; place-items: center; background: #fafafe; border-radius: 50%; }
.xy-dh2-progress-ring strong { color: #2f2691; font-size: 30px; }
.xy-dh2-progress h2 { margin: 4px 0 0; font-size: 15px; }
.xy-dh2-progress > p { margin: -7px 0 6px; color: #96909d; font-size: 13px; }
.xy-dh2-task-estimates { display: grid; width: 100%; grid-template-columns: repeat(auto-fit,minmax(92px,1fr)); gap: 7px; margin: 0 0 9px; }
.xy-dh2-task-estimates span { display: grid; min-width: 0; gap: 3px; padding: 9px 6px; background: linear-gradient(145deg,#f4f0ff,#f8f7fc); border: 1px solid #e8e1fb; border-radius: 12px; }
.xy-dh2-task-estimates small { color: #938c9d; font-size: 13px; }
.xy-dh2-task-estimates strong { overflow: hidden; color: #5f43c9; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dh2-progress-list { width: 100%; padding: 8px 13px; background: #fff; border: 1px solid #efedf4; border-radius: 16px; }
.xy-dh2-progress-list p { display: grid; min-height: 43px; grid-template-columns: 22px minmax(0,1fr) 18px; align-items: center; gap: 8px; margin: 0; color: #aaa4ae; border-bottom: 1px solid #f2f0f5; text-align: left; font-size: 13px; }
.xy-dh2-progress-list p:last-child { border-bottom: 0; }
.xy-dh2-progress-list p.is-done { color: #423c49; }
.xy-dh2-progress-list p.is-done svg { color: #6b4de0; }
.xy-dh2-progress-list p.is-active { color: #684bd4; font-weight: 700; }
.xy-dh2-progress-list p svg:last-child { justify-self: end; }

.xy-dh2-works .xy-dh-history-list { gap: 10px; }
.xy-dh2 .xy-dh-history-list article { min-height: 84px; grid-template-columns: 86px minmax(0,1fr) auto; padding: 8px; border-radius: 14px; }
.xy-dh2 .xy-dh-history-list article.is-clickable { cursor: pointer; }
.xy-dh2 .xy-dh-history-list article.is-clickable:active { opacity: 0.8; }
.xy-dh2 .xy-dh-history-cover { width: 86px; height: 66px; overflow: hidden; background: #ebe8f5; border-radius: 10px; }
.xy-dh2 .xy-dh-history-cover > img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.xy-dh2 .xy-dh-history-copy strong { font-size: 13px; }
.xy-dh2 .xy-dh-history-copy p { font-size: 13px; }
.xy-dh2 .xy-dh-history-copy small { font-size: 13px; }
.xy-dh2 .xy-dh-history-estimates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.xy-dh2 .xy-dh-history-estimates span { padding: 3px 6px; color: #684bd1; background: #f0ebff; border-radius: 7px; font-size: 13px; line-height: 1.25; white-space: nowrap; }
.xy-dh2 .xy-dh-history-list article > svg { color: #aaa4b0; }

.xy-dh2-detail { gap: 12px; }
.xy-dh2-detail .xy-dh-detail-video { min-height: 390px; border-radius: 14px; }
.xy-dh2-detail .xy-dh-detail-video.is-landscape { min-height: 220px; }
.xy-dh2-detail .xy-dh-detail-video > img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: center 15%; }
.xy-dh2-detail .xy-dh-detail-info h2 { font-size: 16px; }
.xy-dh2-detail .xy-dh-detail-info p { font-size: 13px; }
.xy-dh2-detail-tools { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.xy-dh2-detail-tools button { display: grid; min-height: 58px; place-items: center; align-content: center; gap: 5px; color: #79727e; background: transparent; border: 0; font-size: 13px; }
.xy-dh2-detail-tools svg { color: #6f6875; }

.xy-dh2-avatar-list { display: grid; gap: 10px; }
.xy-dh2-avatar-list > article { overflow: hidden; background: #fff; border: 1px solid #efedf4; border-radius: 16px; }
.xy-dh2-avatar-list > article.is-selected { border-color: #8c73dc; box-shadow: 0 0 0 1px rgb(108 76 220 / 10%); }
.xy-dh2-avatar-list > article > button { position: relative; display: grid; width: 100%; min-height: 112px; grid-template-columns: 86px minmax(0,1fr); align-items: center; gap: 12px; padding: 9px; text-align: left; background: #fff; border: 0; }
.xy-dh2-avatar-list img { width: 86px; height: 94px; object-fit: cover; object-position: center 12%; border-radius: 12px; }
.xy-dh2-avatar-list span { display: grid; gap: 3px; }
.xy-dh2-avatar-list strong { font-size: 13px; }
.xy-dh2-avatar-list small { color: #5e5763; font-size: 13px; }
.xy-dh2-avatar-list em,
.xy-dh2-avatar-list i { color: #938d98; font-size: 13px; font-style: normal; }
.xy-dh2-avatar-list > article > button > b { position: absolute; top: 10px; right: 10px; padding: 3px 6px; color: #4e9a74; background: #eaf8f1; border-radius: 999px; font-size: 13px; }
.xy-dh2-avatar-list > article > div { display: flex; justify-content: flex-end; gap: 6px; padding: 7px 9px; border-top: 1px solid #f0edf4; }
.xy-dh2-avatar-list > article > div > button { display: flex; min-height: 28px; align-items: center; gap: 4px; padding: 0 9px; color: #665488; background: #f7f4fb; border: 0; border-radius: 8px; font-size: 13px; }
.xy-dh2-avatar-list > article > div > button.is-danger { color: #ad554b; background: #fdf5f3; }
.xy-dh2-task-parameters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.xy-dh2-task-parameters span { display: grid; gap: 3px; padding: 10px; background: #fff; border: 1px solid #eeebf3; border-radius: 11px; }
.xy-dh2-task-parameters small { color: #98929e; font-size: 13px; }
.xy-dh2-task-parameters strong { color: #4e4755; font-size: 13px; }

.xy-dh2-bottom-nav {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: calc(62px + var(--mobile-safe-area-height, 0px));
  grid-template-columns: repeat(3,1fr);
  align-items: start;
  padding: 7px 5px var(--mobile-safe-area-height, 0px);
  background: rgba(255,255,255,.97);
  border-top: 1px solid #efedf4;
  box-shadow: 0 -8px 24px rgb(50 40 73 / 5%);
  backdrop-filter: blur(18px);
}
.xy-dh2-bottom-nav button { position: relative; display: grid; min-height: 48px; place-items: center; align-content: center; gap: 3px; color: #a29da8; background: transparent; border: 0; font-size: 13px; }
.xy-dh2-bottom-nav button.is-active { color: #6d4be3; font-weight: 700; }
.xy-dh2-bottom-nav button.is-active::after { position: absolute; right: 17px; bottom: 0; left: 17px; height: 2px; background: #6e4ce4; border-radius: 999px; content: ""; }

@media (max-width: 360px) {
  .xy-dh2-scroll .mobile-scroll-content { padding-inline: 12px; }
  .xy-dh2-hero-card { min-height: 170px; padding-left: 15px; }
  .xy-dh2-hero-card h2 { font-size: 18px; }
  .xy-dh2-avatar-preview { height: 270px; }
  .xy-dh2-source-card,
  .xy-dh2-voice-source-card { padding: 12px; }
}

.digital-human-workspace-header {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  min-height: calc(62px + env(safe-area-inset-top, 0px));
  grid-template-columns: 44px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 6px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: rgba(250, 250, 253, 0.97);
  border-bottom: 1px solid rgba(230, 230, 239, 0.7);
  backdrop-filter: blur(16px);
}
.digital-human-workspace-header h1 { margin: 0; color: #1f1d28; font-size: 16px; line-height: 1.25; }
.digital-human-workspace-header p { margin: 2px 0 0; color: #9793a2; font-size: 13px; }
.digital-human-workspace-header > button:first-child,
.digital-human-back {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: #f3f1f8;
  color: #3a3645;
}
.digital-human-workspace-header > button:last-child {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 3px;
  border: 0;
  background: none;
  color: #735ad9;
  font-size: 13px;
  font-weight: 700;
}
.digital-human-video-lead {
  position: relative;
  display: grid;
  min-height: 140px;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 8px;
  padding: 18px 15px 18px 17px;
  overflow: hidden;
  border: 1px solid #e4ebe1;
  border-radius: 22px;
  background: linear-gradient(132deg, #eff8eb 0%, #f7fbf4 56%, #e5f2df 100%);
  box-shadow: 0 8px 24px rgb(58 88 53 / 6%);
}
.digital-human-video-lead em { color: #4e8f46; font-size: 13px; font-style: normal; font-weight: 740; }
.digital-human-video-lead h2 { margin: 4px 0 5px; color: #1e2b1d; font-size: 19px; letter-spacing: -.4px; line-height: 1.25; }
.digital-human-video-lead p { margin: 0; max-width: 200px; color: #637061; font-size: 13px; line-height: 1.5; }
.digital-human-video-lead > img { position: absolute; right: -4px; bottom: -8px; width: 128px; height: 144px; border-radius: 50% 0 0; object-fit: cover; object-position: center 20%; filter: drop-shadow(0 8px 10px rgb(58 88 53 / 14%)); }

.digital-human-studio-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid #e4ebe1;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 20px rgb(58 88 53 / 5%);
}
.digital-human-studio-nav > button {
  display: grid;
  min-height: 56px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 7px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #7e877b;
  text-align: left;
}
.digital-human-studio-nav > button.is-selected { background: linear-gradient(145deg,#eff8eb,#f8fcf6); color: #4e8f46; box-shadow: inset 0 0 0 1px rgb(90 151 80 / 12%); }
.digital-human-studio-nav > button > svg { width: 20px; height: 20px; }
.digital-human-studio-nav > button > span { display: grid; min-width: 0; gap: 1px; }
.digital-human-studio-nav strong { display: block; overflow: hidden; color: #343b33; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.digital-human-studio-nav .is-selected strong { color: #2b5228; }
.digital-human-studio-nav small { display: block; overflow: hidden; color: #8e9489; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.digital-human-video-section {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid #e5ece2;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 25px rgb(58 88 53 / 6%);
}
.digital-human-section-title { display: flex; align-items: center; gap: 10px; }
.digital-human-section-title > span { flex-shrink: 0; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: linear-gradient(145deg,#7eb374,#4e8d45); color: #fff; font-size: 13px; font-weight: 800; }
.digital-human-section-title h2 { margin: 0 0 2px; color: #1e2b1d; font-size: 14px; }
.digital-human-section-title p { margin: 0; color: #7b8479; font-size: 13px; }
.digital-human-video-upload-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.digital-human-video-upload {
  position: relative;
  display: grid;
  min-height: 128px;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 12px 9px;
  overflow: hidden;
  border: 1px dashed #bfd5b8;
  border-radius: 17px;
  background: linear-gradient(145deg,#fbfef9,#f3f9f0);
  cursor: pointer;
  text-align: center;
}
.digital-human-video-upload > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #eaf5e6; color: #57994e; }
.digital-human-video-upload > img { width: 56px; height: 56px; border: 2px solid #fff; border-radius: 14px; object-fit: cover; box-shadow: 0 5px 14px rgb(55 83 50 / 13%); }
.digital-human-video-upload strong { overflow: hidden; max-width: 100%; color: #2b322a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.digital-human-video-upload small { overflow: hidden; max-width: 100%; color: #7c857a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.digital-human-video-upload > em { display: flex; align-items: center; gap: 3px; color: #4e8a47; font-size: 13px; font-style: normal; font-weight: 720; }
.digital-human-video-upload > button { position: absolute; top: 6px; right: 6px; display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 50%; background: rgba(39,53,37,.6); color: #fff; }
.digital-human-video-upload.has-file { border-style: solid; border-color: #7eb475; background: #f5fbf2; }
.digital-human-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.digital-human-server-note,.digital-human-video-submit > p { display: flex; align-items: flex-start; gap: 5px; color: #71806e; font-size: 13px; line-height: 1.5; }
.digital-human-server-note svg,.digital-human-video-submit > p svg { flex: 0 0 auto; width: 12px; height: 12px; color: #5d9654; }

.digital-human-video-mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.digital-human-video-mode-grid > button { position: relative; display: grid; min-height: 108px; justify-items: start; align-content: center; gap: 5px; padding: 12px; border: 1px solid #e1e8de; border-radius: 16px; background: #fbfcfa; text-align: left; }
.digital-human-video-mode-grid > button.is-selected { border-color: #6ca762; background: linear-gradient(145deg,#fbfef9,#eef8eb); box-shadow: 0 0 0 1px rgb(92 153 82 / 12%); }
.digital-human-video-mode-grid > button > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #e9f4e5; color: #57974e; }
.digital-human-video-mode-grid > button:nth-child(2) > span { background: #eef0fb; color: #716bc0; }
.digital-human-video-mode-grid strong { font-size: 13px; }
.digital-human-video-mode-grid small { color: #7a8278; font-size: 13px; }
.digital-human-video-mode-grid > button > svg:last-child { position: absolute; right: 8px; bottom: 8px; width: 15px; height: 15px; color: #57964e; }
.digital-human-subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.digital-human-subsection-heading > strong { color: #2f362e; font-size: 13px; }
.digital-human-subsection-heading > small { color: #7e877b; font-size: 13px; }
.digital-human-mode-detail { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid #edf1ea; }
.digital-human-selected-voice { display: grid; min-height: 60px; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #dce8d8; border-radius: 14px; background: #f7fbf5; text-align: left; }
.digital-human-selected-voice > span:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #e7f3e3; color: #55974d; }
.digital-human-selected-voice.tone-blue > span:first-child { background: #eaf3fb; color: #4e94d1; }
.digital-human-selected-voice.tone-orange > span:first-child { background: #fff1e7; color: #e68440; }
.digital-human-selected-voice.tone-purple > span:first-child { background: #f1ecfb; color: #8566ca; }
.digital-human-selected-voice > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.digital-human-selected-voice > span:nth-child(2) strong { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.digital-human-selected-voice > span:nth-child(2) em { padding: 2px 5px; border-radius: 999px; background: #ece7f8; color: #785db5; font-size: 13px; font-style: normal; }
.digital-human-selected-voice > span:nth-child(2) small { overflow: hidden; color: #7b8478; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.digital-human-selected-voice > span:last-child { display: flex; align-items: center; gap: 2px; color: #4f8c47; font-size: 13px; font-weight: 720; white-space: nowrap; }
.digital-human-aspect-row { display: flex; align-items: center; gap: 7px; }
.digital-human-aspect-row > span { flex: 0 0 auto; color: #687166; font-size: 13px; }
.digital-human-aspect-row > button { display: flex; min-height: 36px; align-items: center; gap: 4px; padding: 0 12px; border: 1px solid #dfe7dc; border-radius: 11px; background: #f9fbf8; font-size: 13px; font-weight: 720; }
.digital-human-aspect-row > button.is-selected { border-color: #6ba562; background: #eff8ec; color: #4a8742; }
.digital-human-aspect-row > button small { color: #848b82; font-size: 13px; font-weight: 500; }
.digital-human-video-output > label { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; }
.digital-human-video-submit { display: grid; gap: 8px; padding: 4px 0 2px; }
.digital-human-video-submit > p { justify-content: center; padding-inline: 8px; text-align: center; }
.digital-human-primary-button { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 16px; background: linear-gradient(135deg,#6fb163,#449040); color: #fff; font-size: 13px; font-weight: 780; box-shadow: 0 8px 20px rgb(58 128 51 / 18%); }
.digital-human-primary-button:disabled { opacity: .55; }
.digital-human-primary-button svg { width: 18px; height: 18px; }
.xy-dh-message { display: flex; align-items: flex-start; gap: 5px; padding: 10px 13px; border: 1px solid #f0cece; border-radius: 12px; background: #fdf5f5; color: #9a4040; font-size: 13px; line-height: 1.5; }
.xy-dh-message svg { flex-shrink: 0; color: #c95656; }

/* 音色中心 */
.digital-human-voice-hero { position: relative; display: grid; min-height: 120px; grid-template-columns: 50px minmax(0,1fr) 56px; align-items: center; gap: 11px; padding: 15px; overflow: hidden; border: 1px solid #dfead9; border-radius: 22px; background: linear-gradient(135deg,#eff8eb,#fbfdf9); box-shadow: 0 8px 24px rgb(58 88 53 / 6%); }
.digital-human-voice-hero > span:first-child { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#6fb263,#44863d); color: #fff; box-shadow: 0 6px 16px rgb(65 133 57 / 20%); }
.digital-human-voice-hero > span:first-child svg { width: 25px; height: 25px; }
.digital-human-voice-hero em { color: #548f4b; font-size: 13px; font-style: normal; font-weight: 740; }
.digital-human-voice-hero h2 { margin: 3px 0 4px; font-size: 16px; }
.digital-human-voice-hero p { margin: 0; color: #687366; font-size: 13px; line-height: 1.45; }
.digital-human-voice-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 12px 8px; border: 1px solid #e0e9dd; border-radius: 18px; background: linear-gradient(145deg,#eef7eb,#fff); box-shadow: 0 8px 25px rgb(58 88 53 / 6%); }
.digital-human-voice-summary > span { position: relative; display: grid; gap: 3px; text-align: center; }
.digital-human-voice-summary > span + span::before { position: absolute; top: 3px; bottom: 3px; left: 0; width: 1px; background: #dfe8dc; content: ""; }
.digital-human-voice-summary strong { color: #407e39; font-size: 16px; }
.digital-human-voice-summary small { color: #768073; font-size: 13px; }
.digital-human-voice-library { display: grid; gap: 10px; padding: 13px; border: 1px solid #e4ebe1; border-radius: 20px; background: #fff; box-shadow: 0 8px 25px rgb(58 88 53 / 6%); }
.digital-human-voice-library > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.digital-human-voice-library > header > span { display: grid; gap: 2px; }
.digital-human-voice-library > header strong { font-size: 13px; }
.digital-human-voice-library > header small { color: #7d867a; font-size: 13px; }
.digital-human-voice-library > header > button { display: flex; min-height: 30px; align-items: center; gap: 4px; padding: 0 9px; border: 1px solid #d8e7d3; border-radius: 999px; background: #f2f8ef; color: #4d8845; font-size: 13px; font-weight: 720; }
.digital-human-voice-library > div { display: grid; gap: 7px; }
.digital-human-voice-library article { position: relative; display: grid; min-height: 78px; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid #e4eae1; border-radius: 15px; background: #fbfcfa; }
.digital-human-voice-library article.is-default { border-color: #85b77d; background: linear-gradient(145deg,#f4faf1,#fff); }
.digital-human-voice-library article > button:first-child { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 13px; background: #e9f4e5; color: #57994e; }
.digital-human-voice-library article.tone-blue > button:first-child { background: #eaf3fb; color: #4e94d1; }
.digital-human-voice-library article.tone-orange > button:first-child { background: #fff1e7; color: #e68440; }
.digital-human-voice-library article.tone-purple > button:first-child { background: #f1ecfb; color: #8566ca; }
.digital-human-voice-library article > button:first-child svg { width: 18px; height: 18px; }
.digital-human-voice-library article > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.digital-human-voice-library article > span:nth-child(2) strong { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.digital-human-voice-library article > span:nth-child(2) strong em { padding: 2px 5px; border-radius: 999px; background: #e6f2e2; color: #4e8c46; font-size: 13px; font-style: normal; }
.digital-human-voice-library article > span:nth-child(2) small { overflow: hidden; color: #7b8479; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.digital-human-voice-origin { align-self: start; padding: 3px 6px; border-radius: 999px; background: #eff2ed; color: #7c837a; font-size: 13px; }
.digital-human-voice-library article > div { display: flex; grid-column: 2/4; flex-wrap: wrap; gap: 4px; }
.digital-human-voice-library article > div > button { display: flex; min-height: 24px; align-items: center; gap: 3px; padding: 0 7px; border: 1px solid #dde7da; border-radius: 7px; background: #f5faf3; color: #52894b; font-size: 13px; }
.digital-human-voice-library article > div > button.is-danger { border-color: #eadbd7; background: #fdf7f5; color: #b86654; }

/* 音色训练表单 */
.digital-human-training-form { gap: 10px; }
.digital-human-training-upload { position: relative; display: grid; min-height: 108px; place-items: center; align-content: center; gap: 5px; padding: 14px; border: 1px dashed #b9d2b2; border-radius: 16px; background: #f8fcf6; cursor: pointer; text-align: center; }
.digital-human-training-upload > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #e8f4e4; color: #57994e; }
.digital-human-training-upload strong { overflow: hidden; max-width: 90%; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.digital-human-training-upload small { color: #7a8378; font-size: 13px; }
.digital-human-training-upload > svg { position: absolute; top: 9px; right: 9px; color: #58984f; }
.digital-human-training-upload.has-file { border-style: solid; border-color: #7eb475; background: #f5fbf2; }
.digital-human-training-script { padding: 10px 11px; border: 1px solid #e4eae1; border-radius: 13px; background: #fbfcfa; }
.digital-human-training-script span { color: #4d8945; font-size: 13px; font-weight: 740; }
.digital-human-training-script p { margin: 4px 0 0; color: #687166; font-size: 13px; line-height: 1.6; }
.digital-human-consent { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid #e4eae1; border-radius: 13px; background: #fbfcfa; cursor: pointer; text-align: left; }
.digital-human-consent > span { display: grid; flex-shrink: 0; width: 18px; height: 18px; place-items: center; border: 1.5px solid #b9d4b4; border-radius: 6px; background: #fff; }
.digital-human-consent.is-checked > span { border-color: #4e8d45; background: #4e8d45; color: #fff; }
.digital-human-consent small { color: #5f6b5d; font-size: 13px; line-height: 1.55; }
.digital-human-voice-rename-sheet { display: grid; gap: 12px; }
.digital-human-voice-rename-sheet input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #dfe7dc; border-radius: 12px; outline: 0; background: #f9fbf8; font: inherit; }

/* ─── 2026-08 小点管家首页与七项主导航 ─────────────────────────────── */

.xy-dashboard-scroll {
  padding: 17px 15px 84px;
}

.h5-mode .xy-dashboard-scroll,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-dashboard-scroll {
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

.xy-dashboard-scroll .xy-brand-header {
  display: grid;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  margin: 0 0 17px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
}

.xy-header-menu {
  display: grid;
  width: 32px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: #343641;
  background: transparent;
  border: 0;
}

.xy-dashboard-scroll .xy-brand-lockup {
  gap: 11px;
}

.xy-dashboard-scroll .xy-brand-mark {
  width: 51px;
  height: 51px;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 7px 20px rgba(98, 77, 224, 0.17);
}

.xy-dashboard-scroll .xy-brand-mark img {
  width: 51px;
  height: 51px;
  clip-path: circle(43.5% at 50% 50%);
  transform: scale(1.15);
}

.xy-dashboard-scroll .xy-brand-lockup strong {
  color: #11131b;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.4px;
}

.xy-dashboard-scroll .xy-brand-lockup small {
  margin-top: 3px;
  color: #797c8c;
  font-size: 12px;
}

.xy-dashboard-scroll .xy-header-actions {
  gap: 9px;
}

.xy-dashboard-scroll .xy-icon-button,
.xy-dashboard-scroll .xy-profile-button {
  width: 44px;
  height: 44px;
}

.xy-dashboard-scroll .xy-icon-button {
  color: #353845;
  background: rgba(255, 255, 255, .94);
  border: 0;
  border-radius: 13px;
  box-shadow: 0 9px 24px rgba(73, 69, 108, .07);
}

.xy-dashboard-scroll .xy-profile-button {
  position: relative;
  padding: 2px;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.xy-dashboard-scroll .xy-profile-button img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
}

.xy-dashboard-scroll .xy-profile-button .xy-notice-dot {
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  background: #f43fe2;
}

.xy-dashboard-home {
  display: grid;
  gap: 11px;
}

.xy-live-strip {
  display: grid;
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  color: #333544;
  text-align: left;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(235, 233, 248, .9);
  border-radius: 17px;
  box-shadow: 0 9px 26px rgba(91, 70, 184, .07);
  grid-template-columns: auto 1px minmax(0, auto) 1px minmax(0, auto) 1px minmax(0, auto) 14px;
}

.xy-live-strip > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #513abe;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.xy-live-strip > span svg { color: #d83be4; }
.xy-live-strip > i { width: 1px; height: 12px; background: #dedde7; }
.xy-live-strip > b { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.xy-live-strip > b em { color: #774fe7; font-style: normal; font-weight: 750; }
.xy-live-strip > svg { color: #777988; }

.xy-dashboard-hero {
  position: relative;
  min-height: 199px;
  overflow: hidden;
  border-radius: 25px;
  background:
    radial-gradient(circle at 72% 55%, rgba(255,255,255,.96) 0 16%, rgba(239,232,255,.72) 38%, transparent 62%),
    linear-gradient(145deg, #fbfaff 0%, #f7f5ff 48%, #eef3ff 100%);
}

.xy-dashboard-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 54% 42%, rgba(255,255,255,.7) 0 2px, transparent 3px);
  background-size: 43px 43px;
  opacity: .7;
  pointer-events: none;
}

.xy-dashboard-hero-copy {
  position: relative;
  z-index: 2;
  width: 58%;
  padding: 16px 0 14px 16px;
}

.xy-dashboard-hero h1 {
  margin: 0;
  color: #090b11;
  font-size: 31px;
  line-height: 1.23;
  letter-spacing: -1.1px;
}

.xy-dashboard-hero h1 strong {
  display: block;
  margin-top: 4px;
  color: transparent;
  background: linear-gradient(100deg, #f52ca9, #7254f4 72%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 33px;
}

.xy-dashboard-hero-copy > p {
  margin: 12px 0 0;
  color: #555866;
  font-size: 14px;
  line-height: 1.7;
}

.xy-dashboard-hero-copy > div {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.xy-dashboard-hero-copy > div span {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #55586a;
  font-size: 10px;
  white-space: nowrap;
}

.xy-dashboard-hero-copy > div svg { color: #704de9; }

.xy-dashboard-hero-art {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
}

.xy-dashboard-hero-art img {
  position: absolute;
  right: -15px;
  bottom: -3px;
  width: 198px;
  height: 198px;
  object-fit: cover;
  border-radius: 45%;
  filter: drop-shadow(0 18px 24px rgba(95, 72, 220, .1));
}

.xy-dashboard-hero-art small {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 9px;
  color: #4c38b3;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 12px;
  line-height: 1.6;
  transform: rotate(-4deg);
}

.xy-dashboard-composer {
  display: grid;
  min-height: 78px;
  align-items: center;
  gap: 7px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #efedf7;
  border-radius: 25px;
  box-shadow: 0 12px 30px rgba(70, 62, 118, .07);
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px 46px;
}

.xy-dashboard-composer > button {
  display: grid;
  width: 38px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: #7456e9;
  background: transparent;
  border: 0;
}

.xy-dashboard-composer > button:not(.xy-dashboard-send) {
  width: 34px;
}

.xy-dashboard-input-copy {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
}

.xy-dashboard-composer input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  color: #2f3140;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.xy-dashboard-composer input::placeholder { color: #8b8d99; }

.xy-dashboard-input-copy small {
  display: block;
  overflow: hidden;
  padding: 0 7px;
  color: #b0b0ba;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-dashboard-composer .xy-dashboard-send {
  width: 46px;
  height: 46px;
  color: #fff;
  background: linear-gradient(145deg, #f13bd4, #7657f4);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(121, 79, 230, .23);
}

.xy-dashboard-composer .xy-dashboard-send:disabled { opacity: .55; }

.xy-dashboard-composer .xy-dashboard-voice {
  border-radius: 50%;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.xy-dashboard-composer .xy-dashboard-voice.is-active {
  color: #fff;
  background: radial-gradient(circle at center, #7657f4 0 16px, transparent 17px);
  box-shadow: none;
}

.xy-dashboard-composer .xy-dashboard-realtime { color: #4d83dc; }
.xy-dashboard-composer .xy-dashboard-model-audio { color: #7657f4; }
.xy-dashboard-composer .xy-dashboard-model-audio:disabled { opacity: .68; }

.xy-dashboard-stop-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: currentColor;
  border-radius: 3px;
}

.xy-dashboard-input-copy .xy-dashboard-voice-status {
  color: #6250bc;
}

.xy-dashboard-input-copy .xy-dashboard-voice-status.is-error {
  color: #b33e4b;
}

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

.xy-dashboard-features > button {
  display: grid;
  min-width: 0;
  min-height: 76px;
  align-items: center;
  gap: 8px;
  padding: 9px;
  color: #1c1e28;
  text-align: left;
  background: rgba(255,255,255,.94);
  border: 1px solid #efedf5;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(54, 51, 86, .045);
  grid-template-columns: 42px minmax(0, 1fr) 10px;
}

.xy-dashboard-features > button > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(89, 74, 197, .14);
}

.xy-dashboard-features .is-pink { background: linear-gradient(145deg, #ff4a9b, #ed2676); }
.xy-dashboard-features .is-green { background: linear-gradient(145deg, #2ce58c, #05be67); }
.xy-dashboard-features .is-blue { background: linear-gradient(145deg, #39cdf6, #159dec); }
.xy-dashboard-features .is-purple { background: linear-gradient(145deg, #9b5cf5, #6f3fe1); }
.xy-dashboard-features > button > div { min-width: 0; }
.xy-dashboard-features strong { display: block; font-size: 14px; line-height: 1.3; }
.xy-dashboard-features small,
.xy-dashboard-features p { display: block; margin: 3px 0 0; overflow: hidden; color: #797b89; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dashboard-features p { color: #626573; }
.xy-dashboard-features > button > svg { color: #767987; }

.xy-dashboard-device-work {
  height: 108px;
  min-height: 108px;
  padding: 9px 14px 10px;
  background: rgba(255,255,255,.94);
  border: 1px solid #efedf5;
  border-radius: 21px;
  box-shadow: 0 9px 25px rgba(54, 51, 86, .045);
}

.xy-dashboard-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.xy-dashboard-section-title h2 { margin: 0; font-size: 14px; }
.xy-dashboard-section-title button { display: flex; align-items: center; gap: 2px; padding: 0; color: #6248cf; background: transparent; border: 0; font-size: 10px; }

.xy-dashboard-phone-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.xy-dashboard-phone-grid > button {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 0;
  color: #282a35;
  background: transparent;
  border: 0;
  flex-direction: column;
}

.xy-dashboard-phone-grid .xy-platform-icon { width: 35px; height: 35px; border-radius: 11px; }
.xy-dashboard-phone-grid strong { width: 100%; margin-top: 5px; overflow: hidden; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.xy-dashboard-phone-grid small { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: center; gap: 3px; margin-top: 3px; overflow: hidden; color: #8a8c98; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.xy-dashboard-phone-grid small i { width: 5px; height: 5px; flex: 0 0 auto; background: #16d56a; border-radius: 50%; }
.xy-dashboard-phone-grid.is-waiting small i { background: #c3c5cc; }
.xy-dashboard-phone-grid small i.is-waiting { background: #c3c5cc; }

.xy-dashboard-empty-device {
  display: grid;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  color: #5f50ba;
  text-align: left;
  background: #f6f4ff;
  border: 0;
  border-radius: 14px;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
}

.xy-dashboard-empty-device span { min-width: 0; }
.xy-dashboard-empty-device strong { display: block; color: #333541; font-size: 10px; }
.xy-dashboard-empty-device small { display: block; margin-top: 2px; overflow: hidden; color: #858394; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.xy-dashboard-insight {
  display: grid;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  color: #7854df;
  text-align: left;
  background: linear-gradient(100deg, #fff1fb, #edf2ff);
  border: 1px solid rgba(237, 229, 253, .9);
  border-radius: 19px;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
}

.xy-dashboard-insight span { min-width: 0; }
.xy-dashboard-insight strong { display: block; color: #34256f; font-size: 12px; }
.xy-dashboard-insight small { display: block; margin-top: 2px; overflow: hidden; color: #747586; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.xy-bottom-nav,
.h5-mode .xy-bottom-nav,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-bottom-nav {
  min-height: calc(54px + env(safe-area-inset-bottom, 0px));
  align-items: start;
  padding: 3px 4px calc(3px + env(safe-area-inset-bottom, 0px));
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.xy-bottom-nav button,
.h5-mode .xy-bottom-nav button {
  min-height: 46px;
  gap: 2px;
  padding: 2px 0;
  font-size: 9px;
}

.xy-bottom-nav .xy-bottom-assistant {
  position: relative;
  align-self: start;
  transform: translateY(-22px);
}

.xy-bottom-nav .xy-bottom-assistant img {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  clip-path: circle(43.5% at 50% 50%);
  transform: scale(1.15);
  box-shadow: 0 10px 26px rgba(103, 73, 226, .3);
}

.xy-navigation-drawer {
  position: absolute;
  z-index: 190;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.xy-navigation-drawer.is-open { visibility: visible; pointer-events: auto; }

.xy-navigation-dimmer {
  position: absolute;
  inset: 0;
  padding: 0;
  opacity: 0;
  background: rgba(24, 22, 39, .42);
  border: 0;
  transition: opacity .22s ease;
}

.xy-navigation-drawer.is-open .xy-navigation-dimmer { opacity: 1; }

.xy-navigation-drawer aside {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: min(82%, 332px);
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: linear-gradient(165deg, #fff 0%, #f7f5ff 72%, #eef2ff 100%);
  box-shadow: 24px 0 56px rgba(33, 29, 65, .18);
  transform: translateX(-102%);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
  flex-direction: column;
}

.xy-navigation-drawer.is-open aside { transform: translateX(0); }

.xy-navigation-drawer header {
  display: grid;
  align-items: center;
  gap: 9px;
  padding: 0 2px 17px;
  border-bottom: 1px solid #ebe8f4;
  grid-template-columns: 44px minmax(0,1fr) 34px;
}

.xy-navigation-drawer header > img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 8px 20px rgba(101,75,216,.16); }
.xy-navigation-drawer header > span { display: flex; min-width: 0; flex-direction: column; }
.xy-navigation-drawer header strong { font-size: 16px; }
.xy-navigation-drawer header small { margin-top: 2px; color: #858392; font-size: 9px; }
.xy-navigation-drawer header button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; color: #585666; background: #f1eef8; border: 0; border-radius: 11px; }

.xy-navigation-drawer nav { display: grid; gap: 5px; margin-top: 14px; }
.xy-navigation-drawer nav > button { display: grid; min-height: 55px; align-items: center; gap: 9px; padding: 7px 9px; color: #3e3e49; text-align: left; background: transparent; border: 0; border-radius: 14px; grid-template-columns: 35px minmax(0,1fr) 15px; }
.xy-navigation-drawer nav > button.is-active { color: #5d42cb; background: rgba(238,233,255,.9); }
.xy-navigation-drawer nav > button > span { display: grid; width: 35px; height: 35px; place-items: center; background: rgba(255,255,255,.84); border-radius: 11px; box-shadow: 0 5px 14px rgba(59,53,92,.06); }
.xy-navigation-drawer nav > button > div { display: flex; min-width: 0; flex-direction: column; }
.xy-navigation-drawer nav strong { font-size: 12px; }
.xy-navigation-drawer nav small { margin-top: 2px; overflow: hidden; color: #8b8996; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.xy-navigation-drawer nav > button > svg { color: #94919e; }

.xy-drawer-bind {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  color: #fff;
  background: linear-gradient(145deg, #795af0, #5a3ed7);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(83,58,198,.22);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 370px) {
  .xy-dashboard-scroll { padding-inline: 10px; }
  .xy-dashboard-scroll .xy-brand-header { gap: 5px; grid-template-columns: 28px minmax(0,1fr) auto; }
  .xy-dashboard-scroll .xy-brand-lockup strong { font-size: 17px; }
  .xy-dashboard-scroll .xy-brand-lockup small { font-size: 9px; }
  .xy-dashboard-scroll .xy-header-actions { gap: 4px; }
  .xy-live-strip > b { font-size: 8px; }
  .xy-dashboard-hero { min-height: 198px; }
  .xy-dashboard-features > button { gap: 6px; padding: 8px; grid-template-columns: 38px minmax(0,1fr) 10px; }
  .xy-dashboard-features > button > span { width: 38px; height: 38px; }
  .xy-bottom-nav button span { font-size: 7px; }
  .xy-bottom-nav .xy-bottom-assistant img { width: 49px; height: 49px; }
}

/*
 * Screenshot-calibrated Xiaodian dashboard.
 * The visual source is 694 x 1468 at 2x, so the authored coordinate system is
 * 347 x 734 CSS pixels. Container units keep every measured section in the
 * same proportion on wider WebView screens instead of compressing the stack.
 */
.xy-app-shell {
  container-type: inline-size;
}

.xy-app-shell:has(.xy-dashboard-home) {
  background: #faf9ff;
}

.xy-dashboard-scroll,
.h5-mode .xy-dashboard-scroll,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-dashboard-scroll {
  --dash-u: calc(100cqw / 347);
  min-height: 0;
  padding: calc(25 * var(--dash-u)) calc(12 * var(--dash-u)) calc(48 * var(--dash-u));
  background:
    radial-gradient(circle at 76% 23%, rgba(213, 206, 255, .18), transparent 29%),
    #faf9ff;
}

.xy-dashboard-scroll .xy-brand-header {
  min-height: calc(37 * var(--dash-u));
  gap: calc(8 * var(--dash-u));
  margin: 0 0 calc(22 * var(--dash-u));
  grid-template-columns: calc(25 * var(--dash-u)) minmax(0, 1fr) auto;
}

.xy-dashboard-scroll .xy-header-menu {
  width: calc(25 * var(--dash-u));
  height: calc(37 * var(--dash-u));
}

.xy-dashboard-scroll .xy-header-menu svg {
  width: calc(22 * var(--dash-u));
  height: calc(22 * var(--dash-u));
  stroke-width: 1.55;
}

.xy-dashboard-scroll .xy-brand-lockup {
  gap: calc(12 * var(--dash-u));
}

.xy-dashboard-scroll .xy-brand-mark,
.xy-dashboard-scroll .xy-brand-mark img {
  width: calc(36 * var(--dash-u));
  height: calc(36 * var(--dash-u));
}

.xy-dashboard-scroll .xy-brand-mark {
  box-shadow: 0 calc(6 * var(--dash-u)) calc(16 * var(--dash-u)) rgba(99, 76, 228, .16);
}

.xy-dashboard-scroll .xy-brand-mark img {
  clip-path: circle(43.5% at 50% 50%);
  transform: scale(1.15);
}

.xy-dashboard-scroll .xy-brand-lockup strong {
  font-size: calc(19 * var(--dash-u));
  font-weight: 780;
  letter-spacing: calc(-.55 * var(--dash-u));
  line-height: 1.15;
}

.xy-dashboard-scroll .xy-brand-lockup small {
  margin-top: calc(3 * var(--dash-u));
  font-size: calc(11 * var(--dash-u));
  line-height: 1.15;
}

.xy-dashboard-scroll .xy-header-actions {
  gap: calc(9 * var(--dash-u));
}

.xy-dashboard-scroll .xy-icon-button,
.xy-dashboard-scroll .xy-profile-button {
  width: calc(36 * var(--dash-u));
  height: calc(36 * var(--dash-u));
}

.xy-dashboard-scroll .xy-icon-button {
  border-radius: calc(12 * var(--dash-u));
  box-shadow: 0 calc(8 * var(--dash-u)) calc(20 * var(--dash-u)) rgba(73, 69, 108, .055);
}

.xy-dashboard-scroll .xy-icon-button svg {
  width: calc(21 * var(--dash-u));
  height: calc(21 * var(--dash-u));
}

.xy-dashboard-scroll .xy-profile-button img {
  width: calc(34 * var(--dash-u));
  height: calc(34 * var(--dash-u));
}

.xy-dashboard-scroll .xy-profile-button .xy-notice-dot {
  top: calc(-1 * var(--dash-u));
  right: calc(-1 * var(--dash-u));
  width: calc(8 * var(--dash-u));
  height: calc(8 * var(--dash-u));
}

.xy-dashboard-home {
  display: block;
}

.xy-live-strip {
  height: calc(31 * var(--dash-u));
  min-height: calc(31 * var(--dash-u));
  gap: calc(7 * var(--dash-u));
  padding: 0 calc(12 * var(--dash-u));
  border-color: rgba(240, 237, 250, .72);
  border-radius: calc(16 * var(--dash-u));
  box-shadow: 0 calc(8 * var(--dash-u)) calc(25 * var(--dash-u)) rgba(91, 70, 184, .07);
  grid-template-columns: auto 1px minmax(0, auto) 1px minmax(0, auto) 1px minmax(0, auto) calc(10 * var(--dash-u));
}

.xy-live-strip > span {
  gap: calc(4 * var(--dash-u));
  font-size: calc(10 * var(--dash-u));
}

.xy-live-strip > span svg {
  width: calc(15 * var(--dash-u));
  height: calc(15 * var(--dash-u));
}

.xy-live-strip > i {
  height: calc(11 * var(--dash-u));
}

.xy-live-strip > b {
  font-size: calc(9.2 * var(--dash-u));
}

.xy-live-strip > svg {
  width: calc(11 * var(--dash-u));
  height: calc(11 * var(--dash-u));
}

.xy-dashboard-hero {
  height: calc(171 * var(--dash-u));
  min-height: calc(171 * var(--dash-u));
  margin-top: calc(8 * var(--dash-u));
  overflow: visible;
  border-radius: calc(24 * var(--dash-u));
  background:
    radial-gradient(circle at 71% 54%, rgba(255, 255, 255, .98) 0 14%, rgba(236, 229, 255, .58) 38%, transparent 64%),
    linear-gradient(145deg, rgba(251, 250, 255, .2), #f8f6ff 54%, #f1f3ff 100%);
}

.xy-dashboard-hero::after {
  border-radius: inherit;
  background-size: calc(42 * var(--dash-u)) calc(42 * var(--dash-u));
}

.xy-dashboard-hero-copy {
  width: 61%;
  padding: calc(14 * var(--dash-u)) 0 0 calc(11 * var(--dash-u));
}

.xy-dashboard-hero h1 {
  font-size: calc(29 * var(--dash-u));
  line-height: 1.16;
  letter-spacing: calc(-1.1 * var(--dash-u));
}

.xy-dashboard-hero h1 strong {
  margin-top: calc(5 * var(--dash-u));
  font-size: calc(30 * var(--dash-u));
  line-height: 1.12;
}

.xy-dashboard-hero-copy > p {
  margin: calc(13 * var(--dash-u)) 0 0;
  font-size: calc(13 * var(--dash-u));
  line-height: 1.7;
}

.xy-dashboard-hero-copy > div {
  gap: calc(11 * var(--dash-u));
  margin-top: calc(18 * var(--dash-u));
}

.xy-dashboard-hero-copy > div span {
  gap: calc(3 * var(--dash-u));
  font-size: calc(9.5 * var(--dash-u));
}

.xy-dashboard-hero-copy > div svg {
  width: calc(13 * var(--dash-u));
  height: calc(13 * var(--dash-u));
}

.xy-dashboard-hero-art {
  width: 59%;
}

.xy-dashboard-hero-art img {
  right: calc(-8 * var(--dash-u));
  bottom: calc(-2 * var(--dash-u));
  width: calc(164 * var(--dash-u));
  height: calc(164 * var(--dash-u));
  border-radius: 48%;
  filter: drop-shadow(0 calc(15 * var(--dash-u)) calc(22 * var(--dash-u)) rgba(95, 72, 220, .09));
}

.xy-dashboard-hero-art small {
  top: calc(12 * var(--dash-u));
  right: calc(2 * var(--dash-u));
  font-size: calc(11.5 * var(--dash-u));
  line-height: 1.55;
}

.xy-dashboard-composer {
  height: calc(66 * var(--dash-u));
  min-height: calc(66 * var(--dash-u));
  gap: calc(5 * var(--dash-u));
  margin-top: calc(7 * var(--dash-u));
  padding: calc(8 * var(--dash-u)) calc(10 * var(--dash-u));
  border-color: #f1eef8;
  border-radius: calc(25 * var(--dash-u));
  box-shadow: 0 calc(11 * var(--dash-u)) calc(28 * var(--dash-u)) rgba(70, 62, 118, .07);
  grid-template-columns: calc(33 * var(--dash-u)) minmax(0, 1fr) calc(33 * var(--dash-u)) calc(33 * var(--dash-u)) calc(46 * var(--dash-u));
}

.xy-dashboard-composer > button,
.xy-dashboard-composer > button:not(.xy-dashboard-send) {
  width: calc(33 * var(--dash-u));
  height: calc(44 * var(--dash-u));
}

.xy-dashboard-composer > button svg {
  width: calc(23 * var(--dash-u));
  height: calc(23 * var(--dash-u));
}

.xy-dashboard-composer input {
  height: calc(27 * var(--dash-u));
  padding: 0 calc(5 * var(--dash-u));
  font-size: calc(13 * var(--dash-u));
}

.xy-dashboard-input-copy small {
  padding: 0 calc(5 * var(--dash-u));
  font-size: calc(8.5 * var(--dash-u));
}

.xy-dashboard-composer .xy-dashboard-send {
  width: calc(46 * var(--dash-u));
  height: calc(46 * var(--dash-u));
}

.xy-dashboard-features {
  gap: calc(13 * var(--dash-u)) calc(10 * var(--dash-u));
  margin-top: calc(27 * var(--dash-u));
}

.xy-dashboard-features > button {
  height: calc(66 * var(--dash-u));
  min-height: calc(66 * var(--dash-u));
  gap: calc(8 * var(--dash-u));
  padding: calc(8 * var(--dash-u)) calc(9 * var(--dash-u));
  border-color: rgba(241, 239, 247, .9);
  border-radius: calc(18 * var(--dash-u));
  box-shadow: 0 calc(8 * var(--dash-u)) calc(22 * var(--dash-u)) rgba(54, 51, 86, .045);
  grid-template-columns: calc(38 * var(--dash-u)) minmax(0, 1fr) calc(9 * var(--dash-u));
}

.xy-dashboard-features > button > span {
  width: calc(38 * var(--dash-u));
  height: calc(38 * var(--dash-u));
  border-radius: calc(12 * var(--dash-u));
}

.xy-dashboard-features > button > span svg {
  width: calc(23 * var(--dash-u));
  height: calc(23 * var(--dash-u));
}

.xy-dashboard-features strong {
  font-size: calc(12.5 * var(--dash-u));
}

.xy-dashboard-features small,
.xy-dashboard-features p {
  margin-top: calc(2 * var(--dash-u));
  font-size: calc(8.2 * var(--dash-u));
}

.xy-dashboard-features > button > svg {
  width: calc(13 * var(--dash-u));
  height: calc(13 * var(--dash-u));
}

.xy-dashboard-device-work {
  height: calc(95 * var(--dash-u));
  min-height: calc(95 * var(--dash-u));
  margin-top: calc(9 * var(--dash-u));
  padding: calc(9 * var(--dash-u)) calc(12 * var(--dash-u));
  border-color: rgba(241, 239, 247, .9);
  border-radius: calc(18 * var(--dash-u));
  box-shadow: 0 calc(8 * var(--dash-u)) calc(22 * var(--dash-u)) rgba(54, 51, 86, .045);
}

.xy-dashboard-section-title {
  margin-bottom: calc(8 * var(--dash-u));
}

.xy-dashboard-section-title h2 {
  font-size: calc(12 * var(--dash-u));
}

.xy-dashboard-section-title button {
  font-size: calc(9 * var(--dash-u));
}

.xy-dashboard-phone-grid {
  gap: calc(7 * var(--dash-u));
}

.xy-dashboard-phone-grid .xy-platform-icon {
  width: calc(34 * var(--dash-u));
  height: calc(34 * var(--dash-u));
  border-radius: calc(10 * var(--dash-u));
}

.xy-dashboard-phone-grid .xy-platform-icon svg {
  width: calc(24 * var(--dash-u));
  height: calc(24 * var(--dash-u));
}

.xy-dashboard-phone-grid strong {
  margin-top: calc(5 * var(--dash-u));
  font-size: calc(9.5 * var(--dash-u));
}

.xy-dashboard-phone-grid small {
  gap: calc(3 * var(--dash-u));
  margin-top: calc(3 * var(--dash-u));
  font-size: calc(7.5 * var(--dash-u));
}

.xy-dashboard-phone-grid small i {
  width: calc(5 * var(--dash-u));
  height: calc(5 * var(--dash-u));
}

.xy-dashboard-insight {
  height: calc(41 * var(--dash-u));
  min-height: calc(41 * var(--dash-u));
  gap: calc(9 * var(--dash-u));
  margin-top: calc(6 * var(--dash-u));
  padding: calc(7 * var(--dash-u)) calc(12 * var(--dash-u));
  border-radius: calc(18 * var(--dash-u));
  grid-template-columns: calc(28 * var(--dash-u)) minmax(0, 1fr) calc(14 * var(--dash-u));
}

.xy-dashboard-insight > svg:first-child {
  width: calc(24 * var(--dash-u));
  height: calc(24 * var(--dash-u));
}

.xy-dashboard-insight strong {
  font-size: calc(11.5 * var(--dash-u));
}

.xy-dashboard-insight small {
  margin-top: calc(2 * var(--dash-u));
  font-size: calc(8.5 * var(--dash-u));
}

.xy-dashboard-insight > svg:last-child {
  width: calc(15 * var(--dash-u));
  height: calc(15 * var(--dash-u));
}

.xy-bottom-nav,
.h5-mode .xy-bottom-nav,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-bottom-nav {
  min-height: calc(31 * (100cqw / 347) + env(safe-area-inset-bottom, 0px));
  padding: 0 calc(4 * (100cqw / 347)) env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .98);
}

.xy-bottom-nav button,
.h5-mode .xy-bottom-nav button {
  min-height: calc(44 * (100cqw / 347));
  gap: calc(1 * (100cqw / 347));
  padding: calc(2 * (100cqw / 347)) 0;
  font-size: calc(8.5 * (100cqw / 347));
  transform: translateY(calc(-10 * (100cqw / 347)));
}

.xy-bottom-nav button > svg {
  width: calc(20 * (100cqw / 347));
  height: calc(20 * (100cqw / 347));
}

.xy-bottom-nav .xy-bottom-assistant {
  transform: translateY(calc(-19 * (100cqw / 347)));
}

.xy-bottom-nav .xy-bottom-assistant img {
  width: calc(44 * (100cqw / 347));
  height: calc(44 * (100cqw / 347));
}

@media (max-width: 370px) {
  .xy-dashboard-scroll,
  .h5-mode .xy-dashboard-scroll,
  .h5-mode .mobile-app-viewport[data-platform="android"] .xy-dashboard-scroll {
    padding-inline: calc(12 * var(--dash-u));
  }

  .xy-dashboard-scroll .xy-brand-header {
    gap: calc(8 * var(--dash-u));
    grid-template-columns: calc(25 * var(--dash-u)) minmax(0, 1fr) auto;
  }

  .xy-dashboard-scroll .xy-brand-lockup strong {
    font-size: calc(19 * var(--dash-u));
  }

  .xy-dashboard-scroll .xy-brand-lockup small {
    font-size: calc(11 * var(--dash-u));
  }

  .xy-dashboard-scroll .xy-header-actions {
    gap: calc(9 * var(--dash-u));
  }

  .xy-live-strip > b {
    font-size: calc(9.2 * var(--dash-u));
  }

  .xy-dashboard-hero {
    min-height: calc(171 * var(--dash-u));
  }

  .xy-dashboard-features > button {
    gap: calc(8 * var(--dash-u));
    padding: calc(8 * var(--dash-u)) calc(9 * var(--dash-u));
    grid-template-columns: calc(38 * var(--dash-u)) minmax(0, 1fr) calc(9 * var(--dash-u));
  }

  .xy-dashboard-features > button > span {
    width: calc(38 * var(--dash-u));
    height: calc(38 * var(--dash-u));
  }

  .xy-bottom-nav button span {
    font-size: calc(8.5 * (100cqw / 347));
  }

  .xy-bottom-nav .xy-bottom-assistant img {
    width: calc(44 * (100cqw / 347));
    height: calc(44 * (100cqw / 347));
  }
}

/* On tall phones, consume the vertical surplus instead of leaving a blank
   band above the fixed navigation. Each max() keeps the exact reference size
   until surplus exists; the distributed shares add up to one full surplus. */
@media (min-height: 900px) {
  .xy-dashboard-hero {
    height: max(calc(171 * var(--dash-u)), calc(20dvh + 24 * var(--dash-u)));
    min-height: max(calc(171 * var(--dash-u)), calc(20dvh + 24 * var(--dash-u)));
  }

  .xy-dashboard-composer {
    margin-top: max(calc(7 * var(--dash-u)), calc(4dvh - 22.4 * var(--dash-u)));
  }

  .xy-dashboard-features {
    margin-top: max(calc(27 * var(--dash-u)), calc(18dvh - 105.3 * var(--dash-u)));
    row-gap: max(calc(13 * var(--dash-u)), calc(5dvh - 23.75 * var(--dash-u)));
  }

  .xy-dashboard-features > button {
    height: max(calc(66 * var(--dash-u)), calc(9dvh - .15 * var(--dash-u)));
    min-height: max(calc(66 * var(--dash-u)), calc(9dvh - .15 * var(--dash-u)));
  }

  .xy-dashboard-device-work {
    height: max(calc(95 * var(--dash-u)), calc(14dvh - 7.9 * var(--dash-u)));
    min-height: max(calc(95 * var(--dash-u)), calc(14dvh - 7.9 * var(--dash-u)));
    margin-top: max(calc(9 * var(--dash-u)), calc(8dvh - 49.8 * var(--dash-u)));
  }

  .xy-dashboard-insight {
    height: max(calc(41 * var(--dash-u)), calc(8dvh - 17.8 * var(--dash-u)));
    min-height: max(calc(41 * var(--dash-u)), calc(8dvh - 17.8 * var(--dash-u)));
    margin-top: max(calc(6 * var(--dash-u)), calc(5dvh - 30.75 * var(--dash-u)));
  }
}

/* 2026-08-25 source-locked home layout, authored on the reference's
   347 × 734 CSS-pixel canvas. Direct children use measured coordinates;
   only bounded tall-screen surplus is distributed through --dash-step. */
.xy-dashboard-scroll,
.h5-mode .xy-dashboard-scroll,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-dashboard-scroll {
  --dash-u: calc(100cqw / 347);
  --dash-step: min(calc(7 * var(--dash-u)), max(0px, calc(10dvh - 76 * var(--dash-u))));
  --dash-update-offset: 0px;
  position: relative;
  height: calc(703 * var(--dash-u) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step));
  min-height: calc(703 * var(--dash-u) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step));
  padding: 0;
  background: #faf9ff;
}

.xy-dashboard-scroll .xy-brand-header {
  position: absolute;
  z-index: 5;
  top: calc(25 * var(--dash-u) + var(--dash-update-offset));
  right: calc(12 * var(--dash-u));
  left: calc(12 * var(--dash-u));
  min-height: calc(37 * var(--dash-u));
  margin: 0;
}

.xy-dashboard-home {
  position: absolute;
  top: calc(85 * var(--dash-u) + var(--dash-update-offset));
  right: calc(12 * var(--dash-u));
  left: calc(12 * var(--dash-u));
  display: block;
  height: calc(618 * var(--dash-u) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step));
}

.xy-dashboard-scroll.has-update-banner {
  --dash-update-offset: calc(66 * var(--dash-u));
}

.xy-dashboard-scroll.has-update-banner > .xy-update-banner {
  position: absolute;
  z-index: 6;
  top: calc(25 * var(--dash-u));
  right: calc(12 * var(--dash-u));
  left: calc(12 * var(--dash-u));
  width: auto;
  margin: 0;
}

.xy-dashboard-home > .xy-live-strip,
.xy-dashboard-home > .xy-dashboard-hero,
.xy-dashboard-home > .xy-dashboard-composer,
.xy-dashboard-home > .xy-dashboard-features,
.xy-dashboard-home > .xy-dashboard-device-work,
.xy-dashboard-home > .xy-dashboard-insight {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0;
}

.xy-dashboard-home > .xy-live-strip {
  top: 0;
  height: calc(31 * var(--dash-u));
  min-height: calc(31 * var(--dash-u));
}

.xy-dashboard-home > .xy-dashboard-hero {
  top: calc(39 * var(--dash-u));
  height: calc(184 * var(--dash-u) + var(--dash-step) + var(--dash-step));
  min-height: calc(184 * var(--dash-u) + var(--dash-step) + var(--dash-step));
  overflow: hidden;
  border-radius: calc(24 * var(--dash-u));
  background: linear-gradient(145deg, rgba(253, 252, 255, .4), #f8f6ff 54%, #f1f3ff 100%);
}

.xy-dashboard-hero::after {
  display: none;
}

.xy-dashboard-hero-copy {
  z-index: 3;
  width: 59%;
  padding: calc(18 * var(--dash-u)) 0 0 calc(11 * var(--dash-u));
}

.xy-dashboard-hero h1 {
  font-size: calc(28 * var(--dash-u));
  line-height: 1.16;
}

.xy-dashboard-hero h1 strong {
  margin-top: calc(5 * var(--dash-u));
  font-size: calc(29 * var(--dash-u));
}

.xy-dashboard-hero-copy > p {
  margin-top: calc(13 * var(--dash-u));
  font-size: calc(12.5 * var(--dash-u));
  line-height: 1.65;
}

.xy-dashboard-hero-copy > div {
  gap: calc(11 * var(--dash-u));
  margin-top: calc(24 * var(--dash-u));
}

.xy-dashboard-hero-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.xy-dashboard-hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 0;
  clip-path: polygon(0 0, 70% 0, 70% 28%, 100% 28%, 100% 100%, 0 100%);
  filter: none;
}

.xy-dashboard-hero-art small {
  top: calc(12 * var(--dash-u));
  right: calc(6 * var(--dash-u));
  font-size: calc(10.5 * var(--dash-u));
  line-height: 1.55;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

.xy-dashboard-home > .xy-dashboard-composer {
  top: calc(229 * var(--dash-u) + var(--dash-step) + var(--dash-step));
  height: calc(66 * var(--dash-u));
  min-height: calc(66 * var(--dash-u));
}

.xy-dashboard-composer .xy-dashboard-send {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.xy-dashboard-composer .xy-dashboard-send img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.xy-dashboard-home > .xy-dashboard-features {
  top: calc(322 * var(--dash-u) + var(--dash-step) + var(--dash-step) + var(--dash-step));
  height: calc(145 * var(--dash-u) + var(--dash-step) + var(--dash-step) + var(--dash-step));
  grid-template-rows: repeat(2, calc(66 * var(--dash-u) + var(--dash-step)));
  row-gap: calc(13 * var(--dash-u) + var(--dash-step));
}

.xy-dashboard-features > button {
  height: calc(66 * var(--dash-u) + var(--dash-step));
  min-height: calc(66 * var(--dash-u) + var(--dash-step));
  padding: calc(8 * var(--dash-u)) calc(8 * var(--dash-u));
  border-radius: calc(18 * var(--dash-u));
}

.xy-dashboard-features > button > span,
.xy-dashboard-features .is-pink,
.xy-dashboard-features .is-green,
.xy-dashboard-features .is-blue,
.xy-dashboard-features .is-purple {
  width: calc(38 * var(--dash-u));
  height: calc(38 * var(--dash-u));
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.xy-dashboard-features > button > span img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.xy-dashboard-home > .xy-dashboard-device-work {
  top: calc(476 * var(--dash-u) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step));
  height: calc(95 * var(--dash-u) + var(--dash-step) + var(--dash-step));
  min-height: calc(95 * var(--dash-u) + var(--dash-step) + var(--dash-step));
  padding: calc(9 * var(--dash-u)) calc(12 * var(--dash-u));
}

.xy-dashboard-home > .xy-dashboard-insight {
  top: calc(577 * var(--dash-u) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step) + var(--dash-step));
  height: calc(41 * var(--dash-u) + var(--dash-step));
  min-height: calc(41 * var(--dash-u) + var(--dash-step));
}

.xy-dashboard-scroll .xy-brand-mark,
.xy-dashboard-scroll .xy-brand-mark img,
.xy-bottom-nav .xy-bottom-assistant img {
  clip-path: none;
  transform: none;
}

.xy-dashboard-scroll .xy-brand-mark {
  overflow: visible;
  box-shadow: none;
}

.xy-dashboard-scroll .xy-brand-mark img {
  object-fit: contain;
  filter: drop-shadow(0 calc(6 * var(--dash-u)) calc(11 * var(--dash-u)) rgba(92, 71, 224, .2));
}

.xy-bottom-nav,
.h5-mode .xy-bottom-nav,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-bottom-nav {
  height: calc(44 * (100cqw / 347) + env(safe-area-inset-bottom, 0px));
  min-height: calc(44 * (100cqw / 347) + env(safe-area-inset-bottom, 0px));
  overflow: visible;
  padding: 0 calc(4 * (100cqw / 347)) env(safe-area-inset-bottom, 0px);
}

.xy-bottom-nav button,
.h5-mode .xy-bottom-nav button {
  height: calc(44 * (100cqw / 347));
  min-height: calc(44 * (100cqw / 347));
  transform: none;
}

.xy-bottom-nav .xy-bottom-assistant {
  transform: translateY(calc(-6 * (100cqw / 347)));
}

.xy-bottom-nav .xy-bottom-assistant img {
  width: calc(44 * (100cqw / 347));
  height: calc(44 * (100cqw / 347));
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 calc(8 * (100cqw / 347)) calc(14 * (100cqw / 347)) rgba(103, 73, 226, .28));
}

/* Home readability floor: user-visible dashboard and navigation copy never
   drops below 15 CSS px. Narrow screens grow the affected cards and scroll. */
.xy-dashboard-scroll,
.h5-mode .xy-dashboard-scroll,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-dashboard-scroll {
  --dash-composer-h: max(calc(66 * var(--dash-u)), 74px);
  --dash-feature-h: max(calc(66 * var(--dash-u) + var(--dash-step)), 86px);
  --dash-feature-gap: calc(13 * var(--dash-u) + var(--dash-step));
  --dash-device-h: max(calc(70 * var(--dash-u) + 56px), 126px);
  --dash-bottom-clearance: max(calc(48 * var(--dash-u)), 56px);
  height: calc(
    85 * var(--dash-u) +
    229 * var(--dash-u) + var(--dash-step) + var(--dash-step) +
    var(--dash-composer-h) + 27 * var(--dash-u) + var(--dash-step) +
    var(--dash-feature-h) + var(--dash-feature-h) + var(--dash-feature-gap) +
    9 * var(--dash-u) + var(--dash-device-h) + var(--dash-bottom-clearance) +
    var(--dash-update-offset)
  );
  min-height: calc(
    85 * var(--dash-u) +
    229 * var(--dash-u) + var(--dash-step) + var(--dash-step) +
    var(--dash-composer-h) + 27 * var(--dash-u) + var(--dash-step) +
    var(--dash-feature-h) + var(--dash-feature-h) + var(--dash-feature-gap) +
    9 * var(--dash-u) + var(--dash-device-h) + var(--dash-bottom-clearance) +
    var(--dash-update-offset)
  );
}

.xy-dashboard-home {
  height: calc(
    229 * var(--dash-u) + var(--dash-step) + var(--dash-step) +
    var(--dash-composer-h) + 27 * var(--dash-u) + var(--dash-step) +
    var(--dash-feature-h) + var(--dash-feature-h) + var(--dash-feature-gap) +
    9 * var(--dash-u) + var(--dash-device-h)
  );
}

.xy-dashboard-home > .xy-dashboard-composer {
  height: var(--dash-composer-h);
  min-height: var(--dash-composer-h);
}

.xy-dashboard-home > .xy-dashboard-features {
  top: calc(229 * var(--dash-u) + var(--dash-step) + var(--dash-step) + var(--dash-composer-h) + 27 * var(--dash-u) + var(--dash-step));
  height: calc(var(--dash-feature-h) + var(--dash-feature-h) + var(--dash-feature-gap));
  grid-template-rows: repeat(2, var(--dash-feature-h));
  row-gap: var(--dash-feature-gap);
}

.xy-dashboard-features > button {
  height: var(--dash-feature-h);
  min-height: var(--dash-feature-h);
}

.xy-dashboard-home > .xy-dashboard-device-work {
  top: calc(
    229 * var(--dash-u) + var(--dash-step) + var(--dash-step) +
    var(--dash-composer-h) + 27 * var(--dash-u) + var(--dash-step) +
    var(--dash-feature-h) + var(--dash-feature-h) + var(--dash-feature-gap) +
    9 * var(--dash-u)
  );
  height: var(--dash-device-h);
  min-height: var(--dash-device-h);
  overflow: hidden;
}

.xy-dashboard-phone-grid > button {
  overflow: hidden;
}

.xy-dashboard-phone-grid strong,
.xy-dashboard-phone-grid small {
  height: 18px;
  line-height: 18px;
}

.xy-dashboard-phone-grid small > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-dashboard-scroll .xy-brand-lockup small,
.xy-live-strip,
.xy-live-strip > b,
.xy-dashboard-hero-copy > p,
.xy-dashboard-hero-copy > div span,
.xy-dashboard-hero-art small,
.xy-dashboard-composer input,
.xy-dashboard-input-copy small,
.xy-dashboard-features strong,
.xy-dashboard-features small,
.xy-dashboard-features p,
.xy-dashboard-section-title h2,
.xy-dashboard-section-title button,
.xy-dashboard-phone-grid strong,
.xy-dashboard-phone-grid small,
.xy-bottom-nav button span {
  font-size: 13px;
}

.xy-dashboard-scroll .xy-brand-lockup strong {
  font-size: calc(19 * var(--dash-u) - 2px);
}

.xy-live-strip > span {
  font-size: calc(10 * var(--dash-u) - 2px);
}

.xy-dashboard-hero h1 {
  font-size: calc(28 * var(--dash-u) - 2px);
}

.xy-dashboard-hero h1 strong {
  font-size: calc(29 * var(--dash-u) - 2px);
}

html.h5-mode .xy-dashboard-composer input {
  font-size: 13px !important;
}

/* One brand header geometry across every protected primary tab. The home
   dashboard remains source-locked; the remaining tabs use the same measured
   347px-canvas sizing in normal document flow. */
.xy-shared-brand-scroll {
  --dash-u: calc(100cqw / 347);
}

.xy-shared-brand-scroll:not(.xy-dashboard-scroll),
.h5-mode .xy-shared-brand-scroll:not(.xy-dashboard-scroll),
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-shared-brand-scroll:not(.xy-dashboard-scroll) {
  padding-top: calc(25 * var(--dash-u));
  padding-right: calc(12 * var(--dash-u));
  padding-left: calc(12 * var(--dash-u));
}

.xy-shared-brand-scroll .xy-brand-header {
  display: grid;
  min-height: calc(37 * var(--dash-u));
  align-items: center;
  gap: calc(8 * var(--dash-u));
  grid-template-columns: calc(25 * var(--dash-u)) minmax(0, 1fr) auto;
}

.xy-shared-brand-scroll:not(.xy-dashboard-scroll) .xy-brand-header {
  margin: 0 0 calc(22 * var(--dash-u));
}

.xy-shared-brand-scroll .xy-header-menu {
  width: calc(25 * var(--dash-u));
  height: calc(37 * var(--dash-u));
}

.xy-shared-brand-scroll .xy-header-menu svg {
  width: calc(22 * var(--dash-u));
  height: calc(22 * var(--dash-u));
}

.xy-shared-brand-scroll .xy-brand-lockup {
  gap: calc(12 * var(--dash-u));
}

.xy-shared-brand-scroll .xy-brand-mark,
.xy-shared-brand-scroll .xy-brand-mark img {
  width: calc(36 * var(--dash-u));
  height: calc(36 * var(--dash-u));
}

.xy-shared-brand-scroll .xy-brand-mark {
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 calc(6 * var(--dash-u)) calc(16 * var(--dash-u)) rgba(99, 76, 228, .16);
}

.xy-shared-brand-scroll .xy-brand-mark img {
  object-fit: contain;
  clip-path: circle(43.5% at 50% 50%);
  transform: scale(1.15);
}

.xy-shared-brand-scroll .xy-brand-lockup strong {
  color: #11131b;
  font-size: calc(19 * var(--dash-u) - 2px);
  font-weight: 780;
  letter-spacing: calc(-.55 * var(--dash-u));
  line-height: 1.15;
}

.xy-shared-brand-scroll .xy-brand-lockup small {
  margin-top: calc(3 * var(--dash-u));
  color: #797c8c;
  font-size: 13px;
  line-height: 1.15;
}

.xy-shared-brand-scroll .xy-header-actions {
  gap: calc(9 * var(--dash-u));
}

.xy-shared-brand-scroll .xy-icon-button,
.xy-shared-brand-scroll .xy-profile-button {
  width: calc(36 * var(--dash-u));
  height: calc(36 * var(--dash-u));
}

.xy-shared-brand-scroll .xy-icon-button {
  border-radius: calc(12 * var(--dash-u));
  box-shadow: 0 calc(8 * var(--dash-u)) calc(20 * var(--dash-u)) rgba(73, 69, 108, .055);
}

.xy-shared-brand-scroll .xy-icon-button svg {
  width: calc(21 * var(--dash-u));
  height: calc(21 * var(--dash-u));
}

.xy-shared-brand-scroll .xy-profile-button img {
  width: calc(34 * var(--dash-u));
  height: calc(34 * var(--dash-u));
}

.xy-agent-sheet {
  gap: 14px;
}

.xy-agent-skills {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xy-agent-skills > span {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  color: #5f51c9;
  background: #f5f3ff;
  border: 1px solid #ebe7ff;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
}

.xy-agent-answer {
  display: grid;
  gap: 10px;
  padding: 13px;
  color: #333541;
  background: #fafaff;
  border: 1px solid #ececf4;
  border-radius: 15px;
  grid-template-columns: 34px minmax(0, 1fr);
}

.xy-agent-answer > span {
  display: grid;
  width: 34px;
  height: 34px;
  color: white;
  background: linear-gradient(145deg, #8a6cff, #6348df);
  border-radius: 12px;
  place-items: center;
}

.xy-agent-answer strong,
.xy-agent-answer p,
.xy-agent-proposal,
.xy-agent-error,
.xy-agent-sheet .xy-sheet-label,
.xy-agent-sheet .xy-review-note strong,
.xy-agent-sheet .xy-review-note small,
.xy-agent-sheet .xy-sheet-primary {
  font-size: 15px;
}

.xy-agent-answer p {
  margin: 4px 0 0;
  color: #606371;
  line-height: 1.55;
}

.xy-agent-proposal {
  display: flex;
  gap: 5px;
  padding: 13px;
  color: #4e4f5c;
  background: linear-gradient(145deg, #f5f2ff, #f8f8ff);
  border: 1px solid #e6e0ff;
  border-radius: 15px;
  flex-direction: column;
}

.xy-agent-proposal small {
  color: #7663dc;
  font-size: 15px;
}

.xy-agent-proposal > span {
  color: #777987;
}

.xy-agent-proposal button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 7px;
  color: white;
  background: #6c52e8;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 650;
}

.xy-agent-error {
  padding: 10px 12px;
  color: #a64747;
  background: #fff1f1;
  border-radius: 12px;
  line-height: 1.45;
}

.xy-agent-sheet textarea {
  min-height: 104px;
  font-size: 16px;
}

/* Full-screen, database-backed account conversation. */
.xy-agent-conversation-page {
  position: absolute;
  z-index: 120;
  inset: 0;
  overflow: hidden;
  background: #f7f7fc;
  color: #20212a;
}

.xy-agent-conversation-header {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  min-height: 68px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  border-bottom: 1px solid #ececf4;
  background: rgb(255 255 255 / 96%);
  box-sizing: content-box;
  box-shadow: 0 8px 24px rgb(56 51 99 / 5%);
  backdrop-filter: blur(18px);
}

.xy-agent-back,
.xy-agent-header-actions button {
  display: grid;
  min-width: 42px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #272936;
}

.xy-agent-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.xy-agent-title img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #e4e2f6;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgb(111 84 225 / 12%);
}

.xy-agent-title span,
.xy-agent-title small {
  display: flex;
}

.xy-agent-title span {
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.xy-agent-title strong,
.xy-agent-title small,
.xy-agent-header-actions small {
  font-size: 15px;
}

.xy-agent-title strong {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-agent-title small {
  align-items: center;
  gap: 5px;
  color: #818391;
  font-size: 15px;
}

.xy-agent-title small i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #41cd78;
  box-shadow: 0 0 0 3px #e8f9ef;
}

.xy-agent-header-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}

.xy-agent-header-actions button {
  height: 48px;
  gap: 0;
  grid-template-rows: 26px 16px;
  color: #555767;
}

.xy-agent-header-actions small {
  font-size: 15px;
  line-height: 1;
}

.xy-agent-transcript-shell {
  position: absolute;
  inset: calc(85px + env(safe-area-inset-top, 0px)) 0 calc(84px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: #f8f7fd;
  overscroll-behavior: contain;
}

.xy-agent-transcript {
  position: absolute;
  inset: 0;
  background: #f8f7fd;
}

.xy-agent-transcript-content {
  min-height: 100%;
  padding: 22px 15px 28px;
  box-sizing: border-box;
}

.xy-agent-loading {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #797b89;
  font-size: 15px;
}

.xy-agent-message {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

.xy-agent-message.is-user {
  justify-content: flex-end;
  padding-left: 54px;
  box-sizing: border-box;
}

.xy-agent-message.is-assistant {
  padding-right: 12px;
  box-sizing: border-box;
}

.xy-agent-message > img {
  margin-top: 24px;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #e4e1f6;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgb(91 66 201 / 6%);
}

.xy-agent-message-column {
  display: grid;
  min-width: 0;
  max-width: min(100%, 360px);
  gap: 9px;
}

.xy-agent-message.is-user .xy-agent-message-column {
  max-width: min(84%, 302px);
  justify-items: end;
}

.xy-agent-message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9697a4;
  line-height: 1;
}

.xy-agent-message.is-user .xy-agent-message-meta {
  flex-direction: row-reverse;
}

.xy-agent-message-meta strong,
.xy-agent-message-meta time {
  font-size: 15px;
}

.xy-agent-message-meta strong {
  color: #363344;
  font-size: 13px;
  font-weight: 600;
}

.xy-agent-message-meta time {
  color: #757281;
  font-size: 11px;
}

.xy-agent-message-bubble {
  position: relative;
  max-width: 100%;
  padding: 13px 15px;
  border: 1px solid #e8e7f0;
  border-radius: 14px;
  background: #fff;
  color: #20212b;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgb(49 45 84 / 4%);
}

.xy-agent-message-bubble::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -6px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-left: 1px solid #e8e7f0;
  border-bottom: 1px solid #e8e7f0;
  transform: rotate(45deg);
  pointer-events: none;
}

.xy-agent-message.is-user .xy-agent-message-bubble {
  border-color: #7357e7;
  border-radius: 14px;
  background: #7558e9;
  color: #fff;
  box-shadow: 0 2px 6px rgb(103 69 216 / 10%);
}

.xy-agent-message.is-user .xy-agent-message-bubble::before {
  left: auto;
  right: -6px;
  border: 0;
  border-top: 1px solid #7357e7;
  border-right: 1px solid #7357e7;
}

.xy-agent-message.is-user .xy-agent-message-bubble p {
  color: #fff;
}

.xy-agent-message-bubble p {
  margin: 0;
  color: #20212b;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.xy-agent-audio-message {
  display: inline-flex;
  width: auto;
  min-width: 112px;
  min-height: 34px;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 1px 2px;
  border: 0;
  background: transparent;
  color: #332b48;
  text-align: right;
  -webkit-tap-highlight-color: transparent;
}

.xy-agent-audio-wave {
  display: flex;
  width: 27px;
  height: 20px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.xy-agent-audio-wave > i {
  display: block;
  width: 3px;
  height: 6px;
  border-radius: 999px;
  background: #7459dd;
  opacity: .76;
  transform-origin: center;
}

.xy-agent-audio-wave > i:nth-child(2),
.xy-agent-audio-wave > i:nth-child(4) { height: 11px; }
.xy-agent-audio-wave > i:nth-child(3) { height: 18px; }

.xy-agent-audio-message > em {
  color: #665d7d;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
}

.xy-agent-audio-message.is-playing .xy-agent-audio-wave > i {
  animation: xyAgentAudioWave .72s ease-in-out infinite alternate;
}
.xy-agent-audio-message.is-playing .xy-agent-audio-wave > i:nth-child(2) { animation-delay: -.56s; }
.xy-agent-audio-message.is-playing .xy-agent-audio-wave > i:nth-child(3) { animation-delay: -.42s; }
.xy-agent-audio-message.is-playing .xy-agent-audio-wave > i:nth-child(4) { animation-delay: -.28s; }
.xy-agent-audio-message.is-playing .xy-agent-audio-wave > i:nth-child(5) { animation-delay: -.14s; }
.xy-agent-audio-message:disabled { opacity: .55; }

@keyframes xyAgentAudioWave {
  from { transform: scaleY(.55); opacity: .48; }
  to { transform: scaleY(1.08); opacity: 1; }
}

.xy-agent-message-files {
  display: grid;
  gap: 7px;
  margin-bottom: 9px;
}

.xy-agent-message-files > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid rgb(93 70 157 / 16%);
  border-radius: 10px;
  background: rgb(255 255 255 / 52%);
}

.xy-agent-message-files b {
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-agent-result-card {
  display: grid;
  width: min(100%, 310px);
  gap: 11px;
  padding: 13px;
  border: 1px solid #e7e3f7;
  border-radius: 17px;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 10px 25px rgb(70 52 142 / 7%);
}

.xy-agent-result-card > header {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #6d54df;
}

.xy-agent-result-card > header > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.xy-agent-result-card > header strong,
.xy-agent-result-card > header small {
  font-size: 15px;
}

.xy-agent-result-card > header strong {
  color: #32333e;
  font-weight: 700;
}

.xy-agent-result-card > header small {
  color: #898b98;
}

.xy-agent-result-groups,
.xy-agent-device-results {
  display: grid;
  gap: 8px;
}

.xy-agent-result-groups details {
  overflow: hidden;
  border: 1px solid #ece9f6;
  border-radius: 14px;
  background: #faf9fe;
}

.xy-agent-result-groups summary {
  display: grid;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: #555765;
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr) auto auto;
  list-style: none;
  box-sizing: border-box;
}

.xy-agent-result-groups summary::-webkit-details-marker {
  display: none;
}

.xy-agent-result-groups summary > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.xy-agent-result-groups summary strong,
.xy-agent-result-groups summary em {
  font-size: 15px;
}

.xy-agent-result-groups summary strong {
  overflow: hidden;
  color: #3d3e49;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-agent-result-groups summary em {
  color: #888a96;
  font-style: normal;
}

.xy-agent-result-groups summary > svg {
  color: #9891bd;
  transition: transform 160ms ease;
}

.xy-agent-result-groups details[open] summary > svg {
  transform: rotate(180deg);
}

.xy-agent-result-groups summary .xy-platform-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 10px;
}

.xy-agent-result-list {
  display: grid;
  gap: 7px;
  padding: 8px;
  border-top: 1px solid #efedf7;
  background: #fff;
}

.xy-agent-result-list > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 53px;
  padding: 8px 10px;
  border: 1px solid #efedf7;
  border-radius: 12px;
  background: #fcfbff;
  box-sizing: border-box;
}

.xy-agent-task-result-main {
  display: flex;
  min-width: 0;
  align-items: center;
  flex: 1;
  gap: 9px;
}

.xy-agent-result-list strong,
.xy-agent-result-list small,
.xy-agent-result-list em {
  font-size: 15px;
}

.xy-agent-task-result-main > i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: linear-gradient(135deg, #8a6df0, #5bd3c6);
  border-radius: 50%;
  box-shadow: 0 0 0 4px #f0edff;
}

.xy-agent-task-result-main > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.xy-agent-result-list strong {
  overflow: hidden;
  color: #40414c;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-agent-result-list small {
  color: #8b8d99;
}

.xy-agent-result-list > div > em {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: #9b9ca6;
  background: #f0f0f3;
  border-radius: 999px;
  font-style: normal;
}

.xy-agent-result-list > div > em.is-online {
  color: #188d57;
  background: #e9f8f0;
}

.xy-agent-device-results > div {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #ece9f6;
  border-radius: 14px;
  background: #faf9fe;
  box-sizing: border-box;
}

.xy-agent-device-results > div > svg {
  flex: 0 0 auto;
  color: #6c55df;
}

.xy-agent-device-results > div > span {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.xy-agent-device-results strong,
.xy-agent-device-results small,
.xy-agent-device-results em {
  font-size: 15px;
}

.xy-agent-device-results strong {
  color: #3f404a;
}

.xy-agent-device-results small {
  color: #8a8c98;
}

.xy-agent-device-results em {
  color: #a1a2aa;
  font-style: normal;
}

.xy-agent-device-results em.is-online {
  color: #21a965;
}

.xy-agent-execution-result dl {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #ece9f6;
  border-radius: 14px;
  background: #ece9f6;
}

.xy-agent-execution-result dl > div {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: #faf9fe;
  grid-template-columns: 58px minmax(0, 1fr);
}

.xy-agent-execution-result dt,
.xy-agent-execution-result dd {
  margin: 0;
  font-size: 15px;
}

.xy-agent-execution-result dt {
  color: #898b98;
}

.xy-agent-execution-result dd {
  color: #41424d;
  overflow-wrap: anywhere;
}

.xy-agent-conversation-proposal {
  display: grid;
  width: min(100%, 286px);
  gap: 11px;
  padding: 13px;
  border: 1px solid #e5e0fa;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(70 52 142 / 7%);
}

.xy-agent-conversation-proposal small,
.xy-agent-conversation-proposal strong,
.xy-agent-conversation-proposal span,
.xy-agent-conversation-proposal em,
.xy-agent-conversation-proposal button {
  font-size: 15px;
}

.xy-agent-conversation-proposal small,
.xy-agent-conversation-proposal em {
  color: #777988;
}

.xy-agent-proposal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.xy-agent-proposal-summary > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.xy-agent-proposal-summary strong {
  color: #343541;
  font-weight: 700;
}

.xy-agent-proposal-summary em {
  font-style: normal;
}

.xy-agent-proposal-summary .xy-platform-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
}

.xy-agent-conversation-proposal > button,
.xy-agent-conversation-retry {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 12px;
  background: #f0edff;
  color: #6046c8;
  font-weight: 700;
}

.xy-agent-conversation-proposal.is-configuring {
  width: min(100%, 310px);
  padding: 12px;
  border-color: #dcd5fb;
  box-shadow: 0 13px 30px rgb(70 52 142 / 10%);
}

.xy-agent-inline-task-config {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #eeebf8;
}

.xy-agent-inline-task-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.xy-agent-inline-task-heading > span {
  display: grid;
  gap: 2px;
}

.xy-agent-inline-task-heading strong {
  color: #343541;
}

.xy-agent-inline-task-heading > button {
  min-height: 34px;
  padding: 5px 10px;
  color: #6751ce;
  background: #f2efff;
  border: 0;
  border-radius: 10px;
}

.xy-agent-inline-task-config :where(button, input, textarea, strong, small, span, p, em, label) {
  font-size: 15px;
}

.xy-agent-inline-task-config .xy-task-target-card :where(button, strong, small, span, p, em),
.xy-agent-inline-task-config .xy-param-card :where(button, input, textarea, strong, small, span, p, em, label),
.xy-agent-inline-task-config .xy-param-accordion :where(button, input, textarea, strong, small, span, p, em, label) {
  font-size: 15px;
}

.xy-agent-inline-task-config .xy-task-target-card,
.xy-agent-inline-task-config .xy-param-card,
.xy-agent-inline-task-config .xy-param-accordion {
  border-color: #ece8fa;
  box-shadow: none;
}

.xy-agent-inline-task-config .xy-task-target-card,
.xy-agent-inline-task-config .xy-param-card {
  padding: 12px;
}

.xy-agent-inline-task-config .xy-param-number-grid {
  grid-template-columns: minmax(0, 1fr);
}

.xy-agent-inline-task-config .xy-param-stepper {
  min-width: 0;
}

.xy-agent-inline-task-confirm {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: linear-gradient(135deg, #7657e8, #5f46cf);
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgb(99 71 209 / 22%);
}

.xy-agent-inline-task-confirm:disabled {
  color: #9693a3;
  background: #ebe9ef;
  box-shadow: none;
}

.xy-agent-typing {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 5px;
  padding: 14px 18px;
  border: 1px solid #e8e7f0;
  border-radius: 5px 18px 18px 18px;
  background: #fff;
}

.xy-agent-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b70ed;
  animation: xyAgentTyping 1.1s ease-in-out infinite;
}

.xy-agent-typing i:nth-child(2) { animation-delay: 120ms; }
.xy-agent-typing i:nth-child(3) { animation-delay: 240ms; }

@keyframes xyAgentTyping {
  50% { opacity: 0.35; transform: translateY(-3px); }
}

.xy-agent-conversation-error {
  margin: 4px 12px 18px 47px;
  padding: 11px 13px;
  border-radius: 13px;
  background: #fff0f1;
  color: #a4404b;
  font-size: 15px;
  line-height: 1.5;
}

.xy-agent-composer {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: 76px;
  grid-template-columns: 104px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 9px;
  padding: 10px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #ececf3;
  background: rgb(255 255 255 / 97%);
  box-sizing: border-box;
  box-shadow: 0 -9px 25px rgb(45 42 75 / 5%);
  backdrop-filter: blur(18px);
}

.xy-agent-composer textarea {
  width: 100%;
  min-height: 48px;
  max-height: 112px;
  resize: none;
  padding: 12px 14px;
  border: 1px solid #e4e3ec;
  border-radius: 16px;
  outline: none;
  background: #f7f7fb;
  color: #272833;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  box-sizing: border-box;
}

.xy-agent-file-input { display: none; }

.xy-agent-pending-files {
  display: flex;
  grid-column: 1 / -1;
  gap: 7px;
  overflow-x: auto;
  padding: 0 1px 2px;
  scrollbar-width: none;
}

.xy-agent-pending-files::-webkit-scrollbar { display: none; }

.xy-agent-pending-files > span {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 17px minmax(60px, 118px) auto 24px;
  min-height: 34px;
  align-items: center;
  gap: 5px;
  padding: 4px 5px 4px 9px;
  border: 1px solid #ddd6f4;
  border-radius: 11px;
  background: #f5f2ff;
  color: #4e4268;
}

.xy-agent-pending-files > span.is-error { border-color: #efc7cc; background: #fff2f3; }
.xy-agent-pending-files b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.xy-agent-pending-files small { color: #7c6e9d; font-size: 10px; white-space: nowrap; }
.xy-agent-pending-files > span > button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #766b8b;
}

.xy-agent-composer-tools {
  display: grid;
  grid-template-columns: repeat(3, 32px);
  align-items: center;
  gap: 4px;
}

.xy-agent-composer-tools > button {
  display: grid;
  width: 32px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: #f0edf9;
  color: #665482;
}

.xy-agent-composer-tools > button.is-active {
  background: #7658ea;
  color: #fff;
  animation: xyAgentRecordingPulse 1.2s ease-in-out infinite;
}

@keyframes xyAgentRecordingPulse {
  50% { box-shadow: 0 0 0 4px rgb(118 88 234 / 14%); }
}

.xy-agent-composer textarea:focus {
  border-color: #9a82ee;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(126 96 227 / 10%);
}

.xy-agent-composer > .xy-agent-send {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #7658ea;
  color: #fff;
  box-shadow: 0 9px 20px rgb(112 66 214 / 22%);
}

.xy-agent-composer > .xy-agent-send:disabled {
  opacity: 0.42;
  box-shadow: none;
}

.xy-agent-history-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  background: rgb(26 24 45 / 38%);
  backdrop-filter: blur(3px);
}

.xy-agent-history {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88%, 370px);
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #fbfbfe;
  box-sizing: border-box;
  box-shadow: -18px 0 44px rgb(27 24 53 / 16%);
  animation: xyAgentHistoryIn 220ms ease-out;
}

@keyframes xyAgentHistoryIn {
  from { transform: translateX(100%); }
}

.xy-agent-history > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.xy-agent-history > header div {
  display: grid;
  gap: 3px;
}

.xy-agent-history > header strong,
.xy-agent-history > header small,
.xy-agent-history-new,
.xy-agent-history-list strong,
.xy-agent-history-list small {
  font-size: 15px;
}

.xy-agent-history > header strong { font-size: 20px; }
.xy-agent-history > header small { color: #858693; }
.xy-agent-history > header button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: #f0eff7;
  color: #545666;
}

.xy-agent-history-new {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 14px;
  border: 0;
  border-radius: 15px;
  background: #ece8ff;
  color: #6248ce;
  font-weight: 700;
}

.xy-agent-history-list {
  display: grid;
  max-height: calc(100% - 126px);
  gap: 9px;
  overflow-y: auto;
}

.xy-agent-history-list > button {
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #ecebf2;
  border-radius: 15px;
  background: #fff;
  color: #2b2c36;
  text-align: left;
}

.xy-agent-history-list > button.is-active {
  border-color: #b5a6ee;
  background: #f5f2ff;
}

.xy-agent-history-list span {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.xy-agent-history-list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-agent-history-list small { color: #92939e; }

@media (max-width: 360px) {
  .xy-agent-conversation-header { padding-right: 8px; padding-left: 8px; }
  .xy-agent-header-actions button { min-width: 38px; }
  .xy-agent-transcript-content { padding-right: 11px; padding-left: 11px; }
  .xy-agent-message.is-assistant { padding-right: 12px; }
  .xy-agent-message.is-user { padding-left: 36px; }
}

.xy-dashboard-features strong,
.xy-dashboard-features small,
.xy-dashboard-features p {
  line-height: 1.2;
}

.xy-dashboard-input-copy small {
  line-height: 1.25;
}

.xy-dashboard-features > button > .is-home-tool-icon {
  overflow: hidden;
  color: #fff;
  border-radius: calc(12 * var(--dash-u));
  box-shadow: 0 calc(8 * var(--dash-u)) calc(18 * var(--dash-u)) rgba(89, 74, 197, .14);
}

.xy-dashboard-features > button > .is-home-tool-icon.is-blue {
  background: linear-gradient(145deg, #39cdf6, #159dec);
}

.xy-dashboard-features > button > .is-home-tool-icon.is-purple {
  background: linear-gradient(145deg, #9b5cf5, #6f3fe1);
}

/* ── AI 搜索增长 / GEO ─────────────────────────────────────────────── */
.xy-geo-overlay {
  position: absolute;
  z-index: 72;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 2%, rgb(185 158 255 / 20%), transparent 25%),
    linear-gradient(180deg, #f8f6ff 0, #f7f7fb 34%, #f7f7fa 100%);
  color: #282538;
}

.xy-geo-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  min-height: 68px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: rgb(255 255 255 / 88%);
  box-sizing: content-box;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgb(110 88 177 / 8%);
}

.xy-geo-header > button,
.xy-geo-header-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 15px;
}

.xy-geo-header > button {
  background: #f0edfa;
  color: #4c4565;
}

.xy-geo-header-mark {
  background: linear-gradient(145deg, #efe9ff, #e3ecff);
  color: #6d52dc;
}

.xy-geo-header > div {
  min-width: 0;
  text-align: center;
}

.xy-geo-header h1,
.xy-geo-header small {
  margin: 0;
}

.xy-geo-header h1 {
  font-size: 19px;
  line-height: 1.35;
}

.xy-geo-header small {
  display: block;
  overflow: hidden;
  color: #8b8799;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-geo-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 14px 10px;
  background: rgb(255 255 255 / 88%);
}

.xy-geo-tabs button {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #7f7b8c;
  font-size: 14px;
  font-weight: 700;
}

.xy-geo-tabs button.is-active {
  background: #ede8ff;
  color: #6548d8;
  box-shadow: inset 0 0 0 1px rgb(119 85 223 / 8%);
}

.xy-geo-scroll {
  min-height: 0;
}

.xy-geo-content {
  display: grid;
  gap: 14px;
  padding: 15px 14px calc(30px + env(safe-area-inset-bottom, 0px));
}

.xy-geo-request-state,
.xy-geo-empty-profile,
.xy-geo-empty-list,
.xy-geo-metric-empty {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 34px 22px;
  border: 1px solid #ece8f5;
  border-radius: 22px;
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 34px rgb(51 37 91 / 6%);
}

.xy-geo-request-state > svg,
.xy-geo-empty-profile > span,
.xy-geo-empty-list > svg,
.xy-geo-metric-empty > svg {
  color: #7658e4;
}

.xy-geo-empty-profile > span {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 21px;
  background: #eee9ff;
}

.xy-geo-request-state strong,
.xy-geo-empty-profile h2,
.xy-geo-empty-list strong,
.xy-geo-metric-empty h3 {
  margin: 0;
  font-size: 18px;
}

.xy-geo-request-state p,
.xy-geo-empty-profile p,
.xy-geo-empty-list p,
.xy-geo-metric-empty p {
  margin: 0;
  color: #7f7b8c;
  font-size: 14px;
  line-height: 1.65;
}

.xy-geo-empty-profile > button,
.xy-geo-empty-list > button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: #7356df;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.xy-geo-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #f1d8d7;
  border-radius: 15px;
  background: #fff5f4;
  color: #a44643;
  font-size: 13px;
  line-height: 1.45;
}

.xy-geo-error button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #8f3e3b;
  font-weight: 700;
}

.xy-geo-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 11px 12px;
  padding: 18px;
  border: 1px solid rgb(118 84 222 / 10%);
  border-radius: 23px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 94%), rgb(245 241 255 / 96%)),
    #fff;
  box-shadow: 0 14px 35px rgb(74 50 142 / 9%);
}

.xy-geo-overview-copy {
  min-width: 0;
}

.xy-geo-overview-copy small {
  color: #8c849e;
  font-size: 12px;
  font-weight: 700;
}

.xy-geo-overview-copy h2 {
  overflow: hidden;
  margin: 2px 0 3px;
  font-size: 22px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-geo-overview-copy p {
  overflow: hidden;
  margin: 0;
  color: #777184;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xy-geo-overview > button {
  align-self: start;
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 11px;
  background: #ece6ff;
  color: #664bd0;
  font-size: 13px;
  font-weight: 700;
}

.xy-geo-overview dl {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  margin: 2px 0 0;
  border: 1px solid #ece8f5;
  border-radius: 16px;
  background: rgb(255 255 255 / 74%);
}

.xy-geo-overview dl div {
  display: grid;
  gap: 1px;
  padding: 10px 6px;
  text-align: center;
}

.xy-geo-overview dl div + div {
  border-left: 1px solid #ece8f5;
}

.xy-geo-overview dt {
  color: #6248d0;
  font-size: 19px;
  font-weight: 800;
}

.xy-geo-overview dd {
  margin: 0;
  color: #8a8695;
  font-size: 12px;
}

.xy-geo-overview > p {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: #827c90;
  font-size: 12px;
  line-height: 1.55;
}

.xy-geo-overview > p svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #6d55cf;
}

.xy-geo-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

.xy-geo-section-heading > div {
  min-width: 0;
}

.xy-geo-section-heading small {
  color: #8067d8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
}

.xy-geo-section-heading h2 {
  margin: 2px 0 3px;
  font-size: 18px;
  line-height: 1.35;
}

.xy-geo-section-heading p {
  margin: 0;
  color: #888492;
  font-size: 12px;
  line-height: 1.45;
}

.xy-geo-section-heading > button {
  display: flex;
  flex: 0 0 auto;
  min-height: 38px;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #7356df;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgb(104 75 208 / 19%);
}

.xy-geo-section-heading > button:disabled,
.xy-geo-opportunity-card > button:disabled {
  opacity: .58;
}

.xy-geo-opportunity-list,
.xy-geo-brief-list {
  display: grid;
  gap: 11px;
}

.xy-geo-opportunity-card,
.xy-geo-brief-card,
.xy-geo-next-stage,
.xy-geo-connectors article {
  border: 1px solid #ebe8f2;
  background: #fff;
  box-shadow: 0 10px 28px rgb(42 34 70 / 5%);
}

.xy-geo-opportunity-card {
  display: grid;
  gap: 9px;
  padding: 15px;
  border-radius: 19px;
}

.xy-geo-opportunity-card header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xy-geo-opportunity-card header span {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.xy-geo-opportunity-card header span.is-high { background: #efe8ff; color: #6a47d8; }
.xy-geo-opportunity-card header span.is-medium { background: #eaf4ff; color: #3477ad; }
.xy-geo-opportunity-card header span.is-low { background: #f0f0f3; color: #73717b; }

.xy-geo-opportunity-card header em {
  color: #8b8795;
  font-size: 11px;
  font-style: normal;
}

.xy-geo-opportunity-card h3 {
  margin: 0;
  color: #2c283a;
  font-size: 16px;
  line-height: 1.5;
}

.xy-geo-opportunity-card > p {
  margin: 0;
  color: #777381;
  font-size: 13px;
  line-height: 1.6;
}

.xy-geo-opportunity-card > button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  border: 0;
  border-radius: 13px;
  background: #f0ecff;
  color: #654bd0;
  font-size: 13px;
  font-weight: 800;
}

.xy-geo-stale {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ac6b32;
  font-size: 11px;
}

.xy-geo-brief-card {
  overflow: hidden;
  padding: 15px;
  border-radius: 19px;
}

.xy-geo-brief-card > header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.xy-geo-brief-card > header > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  background: #eee9ff;
  color: #6c50d8;
}

.xy-geo-brief-card > header div {
  min-width: 0;
}

.xy-geo-brief-card > header small {
  color: #7b61d5;
  font-size: 11px;
  font-weight: 800;
}

.xy-geo-brief-card h3 {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.45;
}

.xy-geo-brief-card > p {
  margin: 11px 0 0;
  color: #65616d;
  font-size: 13px;
  line-height: 1.65;
}

.xy-geo-brief-toggle {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  margin-top: 11px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: #f6f4fa;
  color: #635c70;
  font-size: 13px;
  font-weight: 700;
}

.xy-geo-brief-toggle svg {
  transition: transform 180ms ease;
}

.xy-geo-brief-toggle svg.is-open { transform: rotate(180deg); }

.xy-geo-brief-detail {
  display: grid;
  gap: 11px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid #efedf3;
}

.xy-geo-brief-detail section {
  padding: 11px 12px;
  border-radius: 13px;
  background: #f8f7fb;
}

.xy-geo-brief-detail section.is-warning {
  background: #fff7ed;
  color: #875a2e;
}

.xy-geo-brief-detail strong {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}

.xy-geo-brief-detail ol,
.xy-geo-brief-detail ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 20px;
}

.xy-geo-brief-detail li,
.xy-geo-brief-detail section p {
  color: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.xy-geo-next-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 17px;
}

.xy-geo-next-stage > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 13px;
  background: #f0eef5;
  color: #777181;
}

.xy-geo-next-stage strong,
.xy-geo-connectors strong {
  font-size: 14px;
}

.xy-geo-next-stage p {
  margin: 3px 0 0;
  color: #85818e;
  font-size: 12px;
  line-height: 1.45;
}

.xy-geo-next-stage em,
.xy-geo-connectors em {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f1f0f3;
  color: #7d7983;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.xy-geo-metric-empty {
  padding: 27px 20px;
}

.xy-geo-connectors {
  display: grid;
  gap: 9px;
}

.xy-geo-connectors article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border-radius: 16px;
}

.xy-geo-connectors article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: #efebff;
  color: #684dd4;
}

.xy-geo-connectors article div {
  display: grid;
  gap: 3px;
}

.xy-geo-connectors small {
  color: #87838f;
  font-size: 11px;
  line-height: 1.4;
}

.xy-geo-truth-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 10px 11px;
  border-radius: 12px;
  background: #f0f7f4;
  color: #587168;
  font-size: 11px;
  line-height: 1.55;
}

.xy-geo-truth-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

@media (max-width: 360px) {
  .xy-geo-header { padding-right: 10px; padding-left: 10px; }
  .xy-geo-content { padding-right: 11px; padding-left: 11px; }
  .xy-geo-overview { padding: 15px; }
  .xy-geo-section-heading { align-items: flex-start; }
  .xy-geo-section-heading > button { padding: 0 9px; }
}


.xy-phone-task-card {
  display: flex; flex-direction: column; width: min(100%, 440px); min-width: 0;
  box-sizing: border-box; gap: 0; padding: 0; overflow: hidden; color: #363347;
  border: 1px solid #e5e0f3; border-radius: 20px; background: #fff;
  box-shadow: 0 8px 28px rgb(67 45 115 / 5%);
}
.xy-phone-task-card :where(p, h4, h5, ul, ol) { margin: 0; }
.xy-phone-task-card :where(p, li, label) { font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.xy-phone-task-card p { white-space: pre-wrap; color: #292634; }
.xy-phone-task-card small { font-size: 11px; line-height: 1.6; color: #817a96; }
.xy-phone-plan-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 14px; background: linear-gradient(120deg, #f4f0ff, #fafaff); }
.xy-phone-plan-header > div { display: grid; gap: 4px; }
.xy-phone-plan-header strong { font-size: 18px; letter-spacing: -.3px; color: #302748; }
.xy-phone-task-card .xy-phone-plan-state { flex-shrink: 0; padding: 4px 9px; border-radius: 20px; background: #fff; color: #7753c8; font-size: 11px; font-weight: 600; }
.xy-phone-task-card[data-state="completed"] .xy-phone-plan-state { color: #26825c; background: #e9f8f1; }
.xy-phone-task-card[data-state="failed"] .xy-phone-plan-state { color: #a25a25; background: #fff2e7; }
.xy-phone-plan-overview { padding: 15px 18px 18px; }
.xy-phone-plan-overview p { margin-top: 9px; font-weight: 500; }
.xy-phone-plan-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xy-phone-task-card .xy-phone-plan-tags span { padding: 3px 8px; border-radius: 6px; background: #f5f4f8; color: #716a82; font-size: 11px; }
.xy-phone-plan-goals { display: grid; gap: 12px; padding: 0 12px; }
.xy-phone-plan-goal { min-width: 0; border: 1px solid #eeebf4; border-radius: 14px; overflow: hidden; }
.xy-phone-plan-goal > header { display: flex; gap: 10px; padding: 14px 13px; background: #fbfaff; }
.xy-phone-plan-goal > header > div { min-width: 0; }
.xy-phone-task-card .xy-phone-plan-number { display: grid; flex: 0 0 27px; height: 27px; place-items: center; border-radius: 8px; background: #ede6ff; color: #7853c2; font-size: 11px; font-weight: 700; }
.xy-phone-plan-goal h4 { margin: 1px 0 4px; font-size: 14px; line-height: 1.6; font-weight: 650; }
.xy-phone-plan-process { padding: 12px 13px; }
.xy-phone-plan-route-hint { margin: 10px 0; color: #666078; font-size: 12px; line-height: 1.6; }
.xy-phone-task-card summary { cursor: pointer; font-size: 12px; line-height: 1.6; color: #6c6280; }
.xy-phone-task-card summary::marker { color: #a49ab6; }
.xy-phone-task-card summary > span { margin-left: 5px; font-size: 11px; font-weight: 400; color: #9b93a9; }
.xy-phone-plan-process ol { list-style: none; display: grid; gap: 9px; padding: 12px 0 0; }
.xy-phone-plan-process li { display: flex; align-items: flex-start; gap: 9px; }
.xy-phone-plan-process li > span { flex: 0 0 19px; display: grid; place-items: center; height: 19px; margin-top: 2px; border-radius: 50%; background: #f3f1f8; color: #8a809a; font-size: 10px; }
.xy-phone-plan-process li > p { flex: 1; min-width: 0; font-size: 13px; color: #393443; }
.xy-phone-plan-acceptance { padding: 12px 13px; border-top: 1px solid #eeebf4; background: #fafbfc; }
.xy-phone-plan-acceptance h5 { margin: 0 0 7px; color: #596d66; font-size: 11px; font-weight: 650; }
.xy-phone-plan-acceptance ul { padding-left: 15px; display: grid; gap: 4px; }
.xy-phone-plan-acceptance li { font-size: 13px; color: #36443f; }
.xy-phone-plan-acceptance li::marker { color: #9cb5a9; }
.xy-phone-plan-acceptance small { display: block; margin-top: 7px; color: #85928d; }
.xy-phone-task-card .xy-phone-plan-hint { padding: 12px 18px; font-size: 11px; line-height: 1.7; color: #948aa3; }
.xy-phone-plan-details { margin: 0 18px; padding: 11px 0; border-top: 1px solid #f0edf5; }
.xy-phone-plan-details p, .xy-phone-plan-details ul { margin-top: 9px; font-size: 12px; color: #82798f; }
.xy-phone-plan-details ul { padding-left: 17px; }
.xy-phone-plan-details li { font-size: 12px; }
.xy-phone-plan-status { display: flex; align-items: flex-start; gap: 8px; margin: 10px 18px 16px; }
.xy-phone-plan-status > span { flex: 0 0 6px; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: #ab91d5; }
.xy-phone-plan-status p { font-size: 12px; color: #81758e; }
.xy-phone-plan-confirm { padding: 15px 18px; border-top: 1px solid #ece7f5; background: #fcfbff; display: grid; gap: 12px; }
.xy-phone-plan-confirm label { display: grid; gap: 7px; font-size: 12px; color: #695c7e; }
.xy-phone-plan-confirm > small { text-align: center; font-size: 10px; }
.xy-phone-plan-revise > summary { color: #795ab0; font-weight: 600; }
.xy-phone-plan-revise label { margin-top: 10px; }
.xy-phone-task-card textarea, .xy-phone-task-card select { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #e5deef; border-radius: 10px; padding: 11px; background: #fff; color: #4f425f; font: inherit; font-size: 13px; }
.xy-phone-task-card textarea { min-height: 90px; resize: vertical; }
.xy-phone-task-card :where(button, summary, textarea, select):focus-visible { outline: 2px solid #9a78d4; outline-offset: 3px; }
.xy-phone-task-card .xy-phone-task-action { width: 100%; min-height: 44px; box-sizing: border-box; margin: 0; border: 0; border-radius: 11px; padding: 11px; color: #fff; background: #7955c7; font-size: 13px; font-weight: 600; }
.xy-phone-task-card .xy-phone-task-action.is-secondary { margin-top: 9px; color: #7855ad; background: #eee8f8; }
.xy-phone-task-card .xy-phone-task-action.is-status { margin: 0; border-radius: 0; min-height: 40px; background: #fff; color: #9285a5; font-size: 11px; font-weight: 400; }
.xy-phone-task-card .xy-phone-task-action:disabled { opacity: .45; cursor: not-allowed; }
.xy-phone-task-card .xy-phone-task-error { margin: 0; padding: 10px 18px 15px; background: #fff7f6; color: #a34c46; font-size: 12px; }

/* A user-ended run is a normal termination; keep its reason visible. */
.xy-exec-badge.is-stopped { color: #26825c; background: #e9f8f1; }

/* Conversation hierarchy uses size, weight, spacing and surfaces; text stays black. */
.xy-agent-conversation-page .xy-agent-message .xy-agent-message-column :is(p, strong, small, em, time, span, h4, h5, li, label, summary, button, select, textarea) {
  color: #000;
}
.xy-agent-conversation-page .xy-agent-message .xy-agent-audio-wave > i { color: transparent; }
.xy-agent-conversation-page .xy-agent-message .xy-agent-audio-message > em { color: #665d7d; }
.xy-agent-conversation-page .xy-agent-message-bubble.is-audio-only {
  padding: 7px 11px;
  border-radius: 17px;
  background: linear-gradient(135deg, #f0ebff 0%, #e6dcff 100%);
  border-color: #d8caf8;
}

.xy-agent-conversation-page:has(.xy-agent-pending-files) .xy-agent-transcript-shell {
  bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}
.xy-agent-conversation-page .xy-agent-message-bubble {
  padding: 16px 18px;
  border-radius: 16px;
  color: #000;
  box-shadow: none;
}
.xy-agent-conversation-page .xy-agent-message-bubble p {
  color: #000;
  font-weight: 400;
  line-height: 1.8;
}
.xy-agent-conversation-page .xy-agent-message.is-user .xy-agent-message-bubble {
  background: #eee8ff;
  border-color: #dbcef7;
  color: #000;
  box-shadow: none;
}
.xy-agent-conversation-page .xy-agent-message.is-user .xy-agent-message-bubble::before {
  border-color: #dbcef7;
}
.xy-agent-conversation-page .xy-agent-message-meta {
  min-height: 18px;
  margin-bottom: 2px;
}
.xy-agent-conversation-page .xy-agent-message-meta strong { font-size: 14px; font-weight: 700; }
.xy-agent-conversation-page .xy-agent-message-meta time { font-size: 11px; font-weight: 400; }
.xy-agent-conversation-page .xy-agent-message > img { margin-top: 30px; }
.xy-agent-conversation-page .xy-agent-message { margin-bottom: 30px; }
.xy-agent-conversation-page .xy-agent-conversation-retry {
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid #dcd2f5;
  background: #f2edff;
  font-size: 14px;
}
.xy-agent-conversation-retry::after,
.xy-phone-task-action:not(.is-secondary):not(.is-status)::after { content: "→"; margin-left: 12px; font-size: 20px; }
.xy-agent-conversation-page .xy-phone-task-card {
  width: 100%;
  margin-top: 5px;
  border-color: #ded9e9;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgb(30 20 50 / 4%);
}
.xy-agent-conversation-page .xy-phone-plan-header {
  padding: 18px;
  border-top: 4px solid #7955c7;
  border-bottom: 1px solid #ede9f5;
  background: #fff;
}
.xy-agent-conversation-page .xy-phone-plan-header strong { font-size: 21px; font-weight: 750; line-height: 1.4; }
.xy-agent-conversation-page .xy-phone-plan-header small { font-size: 11px; }
.xy-agent-conversation-page .xy-phone-plan-state { background: #eee8ff; border: 1px solid #ded2f8; }
.xy-agent-conversation-page .xy-phone-plan-overview {
  margin: 16px;
  padding: 14px;
  border-left: 3px solid #7955c7;
  border-radius: 0 10px 10px 0;
  background: #f6f3fc;
}
.xy-agent-conversation-page .xy-phone-plan-overview p { font-size: 16px; line-height: 1.8; font-weight: 500; }
.xy-agent-conversation-page .xy-phone-plan-tags span { background: #fff; border: 1px solid #e5dff1; }
.xy-agent-conversation-page .xy-phone-plan-goals { gap: 18px; padding: 0 16px; }
.xy-agent-conversation-page .xy-phone-plan-goal { border-color: #e5e1ec; border-radius: 12px; }
.xy-agent-conversation-page .xy-phone-plan-goal > header { padding: 16px 14px; border-bottom: 1px solid #e9e4f2; background: #f7f5fc; }
.xy-agent-conversation-page .xy-phone-plan-goal h4 { font-size: 17px; font-weight: 750; line-height: 1.5; }
.xy-agent-conversation-page .xy-phone-plan-number { flex-basis: 30px; height: 30px; font-size: 13px; background: #e7dcfc; }
.xy-agent-conversation-page .xy-phone-plan-process { padding: 16px 14px; }
.xy-agent-conversation-page .xy-phone-task-card summary { font-size: 14px; font-weight: 700; }
.xy-agent-conversation-page .xy-phone-plan-process ol { gap: 14px; padding-top: 14px; }
.xy-agent-conversation-page .xy-phone-plan-process li { gap: 10px; }
.xy-agent-conversation-page .xy-phone-plan-process li > span { flex-basis: 22px; height: 22px; font-size: 12px; background: #eee8fa; }
.xy-agent-conversation-page .xy-phone-plan-process li > p { font-size: 15px; line-height: 1.8; }
.xy-agent-conversation-page .xy-phone-plan-acceptance { padding: 14px; background: #f0f7f3; }
.xy-agent-conversation-page .xy-phone-plan-acceptance h5 { font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.xy-agent-conversation-page .xy-phone-plan-acceptance li { font-size: 14px; line-height: 1.8; }
.xy-agent-conversation-page .xy-phone-task-card .xy-phone-plan-hint { padding: 16px; font-size: 12px; }
.xy-agent-conversation-page .xy-phone-plan-details { margin: 0 16px; padding: 14px 0; }
.xy-agent-conversation-page .xy-phone-plan-details :is(p, li) { font-size: 14px; }
.xy-agent-conversation-page .xy-phone-plan-confirm { padding: 18px 16px; gap: 16px; border-top: 2px solid #e4dbf5; background: #f7f4fc; }
.xy-agent-conversation-page .xy-phone-plan-confirm label { font-size: 14px; font-weight: 600; }
.xy-agent-conversation-page .xy-phone-task-action { min-height: 48px; background: #e4d8fc; border: 1px solid #c9b4ed; font-size: 15px; font-weight: 700; }
.xy-agent-conversation-page .xy-phone-task-action.is-secondary { background: #fff; }
.xy-agent-conversation-page .xy-phone-task-action.is-status { background: #fff; border: 0; border-top: 1px solid #ece7f4; font-size: 12px; font-weight: 400; }
.xy-agent-conversation-page .xy-phone-task-action:disabled { opacity: 1; background: #f0edf4; border-color: #ded9e6; border-style: dashed; }

.xy-phone-execution-logs { margin: 16px; border: 1px solid #ded7eb; border-radius: 12px; background: #fff; overflow: hidden; }
.xy-phone-execution-logs > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px; background: #f3eefc; border-bottom: 1px solid #e5dcf1; }
.xy-agent-conversation-page .xy-phone-execution-logs h4 { font-size: 16px; font-weight: 750; margin: 0 0 4px; }
.xy-agent-conversation-page .xy-phone-execution-logs button { min-height: 36px; padding: 7px 10px; border: 1px solid #d6c7eb; border-radius: 8px; background: #fff; font-size: 12px; white-space: nowrap; }
.xy-phone-execution-logs .xy-phone-log-scroll { position: relative; height: 300px; max-height: 42dvh; }
.xy-phone-execution-logs ol { list-style: none; padding: 4px 12px; margin: 0; }
.xy-phone-execution-logs li { position: relative; padding: 12px 0 12px 15px; border-bottom: 1px solid #eeeaf4; }
.xy-phone-execution-logs li::before { content: ""; position: absolute; top: 18px; left: 0; width: 6px; height: 6px; background: #8b68bd; border-radius: 50%; }
.xy-phone-execution-logs li[data-level="error"]::before { background: #c64d43; }
.xy-phone-execution-logs li[data-level="warn"]::before { background: #bd8328; }
.xy-phone-execution-logs li > div { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.xy-agent-conversation-page .xy-phone-execution-logs time { font-size: 11px; font-variant-numeric: tabular-nums; }
.xy-agent-conversation-page .xy-phone-execution-logs li span { font-size: 11px; border: 1px solid #eadaca; border-radius: 4px; padding: 1px 5px; background: #fff6e8; }
.xy-agent-conversation-page .xy-phone-execution-logs li p { font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Intelligent-agent catalog, based on the supplied Xiaoling mobile reference. */
.xy-agent-catalog-scroll {
  min-height: 100%;
  padding-top: 18px !important;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(ellipse 75% 30% at 68% 16%, #f2f2ff 0%, rgba(255,255,255,0) 72%), #fff;
}
.xy-agent-catalog { color: #080913; }
.xy-agent-catalog-hero {
  position: relative;
  display: flex;
  min-height: 84px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 7px;
}
.xy-agent-hero-sparkle { position: absolute; color: #fff; filter: drop-shadow(0 1px 8px rgba(149, 138, 230, .25)); }
.xy-agent-hero-sparkle.is-first { top: 25px; left: 58%; }
.xy-agent-hero-sparkle.is-second { top: 43px; left: 64%; }
.xy-agent-catalog-title strong {
  display: block;
  color: #050610;
  font-size: clamp(39px, 11.2vw, 49px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1.09;
  white-space: nowrap;
}
.xy-agent-catalog-title strong span {
  color: #873af4;
  text-shadow: 0 3px 12px rgba(118, 68, 235, .19);
}
.xy-agent-catalog-title p {
  margin: 3px 0 0;
  color: #8991a8;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 600;
  white-space: nowrap;
}
.xy-agent-catalog-note {
  position: relative;
  margin: 3px 3px 0 0;
  color: #211b96;
  font-family: "KaiTi", "STKaiti", cursive;
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  transform: rotate(-11deg);
  white-space: nowrap;
}
.xy-agent-catalog-note span {
  display: block;
  height: 10px;
  margin-top: -1px;
  font-size: 38px;
  font-weight: 400;
  line-height: .2;
  transform: rotate(-6deg);
}
.xy-agent-catalog-search {
  display: flex;
  height: 45px;
  align-items: center;
  gap: 13px;
  margin: 10px 3px 0;
  padding: 0 15px;
  background: rgba(255,255,255,.96);
  border-radius: 28px;
  box-shadow: 0 9px 27px rgba(93, 85, 175, .105);
}
.xy-agent-catalog-search > svg { flex: 0 0 auto; color: #344165; }
.xy-agent-catalog-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: #26324e;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 15px;
}
.xy-agent-catalog-search input::placeholder { color: #8993ac; opacity: 1; }
.xy-agent-catalog-search button { display: grid; flex: 0 0 auto; place-items: center; padding: 0; background: transparent; border: 0; }
.xy-agent-search-clear { color: #9ba2b4; font-size: 22px; }
.xy-agent-catalog-search .xy-agent-search-voice {
  width: 36px;
  height: 28px;
  margin-left: 1px;
  color: #7138f0;
  border-left: 1px solid #d8dded;
  padding-left: 10px;
}
.xy-agent-categories { margin: 11px 3px 0; }
.xy-agent-category-track { display: flex; gap: 7px; }
.xy-agent-category-track button,
.xy-agent-more-categories button {
  display: flex;
  min-width: 0;
  height: 37px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 17px;
  color: #26314e;
  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 7px 19px rgba(85, 83, 142, .075);
  font-size: 14px;
  white-space: nowrap;
}
.xy-agent-category-track button:first-child { min-width: 76px; }
.xy-agent-category-track button.is-active,
.xy-agent-more-categories button.is-active { color: #fff; background: linear-gradient(115deg, #a278ff, #6249f3); }
.xy-agent-category-track button.is-open svg { transform: rotate(180deg); }
.xy-agent-more-categories { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 3px 0; }
.xy-agent-more-categories button { height: 32px; font-size: 12px; }
.xy-agent-list-section { margin-top: 14px; }
.xy-agent-list-section h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 7px 3px;
  color: #07070d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}
.xy-agent-list-section h1 span { width: 4px; height: 16px; background: #7440f6; border-radius: 4px; }
.xy-agent-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 5px; }
.xy-agent-catalog-card {
  position: relative;
  display: flex;
  min-width: 0;
  height: 159px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 0 4px;
  color: #05050a;
  background: transparent;
  border: 0;
  text-align: center;
}
.xy-agent-catalog-card:active { transform: scale(.98); }
.xy-agent-portrait { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 128px; overflow: hidden; mask-image: linear-gradient(#000 72%, transparent 100%); }
.xy-agent-portrait img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center top; }
.xy-agent-catalog-card.is-digital .xy-agent-portrait img,
.xy-agent-catalog-card.is-daily .xy-agent-portrait img { object-position: center 5%; }
.xy-agent-card-icon {
  position: absolute;
  z-index: 1;
  top: 35px;
  right: 4px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #7959ed;
  background: linear-gradient(140deg, rgba(239,233,255,.96), rgba(218,209,255,.82));
  border-radius: 13px;
  box-shadow: 0 7px 19px rgba(103, 75, 202, .11);
  transform: rotate(11deg);
}
.xy-agent-catalog-card.is-meeting .xy-agent-card-icon,
.xy-agent-catalog-card.is-insights .xy-agent-card-icon { top: 38px; right: 7px; transform: rotate(-8deg); }
.xy-agent-catalog-card.is-digital .xy-agent-card-icon,
.xy-agent-catalog-card.is-daily .xy-agent-card-icon { top: 42px; right: 1px; border-radius: 50%; transform: none; }
.xy-agent-catalog-card strong,
.xy-agent-catalog-card small { position: relative; z-index: 2; display: block; max-width: 100%; white-space: nowrap; }
.xy-agent-catalog-card strong { font-size: 18px; font-weight: 800; letter-spacing: -.5px; line-height: 1.28; }
.xy-agent-catalog-card small { margin-top: 2px; color: #5c6885; font-size: 13px; line-height: 1.25; }
.xy-agent-catalog-empty { display: flex; min-height: 230px; align-items: center; justify-content: center; flex-direction: column; color: #6d5adb; text-align: center; }
.xy-agent-catalog-empty strong { margin-top: 8px; color: #202039; font-size: 17px; }
.xy-agent-catalog-empty p { margin: 4px 0 10px; color: #717b93; font-size: 13px; }
.xy-agent-catalog-empty button { padding: 8px 13px; color: white; background: #7652ed; border: 0; border-radius: 14px; }
.xy-agent-catalog-tip {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 8px 0 0;
  padding: 6px 10px;
  color: #9a70f5;
  background: linear-gradient(100deg, #f7f6ff, #f3f4ff);
  border: 1px solid #fff;
  border-radius: 19px;
  box-shadow: 0 5px 15px rgba(99, 90, 167, .07);
  text-align: left;
}
.xy-agent-catalog-tip span { display: flex; flex-direction: column; }
.xy-agent-catalog-tip strong { color: #1a1d32; font-size: 12px; font-weight: 700; line-height: 1.3; }
.xy-agent-catalog-tip small { margin-top: 2px; color: #7b85a0; font-size: 11px; line-height: 1.3; }
@media (max-width: 370px) {
  .xy-agent-category-track button { padding: 0 13px; }
  .xy-agent-catalog-title strong { font-size: 39px; }
  .xy-agent-catalog-note { font-size: 12px; }
  .xy-agent-catalog-card { height: 150px; }
  .xy-agent-catalog-card strong { font-size: 16px; }
  .xy-agent-catalog-card small { font-size: 11px; }
}
.xy-phone-execution-logs > footer { padding: 9px 12px; background: #faf9fc; border-top: 1px solid #eeeaf4; }
.xy-agent-conversation-page .xy-phone-log-empty { padding: 16px 12px; font-size: 13px; }
.xy-phone-log-error { padding: 12px; background: #fff5ed; }
.xy-agent-conversation-page .xy-phone-log-error p { font-size: 13px; margin-bottom: 8px; }

.xy-conversation-log-view { padding: 0 4px 12px; color: #000; }
.xy-conversation-log-view > label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; color: #000; }
.xy-conversation-log-view select { width: 100%; min-width: 0; border: 1px solid #dcd2ec; border-radius: 10px; padding: 12px; background: #fff; color: #000; font: inherit; }
.xy-conversation-log-view > p { margin: 12px 0; font-size: 13px; color: #000; }
.xy-conversation-log-view .xy-phone-execution-logs { margin: 0; }
.xy-conversation-log-view .xy-phone-log-scroll { height: 240px; max-height: 30dvh; }
.xy-conversation-log-view .xy-phone-execution-logs :is(p, h4, small, span, time, button, li) { color: #000; }
.xy-conversation-log-view .xy-phone-execution-logs h4 { margin: 0 0 4px; font-size: 16px; }
.xy-conversation-log-view .xy-phone-execution-logs button { padding: 8px 10px; border: 1px solid #d6c7eb; border-radius: 8px; background: #fff; font-size: 12px; white-space: nowrap; }
.xy-conversation-log-view .xy-phone-execution-logs li p { margin: 0; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.xy-conversation-log-view .xy-phone-execution-logs time { font-size: 11px; }
.xy-conversation-log-view .xy-phone-log-empty, .xy-conversation-log-view .xy-phone-log-error { padding: 14px; font-size: 13px; }
.xy-agent-header-actions { flex-shrink: 0; }

.xy-agent-message-column > .xy-phone-execution-logs { margin: 4px 0 0; width: 100%; box-sizing: border-box; border-radius: 16px; }
.xy-phone-log-follow { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 6px; }
.xy-phone-execution-logs .xy-phone-log-follow button { min-height: 32px; padding: 5px 10px; background: #eee7fb; }
.xy-customer-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 28px;
}

.xy-customer-page > .xy-card {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #efeff8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 23px rgba(104, 87, 203, .055);
}

.xy-customer-page::before,
.xy-customer-page > .xy-card::before { display: none; }

.xy-customer-page .xy-phone-manager.is-compact {
  min-height: 99px;
  padding: 8px 14px 4px;
  background: linear-gradient(163deg, #fff 45%, #faf9ff 100%);
}

.xy-customer-page .xy-phone-manager .xy-section-heading {
  min-height: 22px;
  padding: 0;
}

.xy-customer-page .xy-phone-manager .xy-section-heading > div { gap: 7px; }
.xy-customer-page .xy-phone-manager .xy-step-label { display: none !important; }
.xy-customer-page .xy-phone-manager .xy-section-heading h2 {
  margin: 0;
  color: #171823;
  font-size: 14px;
  font-weight: 700;
}
.xy-customer-page .xy-phone-manager .xy-section-heading > div > span {
  color: #9396a8;
  font-size: 10px;
}
.xy-customer-page .xy-phone-manager .xy-section-heading > div > span i {
  width: 6px;
  height: 6px;
  background: #24bf83;
}
.xy-customer-page .xy-phone-manager .xy-section-heading button {
  min-height: 25px;
  color: #7b7f94;
  font-size: 10px;
}
.xy-customer-page .xy-phone-carousel { margin-top: 4px; }
.xy-customer-page .xy-phone-track { padding: 0 2px; }
.xy-customer-page .xy-phone-manager.is-compact .xy-phone-option {
  width: 178px;
  min-height: 52px;
  height: 52px;
  gap: 9px;
  padding: 4px 10px;
  border-color: #eeeefa;
  border-radius: 12px;
  background: #fff;
}
.xy-customer-page .xy-phone-manager.is-compact .xy-phone-option.is-selected {
  border-color: #c9c0ff;
  background: #fbfaff;
  box-shadow: 0 3px 9px rgba(117, 91, 218, .12);
}
.xy-customer-page .xy-phone-manager.is-compact .xy-phone-device {
  width: 38px;
  height: 38px;
  color: #775df0;
  border-radius: 10px;
  background: #f6f3ff;
}
.xy-customer-page .xy-phone-device svg { width: 28px; height: 28px; }
.xy-customer-page .xy-phone-option strong { color: #2d2d36; font-size: 12px; }
.xy-customer-page .xy-phone-option small { margin-top: 5px; font-size: 9px; }
.xy-customer-page .xy-phone-check { top: 5px; right: 6px; }
.xy-customer-page .xy-phone-empty.is-compact { margin-top: 6px; }

.xy-customer-page .xy-customer-platforms {
  min-height: 224px;
  padding: 10px 14px 7px;
}
.xy-customer-heading { display: flex; min-height: 22px; align-items: center; gap: 8px; }
.xy-customer-heading h2 { margin: 0; color: #171823; font-size: 14px; line-height: 1.3; font-weight: 700; }
.xy-customer-heading > span {
  padding: 3px 8px;
  color: #8a84ad;
  border-radius: 999px;
  background: #f4f2ff;
  font-size: 9px;
}
.xy-customer-categories,
.xy-customer-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}
.xy-customer-categories button,
.xy-customer-filters button {
  min-width: 55px;
  height: 23px;
  padding: 0 11px;
  color: #8f94aa;
  border: 0;
  border-radius: 999px;
  background: #f4f5fa;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}
.xy-customer-categories button.is-active { color: #6650d6; background: #eeeaff; }
.xy-customer-platform-grid {
  display: grid;
  gap: 8px;
  margin-top: 11px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xy-customer-platform-grid button {
  position: relative;
  display: flex;
  min-width: 0;
  height: 63px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 6px 2px;
  color: #20212b;
  border: 1px solid #f0f0f8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(85, 79, 143, .035);
}
.xy-customer-platform-grid button.is-selected {
  border-color: #a89bff;
  background: #fcfbff;
  box-shadow: 0 2px 5px rgba(107, 83, 218, .16);
}
.xy-customer-platform-grid .xy-platform-icon {
  width: 33px;
  height: 33px;
  border-radius: 9px;
  background: transparent;
}
.xy-customer-platform-grid .xy-platform-icon svg { width: 28px; height: 28px; }
.xy-customer-platform-grid strong { overflow: hidden; max-width: 100%; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.xy-customer-platform-check { position: absolute; top: 3px; right: 3px; color: #7259e7; }
.xy-customer-platform-empty { display: grid; min-height: 138px; place-items: center; color: #9698aa; font-size: 11px; }
.xy-customer-platform-dot { width: 4px; height: 4px; margin: 3px auto 0; border-radius: 50%; background: #8068f1; }

.xy-customer-page .xy-customer-tasks { padding: 10px 13px 15px; }
.xy-customer-filters { gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.xy-customer-filters::-webkit-scrollbar { display: none; }
.xy-customer-filters button { min-width: 0; height: 20px; padding: 0 10px; font-size: 9px; }
.xy-customer-filters button.is-active { color: #fff; background: #6b56e9; box-shadow: 0 2px 5px rgba(96, 76, 218, .16); }
.xy-customer-task-grid { display: grid; gap: 8px; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xy-customer-task {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 66px;
  align-items: start;
  gap: 4px 7px;
  padding: 9px 8px;
  color: #262631;
  text-align: left;
  border: 1px solid #f0effa;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(85, 79, 143, .035);
  grid-template-columns: 34px minmax(0, 1fr);
}
.xy-customer-task-art { display: grid; width: 34px; height: 40px; place-items: center; color: #8669f3; }
.xy-customer-task:nth-child(5n + 2) .xy-customer-task-art { color: #f04c83; }
.xy-customer-task:nth-child(5n + 3) .xy-customer-task-art { color: #60a2f4; }
.xy-customer-task:nth-child(5n + 4) .xy-customer-task-art { color: #37a9db; }
.xy-customer-task:nth-child(5n + 5) .xy-customer-task-art { color: #19b778; }
.xy-customer-task-content { display: flex; min-width: 0; flex-direction: column; padding-right: 35px; }
.xy-customer-task-content strong { overflow: hidden; color: #262631; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.xy-customer-task-content small { display: flex; align-items: center; gap: 2px; margin-top: 3px; color: #55596b; font-size: 8px; }
.xy-customer-task-content .xy-platform-icon { width: 13px; height: 13px; border-radius: 3px; background: transparent; }
.xy-customer-task-content em { overflow: hidden; margin-top: 4px; color: #9296aa; font-size: 8px; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.xy-customer-task-state { position: absolute; top: 9px; right: 8px; padding: 3px 5px; color: #7566dd; border-radius: 6px; background: #f0edff; font-size: 8px; font-weight: 700; }
.xy-customer-task-state.is-running { color: #4384cc; background: #eaf3ff; }
.xy-customer-task-state.is-completed { color: #26a86e; background: #e9f9f1; }
.xy-customer-task-state.is-stopped { color: #df608b; background: #fff0f4; }
.xy-customer-task-state.is-pending { color: #8a8e9e; background: #f1f2f6; }
.xy-customer-task-action { position: absolute; right: 8px; bottom: 7px; display: grid; width: 23px; height: 23px; place-items: center; color: #6e56e8; border: 1px solid #eeeaff; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(107, 89, 207, .09); }
.xy-customer-task-empty { display: grid; min-height: 118px; margin-top: 10px; place-items: center; color: #9295a5; font-size: 11px; }

@media (max-width: 370px) {
  .xy-customer-page .xy-customer-platforms { padding-right: 9px; padding-left: 9px; }
  .xy-customer-platform-grid { gap: 5px; }
  .xy-customer-categories { gap: 4px; }
  .xy-customer-categories button { min-width: 0; padding: 0 9px; }
  .xy-customer-task-grid { gap: 6px; }
  .xy-customer-task { padding-right: 5px; padding-left: 5px; }
}

.xy-invite-entry {
  display: flex;
  width: 100%;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 13px 16px;
  color: #4e3aaa;
  text-align: left;
  border: 1px solid #ddd5fa;
  border-radius: 20px;
  background: linear-gradient(110deg, #f4f0ff, #fff 80%);
  box-shadow: 0 9px 23px rgba(81, 60, 167, .08);
}
.xy-invite-entry-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 15px;
  background: #e9e1ff;
}
.xy-invite-entry-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.xy-invite-entry-copy strong { color: #302958; font-size: 16px; line-height: 1.3; }
.xy-invite-entry-copy small { margin-top: 4px; color: #786f92; font-size: 11px; line-height: 1.35; }
.xy-invite-entry > svg { flex: 0 0 auto; }

.xy-referral-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0 18px;
  padding: 15px 3px;
  border: 1px solid #e7e3f5;
  border-radius: 18px;
  background: #fff;
}
.xy-referral-overview > div {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid #eeeaf6;
}
.xy-referral-overview > div:last-child { border-right: 0; }
.xy-referral-overview strong { color: #46329d; font-size: 21px; line-height: 1.2; }
.xy-referral-overview span { color: #777188; font-size: 11px; }
.xy-referral-main-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid #ebe7f8;
  border-radius: 14px;
  background: #f0edfa;
}
.xy-referral-main-tabs button {
  min-height: 42px;
  color: #716a81;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  font-weight: 650;
}
.xy-referral-main-tabs button.is-active {
  color: #583ec7;
  background: #fff;
  box-shadow: 0 4px 12px rgba(71, 53, 140, .1);
}
.xy-referral-main-tabs + .xy-referral-section,
.xy-referral-main-tabs + .xy-referral-balance { margin-top: 13px; }
.xy-referral-balance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.xy-referral-balance > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 14px;
  color: #6b51d7;
  border: 1px solid #e7e2f8;
  border-radius: 15px;
  background: #fff;
}
.xy-referral-balance span { display: flex; min-width: 0; flex-direction: column; color: #777087; font-size: 11px; }
.xy-referral-balance strong { margin-top: 4px; color: #302653; font-size: 18px; }

/* Keep the catalog artwork between the shared app header and navigation. */
.xy-agent-catalog-scroll,
.h5-mode .xy-agent-catalog-scroll,
.h5-mode .mobile-app-viewport[data-platform="android"] .xy-agent-catalog-scroll {
  width: 100%;
  min-height: 0;
  padding-top: calc(25 * var(--dash-u)) !important;
  padding-right: calc(12 * var(--dash-u)) !important;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: calc(12 * var(--dash-u)) !important;
  margin: 0;
  background: #fff;
}
.xy-agent-catalog-scroll .xy-brand-header { margin-bottom: calc(22 * var(--dash-u)) !important; }
.xy-agent-reference {
  position: relative;
  width: calc(100% + 24 * var(--dash-u));
  margin-left: calc(-12 * var(--dash-u));
  aspect-ratio: 853 / 1554;
  overflow: hidden;
  container-type: inline-size;
  background: #fff;
}
.xy-agent-reference-art {
  position: absolute;
  top: calc(-150 * (100cqw / 853));
  left: 0;
  width: 100%;
  aspect-ratio: 853 / 1844;
}
.xy-agent-reference-image { display: block; width: 100%; height: auto; max-width: none; pointer-events: none; }
.xy-agent-hotspot { position: absolute; z-index: 2; display: block; padding: 0; background: transparent; border: 0; border-radius: 8px; }
.xy-agent-hotspot:focus-visible { outline: 2px solid #7149ea; outline-offset: -2px; }
.xy-agent-hotspot.is-menu { left: 3.5%; top: 2.2%; width: 8%; height: 6.2%; }
.xy-agent-hotspot.is-brand { left: 12.5%; top: 1.7%; width: 54%; height: 7%; }
.xy-agent-hotspot.is-profile { right: 2.8%; top: 1.6%; width: 12%; height: 7.1%; border-radius: 50%; }
.xy-agent-reference-input {
  position: absolute;
  z-index: 2;
  top: 20.8%;
  left: 16%;
  width: 65%;
  height: 5.3%;
  padding: 0 3px;
  color: #34415d;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  font-size: clamp(14px, 3.5vw, 17px);
}
.xy-agent-reference-input.has-value { background: #fff; }
.xy-agent-reference-clear { position: absolute; z-index: 3; top: 21.3%; left: 75%; width: 6%; height: 4%; padding: 0; color: #8c94ae; background: #fff; border: 0; font-size: 22px; }
.xy-agent-hotspot.is-voice { right: 4%; top: 20.9%; width: 9%; height: 5.2%; }
.xy-agent-hotspot.is-category { top: 27.3%; height: 4.7%; border-radius: 24px; }
.xy-agent-hotspot.is-category-0 { left: 4.2%; width: 18.5%; }
.xy-agent-hotspot.is-category-1 { left: 24.2%; width: 17.2%; }
.xy-agent-hotspot.is-category-2 { left: 42.8%; width: 17.3%; }
.xy-agent-hotspot.is-category-3 { left: 61.2%; width: 17.3%; }
.xy-agent-hotspot.is-more { top: 27.3%; right: 4%; width: 17%; height: 4.7%; border-radius: 24px; }
.xy-agent-reference-more { position: absolute; z-index: 5; top: 32.1%; right: 4%; display: flex; flex-direction: column; gap: 3px; padding: 7px; background: #fff; border-radius: 13px; box-shadow: 0 9px 26px rgba(46,35,110,.18); }
.xy-agent-reference-more button { min-height: 34px; padding: 5px 14px; color: #28334e; background: #f9f8ff; border: 0; border-radius: 9px; font-size: 14px; }
.xy-agent-hotspot.is-card { width: 45%; height: 19%; border-radius: 14px; }
.xy-agent-hotspot.is-video { left: 5%; top: 35.6%; }
.xy-agent-hotspot.is-meeting { right: 4%; top: 35.6%; }
.xy-agent-hotspot.is-digital { left: 5%; top: 55%; }
.xy-agent-hotspot.is-insights { right: 4%; top: 55%; }
.xy-agent-hotspot.is-daily { left: 5%; top: 74.2%; }
.xy-agent-hotspot.is-publisher { right: 4%; top: 74.2%; }
.xy-agent-hotspot.is-tip { left: 3%; bottom: .4%; width: 94%; height: 5.7%; border-radius: 19px; }
.xy-agent-reference-results { position: absolute; z-index: 3; top: 33.3%; right: 3%; bottom: 6.3%; left: 3%; overflow: auto; padding: 18px 12px; background: #fff; border-radius: 13px; box-shadow: 0 2px 15px rgba(79,64,151,.08); }
.xy-agent-reference-results h1 { margin: 0 0 14px; color: #121323; font-size: 20px; }
.xy-agent-reference-result-list { display: grid; gap: 8px; }
.xy-agent-reference-result-list button { display: flex; min-height: 83px; align-items: center; gap: 12px; padding: 8px; color: #25243a; background: #faf9ff; border: 1px solid #eeeafc; border-radius: 13px; text-align: left; }
.xy-agent-reference-result-list img { width: 62px; height: 66px; object-fit: cover; object-position: center top; }
.xy-agent-reference-result-list span { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.xy-agent-reference-result-list strong { font-size: 17px; }
.xy-agent-reference-result-list small { color: #68728d; font-size: 13px; }
.xy-agent-reference-empty { display: flex; min-height: 70%; align-items: center; justify-content: center; flex-direction: column; color: #7954eb; text-align: center; }
.xy-agent-reference-empty strong { margin-top: 9px; color: #24233a; font-size: 17px; }
.xy-agent-reference-empty p { margin: 7px 0 15px; color: #727b94; font-size: 13px; }
.xy-agent-reference-empty button { padding: 9px 14px; color: white; background: #7654ed; border: 0; border-radius: 12px; }
/* The catalog is composed of real text and independent portrait assets. */
.xy-agent-catalog { min-height: 100%; padding: 0 2px 18px; color: #11152f; background: #fff; }
.xy-agent-catalog-hero { min-height: 70px; padding: 0 2px; }
.xy-agent-catalog-title strong { font-size: clamp(36px, 9.8vw, 45px); }
.xy-agent-catalog-title p { font-size: clamp(14px, 3.6vw, 16px); }
.xy-agent-catalog-note { margin-top: 6px; font-size: clamp(12px, 3.2vw, 15px); }
.xy-agent-catalog-search {
  height: 44px;
  min-height: 44px;
  margin: 9px 0 0;
  border: 1px solid #eceaf4;
  background: #fff;
  box-shadow: 0 5px 18px rgba(49, 44, 86, .06);
}
.xy-referral-manual-copy{display:grid;gap:6px;grid-column:1/-1;color:#674fbb;font-size:11px;font-weight:700}.xy-referral-manual-copy input{width:100%;min-width:0;padding:9px 10px;border:1px solid #cfc5f5;border-radius:9px;background:#fff;color:#29213f;font-size:12px;user-select:text;-webkit-user-select:text}
.xy-agent-categories { margin: 11px -2px 0; }
.xy-agent-category-track { flex-wrap: nowrap; gap: 7px; overflow-x: auto; padding: 0 2px 4px; scrollbar-width: none; }
.xy-agent-category-track::-webkit-scrollbar { display: none; }
.xy-agent-category-track button,
.xy-agent-more-categories button { flex: 0 0 auto; height: 34px; border: 1px solid #efedf5; box-shadow: none; }
.xy-agent-list-section { margin-top: 10px; }
.xy-agent-list-section h1 { margin: 0 3px 5px; font-size: 17px; }
.xy-agent-card-grid { gap: 9px 12px; }
.xy-agent-catalog-card {
  height: auto;
  min-height: 148px;
  justify-content: flex-start;
  gap: 1px;
  padding: 0 2px 2px;
  overflow: visible;
  background: #fff;
}
.xy-agent-portrait {
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 108px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 82%, transparent 100%);
  mask-image: linear-gradient(#000 82%, transparent 100%);
}
.xy-agent-portrait img {
  width: min(100%, 128px);
  height: 120px;
  object-fit: contain;
  object-position: center bottom;
}
.xy-agent-catalog-card.is-viral-remake .xy-agent-portrait {
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 95%, #eee8ff 0%, #f8f5ff 55%, #fff 80%);
}
.xy-agent-catalog-card.is-viral-remake .xy-agent-portrait img {
  width: min(100%, 136px);
  height: 124px;
  object-fit: contain;
  object-position: center bottom;
}
.xy-agent-catalog-card.is-character-swap .xy-agent-portrait {
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 95%, #eee8ff 0%, #f8f5ff 55%, #fff 80%);
}
.xy-agent-catalog-card.is-character-swap .xy-agent-portrait img {
  width: min(100%, 136px);
  height: 124px;
  object-fit: contain;
  object-position: center bottom;
}
.xy-agent-card-skeleton-grid { pointer-events: none; }
.xy-agent-card-skeleton { min-height: 148px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 2px 2px; }
.xy-agent-card-skeleton span { display: block; background: linear-gradient(90deg, #f3f1f7 20%, #faf9fc 50%, #f3f1f7 80%); background-size: 200% 100%; animation: xy-agent-skeleton-shimmer 1.5s ease-in-out infinite; }
.xy-agent-skeleton-portrait { width: 100%; height: 108px; border-radius: 12px; }
.xy-agent-skeleton-title { width: 60%; height: 17px; border-radius: 5px; }
.xy-agent-skeleton-detail { width: 86%; height: 12px; border-radius: 4px; }
@keyframes xy-agent-skeleton-shimmer { to { background-position-x: -200%; } }
@media (prefers-reduced-motion: reduce) { .xy-agent-card-skeleton span { animation: none; } }
.xy-agent-catalog-card:is(.is-fashion, .is-ecommerce, .is-dressup) .xy-agent-portrait img { object-fit: cover; object-position: center 15%; }
.xy-agent-card-with-share { position: relative; min-width: 0; }
.xy-agent-card-with-share > .xy-agent-catalog-card { width: 100%; }
.xy-agent-card-share { position: absolute; top: 6px; right: 6px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e9e4fb; border-radius: 50%; background: #fffffff0; color: #7452ed; box-shadow: 0 2px 8px #4931a026; }
.xy-agent-card-share:focus-visible { outline: 2px solid #7452ed; outline-offset: 2px; }
.xy-agent-catalog-card strong { font-size: clamp(15px, 4vw, 18px); }
.xy-agent-catalog-card small { font-size: clamp(11px, 2.8vw, 12px); white-space: normal; }
.xy-agent-catalog-tip {
  min-height: 48px;
  margin-top: 16px;
  border: 1px solid #efedf5;
  background: #fff;
  box-shadow: none;
}
@media (max-width: 370px) {
  .xy-agent-card-grid { row-gap: 8px; column-gap: 8px; }
  .xy-agent-catalog-card { min-height: 142px; }
  .xy-agent-portrait { height: 102px; }
  .xy-agent-portrait img { width: min(100%, 122px); height: 116px; }
}

/* Video Guide overlay, notice, and authenticated history. */
.xy-video-guide {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: auto;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.xy-video-guide-history .xy-video-guide-hit { position: absolute; padding: 0; border: 0; background: transparent; }
.xy-video-guide-notice { position: absolute; z-index: 7; left: 9%; right: 9%; bottom: 11%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; color: #30245d; background: #fff; box-shadow: 0 7px 26px rgba(45,35,91,.2); border-radius: 14px; font-size: 13px; line-height: 1.4; }
.xy-video-guide-notice button { flex: none; color: #6e4def; background: none; border: 0; font-size: 21px; }
.xy-video-guide-history-inner { display: flex; flex-direction: column; width: min(100%, 427px); height: 100%; min-height: 0; background: #fff; }
.xy-video-guide-history-inner > header { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 8px 18px 8px 58px; border-bottom: 1px solid #f0eef8; }
.xy-video-guide-history-inner > header .is-back { left: 9px; top: 8px; width: 42px; height: 48px; color: #24253e; font-size: 34px; line-height: 1; }
.xy-video-guide-history-inner > header h1 { margin: 0; color: #20203a; font-size: 19px; }
.xy-video-guide-history-inner > header > button:last-child { padding: 8px 12px; color: #6b4ce6; background: #f2eeff; border: 0; border-radius: 12px; font-size: 13px; }
.xy-video-guide-history-content { flex: 1; min-height: 0; overflow: auto; }

/* Video Guide uses independent image assets and responsive, editable UI. */
.xy-vg-page { position: relative; display: flex; flex-direction: column; width: min(100%, 427px); height: 100dvh; min-height: 0; overflow: hidden; container-type: inline-size; background: #fff; color: #11152f; font-family: "Noto Sans SC", sans-serif; }
.xy-vg-header { display: flex; flex: none; align-items: center; gap: 6px; min-height: 64px; margin-top: 15px; padding: 0 13px; }
.xy-vg-page.is-screen-2 .xy-vg-header,
.xy-vg-page.is-screen-4 .xy-vg-header { margin-top: 46px; }
.xy-vg-page.is-screen-3 .xy-vg-header { margin-top: 7px; }
.xy-vg-header button { padding: 0; background: none; border: 0; color: #1f2644; }
.xy-vg-back { flex: none; display: grid; place-items: center; width: 32px; height: 48px; }
.xy-vg-header-avatar { width: 49px; height: 49px; border-radius: 50%; }
.xy-vg-header-name { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 2px; white-space: nowrap; }
.xy-vg-header-name strong { color: #0f1127; font-size: clamp(17px, 4.6cqw, 21px); font-weight: 700; line-height: 1.3; }
.xy-vg-header-name small { color: #7b829f; font-size: clamp(10px, 2.8cqw, 12px); line-height: 1.4; }
.xy-vg-budget { display: flex; flex: none; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid #e8e2ff; border-radius: 26px; color: #7249e6; background: #faf8ff; }
.xy-vg-budget > span { display: flex; flex-direction: column; line-height: 1.12; }
.xy-vg-budget small { color: #8279ab; font-size: 8px; }
.xy-vg-budget b { font-size: 14px; letter-spacing: -.4px; }
.xy-vg-works { display: flex; flex: none; flex-direction: column; align-items: center; gap: 0; width: 37px; }
.xy-vg-works span { font-size: 11px; }
.xy-vg-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.xy-vg-content::-webkit-scrollbar { display: none; }
.xy-vg-welcome { display: flex; align-items: center; flex-direction: column; min-height: 100%; padding: 26px 12px 10px; }
.xy-vg-hero-portrait { width: 190px; height: 168px; background: #fff; -webkit-mask-image: radial-gradient(ellipse 80% 86% at 50% 45%, #000 46%, transparent 96%); mask-image: radial-gradient(ellipse 80% 86% at 50% 45%, #000 46%, transparent 96%); }
.xy-vg-hero-portrait img { filter: brightness(1.055) contrast(1.045); }
.xy-vg-welcome h1 { margin: 12px 0 0; color: #0b1030; font-size: clamp(35px, 9.5cqw, 41px); font-weight: 700; letter-spacing: -1.8px; line-height: 1.23; white-space: nowrap; }
.xy-vg-welcome-subtitle { margin: 7px 0 0; color: #7c829e; font-size: clamp(16px, 4.5cqw, 19px); line-height: 1.4; white-space: nowrap; }
.xy-vg-mode-grid { display: grid; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 30px; }
.xy-vg-mode-grid button { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 0 3px; min-height: 86px; padding: 10px 7px; color: #11162d; text-align: center; border: 0; border-radius: 20px; background: linear-gradient(155deg,#f4f2ff,#f7f7fc); }
.xy-vg-mode-grid button.is-selected { box-shadow: inset 0 0 0 1.5px #9876ef; }
.xy-vg-mode-grid button:nth-child(1) svg { color: #8958e7; }
.xy-vg-mode-grid button:nth-child(2) svg { color: #3f91ed; }
.xy-vg-mode-grid button:nth-child(3) svg { color: #d447cd; }
.xy-vg-mode-grid button strong { font-size: clamp(12px,3.4cqw,15px); white-space: nowrap; }
.xy-vg-mode-grid button small { grid-column: 1 / -1; color: #717b99; font-size: clamp(9px,2.65cqw,11px); white-space: nowrap; }
.xy-vg-selected-materials { margin: 8px 0 -9px; color: #6b52d9; font-size: 12px; }
.xy-vg-welcome-materials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: 16px; }
.xy-vg-welcome-materials > div { position: relative; height: 56px; overflow: hidden; background: #f4f1ff; border-radius: 9px; }
.xy-vg-welcome-materials img, .xy-vg-welcome-materials video { width: 100%; height: 100%; object-fit: cover; }
.xy-vg-welcome-materials button { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: #fff; background: #2b2940dc; border: 0; border-radius: 50%; font-size: 20px; touch-action: manipulation; }
.xy-vg-help { display: flex; align-items: center; gap: 2px; margin-top: 18px; padding: 5px; color: #6a4ce5; background: none; border: 0; font-size: 16px; font-weight: 650; }
.xy-vg-idea { display: flex; align-items: flex-start; gap: 11px; width: 100%; margin-top: 40px; padding: 0; text-align: left; background: none; border: 0; }
.xy-vg-chat-avatar { width: 43px; height: 43px; border-radius: 50%; }
.xy-vg-idea > span:last-child { display: flex; flex: 1; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 19px; color: #26304e; background: #f4f2ff; font-size: 14px; line-height: 1.45; }
.xy-vg-idea strong { color: #6949e5; font-size: 14px; font-weight: 600; }
.xy-vg-composer { display: flex; flex: none; align-items: center; gap: 8px; min-height: 69px; padding: 7px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); }
.xy-vg-composer button { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; }
.xy-vg-add { color: #17213e; background: #f1f2f9; }
.xy-vg-composer input { flex: 1; min-width: 0; height: 49px; padding: 0 15px; color: #25304d; background: #fff; border: 1px solid #e0e1ee; border-radius: 28px; font-size: 15px; outline: 0; }
.xy-vg-composer input::placeholder { color: #b4b8c9; }
.xy-vg-composer input:focus { border-color: #a78af4; }
.xy-vg-mic { color: #fff; background: linear-gradient(135deg,#7a48f2,#497ef6 48%,#e94bd9); box-shadow: 0 3px 12px rgba(122,73,231,.29); }
.xy-vg-example-tag { display: block; width: fit-content; max-width: 100%; margin: 7px auto 0; padding: 3px 9px; color: #7867ae; background: #f7f5ff; border-radius: 18px; font-size: 10px; line-height: 1.4; }
.xy-vg-advice { padding: 0 18px 24px; }
.xy-vg-advice > .xy-vg-example-tag { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; }
.xy-vg-user-row { display: flex; align-items: flex-start; justify-content: flex-end; gap: 7px; margin-top: 20px; }
.xy-vg-user-row > span:first-child { max-width: 75%; padding: 11px 15px; border-radius: 17px; color: #171a34; background: #eeebff; font-size: 17px; line-height: 1.55; }
.xy-vg-materials { margin-top: 15px; padding: 13px 14px; border: 1px solid #f0eff8; border-radius: 15px; background: #fff; box-shadow: 0 4px 15px rgba(53,45,100,.04); }
.xy-vg-materials-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 12px; }
.xy-vg-materials-head strong { font-size: 15px; }
.xy-vg-materials-head small { color: #989bb0; font-size: 10px; font-weight: 400; }
.xy-vg-materials-head button { display: flex; align-items: center; gap: 2px; flex: none; padding: 0; color: #6546e3; background: none; border: 0; font-size: 13px; }
.xy-vg-material-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.xy-vg-material { position: relative; height: 120px; overflow: hidden; border-radius: 8px; }
.xy-vg-material > img, .xy-vg-material > video { width: 100%; height: 100%; object-fit: cover; }
.xy-vg-remove-asset { position: absolute; z-index: 2; top: 4px; right: 4px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #fff; background: rgba(21,20,35,.86); border: 0; border-radius: 50%; font-size: 22px; touch-action: manipulation; }
.xy-vg-material > span:last-child { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; padding: 5px; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.58)); font-size: 11px; }
.xy-vg-material > span:last-child { gap: 3px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xy-vg-add-tile { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; height: 120px; padding: 0; color: #6745e6; background: #f1f0ff; border: 0; border-radius: 8px; font-size: 12px; }
.xy-vg-assistant-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; }
.xy-vg-assistant-row p { flex: 1; margin: 0; padding: 11px 15px; color: #15172d; background: #fff; border-radius: 17px; box-shadow: 0 3px 15px rgba(39,42,84,.04); font-size: 17px; line-height: 1.55; }
.xy-vg-choice { margin-top: 21px; }
.xy-vg-choice h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.xy-vg-choice > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.xy-vg-choice button { height: 47px; padding: 0 3px; color: #343d60; background: #fff; border: 1px solid #e0e3ef; border-radius: 25px; font-size: clamp(11px,3.4cqw,14px); white-space: nowrap; }
.xy-vg-choice button.is-selected { color: #6a4be4; border-color: #895ff0; background: #faf8ff; font-weight: 650; }
.xy-vg-primary { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 53px; color: #fff; background: linear-gradient(115deg,#b186f5,#664af0); border: 0; border-radius: 20px; font-size: 17px; font-weight: 650; }
.xy-vg-advice > .xy-vg-primary { margin-top: 24px; }
.xy-vg-plan { padding: 0 16px 320px; }
.xy-vg-plan .xy-vg-user-row { margin-top: 13px; }
.xy-vg-plan .xy-vg-user-row > span:first-child { font-size: 16px; padding-top: 9px; padding-bottom: 9px; }
.xy-vg-plan .xy-vg-assistant-row { margin-top: 12px; }
.xy-vg-plan .xy-vg-assistant-row p { font-size: 16px; padding-top: 9px; padding-bottom: 9px; }
.xy-vg-storyboard { margin-top: 9px; padding: 14px 12px; border: 1px solid #efedf7; border-radius: 18px; background: #fff; box-shadow: 0 5px 18px rgba(41,43,91,.05); }
.xy-vg-storyboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 3px; margin-bottom: 12px; }
.xy-vg-storyboard-head h1 { margin: 0; font-size: clamp(17px,4.6cqw,20px); white-space: nowrap; }
.xy-vg-storyboard-head p { margin: 3px 0 0; color: #7a829c; font-size: 12px; white-space: nowrap; }
.xy-vg-storyboard-head button { display: flex; align-items: center; flex: none; gap: 1px; padding: 5px; color: #6d4ce8; background: #f8f6ff; border: 0; border-radius: 12px; font-size: 10px; }
.xy-vg-shot { display: flex; align-items: flex-start; gap: 9px; min-height: 92px; margin-top: 5px; padding: 7px; border: 1px solid #eceef5; border-radius: 12px; }
.xy-vg-shot-preview { display: grid; place-items: center; flex: none; width: 105px; height: 78px; overflow: hidden; color: #987aec; background: #f4f1ff; border-radius: 7px; }
.xy-vg-shot-preview img, .xy-vg-shot-preview video { width: 100%; height: 100%; object-fit: cover; }
.xy-vg-shot-no { flex: none; color: #ab85ed; font-size: 19px; font-weight: 700; }
.xy-vg-shot > div { min-width: 0; }
.xy-vg-shot strong { display: block; font-size: 15px; }
.xy-vg-shot small { display: block; margin-top: 2px; color: #7f839b; font-size: 13px; }
.xy-vg-shot p { margin: 5px 0 0; color: #8b91a7; font-size: 12px; line-height: 1.4; }
.xy-vg-settings { position: absolute; z-index: 3; right: 0; bottom: 65px; left: 0; display: flex; flex-direction: column; padding: 0 17px 10px; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 27px rgba(71,61,123,.08); }
.xy-vg-settings-handle { width: 36px; height: 4px; margin: 7px auto 4px; background: #e0e1eb; border-radius: 5px; }
.xy-vg-settings-title { display: flex; align-items: center; justify-content: space-between; min-height: 39px; }
.xy-vg-settings-title h2 { margin: 0; font-size: 16px; }
.xy-vg-settings-title button { width: 30px; height: 30px; color: #1d233f; background: none; border: 0; font-size: 26px; line-height: 1; }
.xy-vg-settings-list { border: 1px solid #edf0f5; border-radius: 13px; overflow: hidden; }
.xy-vg-settings-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 11px; color: #151a32; background: #fff; border: 0; border-bottom: 1px solid #eef0f5; text-align: left; }
.xy-vg-settings-list button:last-of-type { border-bottom: 0; }
.xy-vg-settings-list button strong { flex: 1; font-size: 14px; font-weight: 550; }
.xy-vg-settings-list button span { color: #8990a9; font-size: 13px; }
.xy-vg-more-note { margin: 5px 11px; color: #8389a2; font-size: 10px; }
.xy-vg-estimate { margin: 7px 0; color: #858ba1; text-align: center; font-size: 11px; }
.xy-vg-estimate strong { color: #704eec; }
.xy-vg-settings .xy-vg-primary { min-height: 38px; border-radius: 10px; font-size: 15px; }
.xy-vg-result { padding: 0 17px 22px; }
.xy-vg-result .xy-vg-example-tag { position: absolute; z-index: 2; top: 10px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; }
.xy-vg-result-poster { position: relative; width: 78%; aspect-ratio: 615 / 823; margin: 0 auto; border-radius: 14px; overflow: hidden; }
.xy-vg-result-poster > video { display: block; width: 100%; height: 100%; background: #111; object-fit: contain; }
.xy-vg-result-poster > button { position: absolute; top: 52.7%; left: 52%; display: grid; place-items: center; width: 83px; height: 83px; transform: translate(-50%,-50%); color: #fff; background: #2b2b2f; border: 0; border-radius: 50%; }
.xy-vg-result-poster > span { position: absolute; right: 7px; bottom: 10px; display: grid; place-items: center; width: 65px; height: 28px; color: #fff; background: #303034; border-radius: 17px; font-size: 13px; }
.xy-vg-result-status { display: flex; align-items: center; gap: 8px; margin: 9px 0 7px; color: #596079; font-size: 12px; }
.xy-vg-result-status i { width: 8px; height: 8px; background: #63d13c; border-radius: 50%; }
.xy-vg-result-actions { display: flex; align-items: center; gap: 7px; }
.xy-vg-result-actions h1 { flex: 1; margin: 0; font-size: 19px; white-space: nowrap; }
.xy-vg-result-actions button { display: flex; align-items: center; gap: 4px; min-height: 37px; padding: 0 10px; color: #6e4fe7; background: #fff; border: 1px solid #e5defb; border-radius: 12px; font-size: 13px; }
.xy-vg-result-actions button:last-child { color: #fff; background: #6c4fee; border-color: #6c4fee; }
.xy-vg-result-cost { margin: 11px 0 22px; color: #7e849d; font-size: 12px; }
.xy-vg-revision-user { width: fit-content; max-width: 83%; margin-left: auto; padding: 12px 16px; color: #171a34; background: #ece9ff; border-radius: 16px; font-size: 15px; }
.xy-vg-result .xy-vg-assistant-row { margin-top: 16px; }
.xy-vg-result .xy-vg-assistant-row p { font-size: 15px; }
.xy-vg-revision-confirm { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 14px; padding: 8px 9px; border: 1px solid #f0eff8; border-radius: 16px; }
.xy-vg-revision-confirm > span { display: flex; align-items: center; gap: 5px; color: #777e98; font-size: 11px; }
.xy-vg-revision-confirm svg { color: #9d65e9; }
.xy-vg-revision-confirm button { flex: none; min-height: 37px; padding: 0 12px; color: #fff; background: #6d4aed; border: 0; border-radius: 19px; font-size: 13px; }
.xy-vg-send { color: #fff; background: #6d4aed; }
.xy-vg-primary:disabled, .xy-vg-help:disabled, .xy-vg-send:disabled { cursor: wait; opacity: .65; }
.xy-vg-remix-hint { margin: 16px 24px; color: #616785; font-size: 14px; line-height: 1.55; }
.xy-vg-remix-plan { padding-bottom: 18px; }
.xy-vg-remix-param-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.xy-vg-remix-param-list span { padding: 8px 10px; border-radius: 999px; background: #f2efff; color: #5743b6; font-size: 12px; }
.xy-vg-remix-unsupported { margin: 14px 0 0; color: #9c512b; font-size: 13px; line-height: 1.5; }

/* Video Guide layout: the reference is a mobile screen, not a bitmap canvas. */
.xy-video-guide {
  overflow: hidden;
  align-items: stretch;
  background: #fff;
}
.xy-vg-page {
  --vg-side: clamp(14px, 4cqw, 25px);
  width: 100%;
  max-width: 600px;
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  background: #fff;
}
.xy-video-guide-history-inner { width: 100%; max-width: 600px; margin-inline: auto; }
.xy-vg-header,
.xy-vg-page.is-screen-2 .xy-vg-header,
.xy-vg-page.is-screen-3 .xy-vg-header,
.xy-vg-page.is-screen-4 .xy-vg-header {
  gap: clamp(6px, 1.6cqw, 12px);
  min-height: clamp(76px, 10dvh, 96px);
  margin-top: 0;
  padding: max(9px, env(safe-area-inset-top, 0px)) var(--vg-side) 6px;
}
.xy-vg-back { width: clamp(28px, 7cqw, 38px); height: 48px; }
.xy-vg-header-avatar,
.xy-vg-chat-avatar {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: #f0ebff;
}
.xy-vg-header-avatar { width: clamp(42px, 11cqw, 56px); height: clamp(42px, 11cqw, 56px); }
.xy-vg-chat-avatar { width: clamp(37px, 10cqw, 48px); height: clamp(37px, 10cqw, 48px); }
.xy-vg-header-avatar img,
.xy-vg-chat-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  user-select: none;
}
.xy-vg-user-avatar { object-fit: cover; background: #ece8f6; }
.xy-vg-header-name { flex: 1 1 auto; white-space: normal; }
.xy-vg-header-name strong { font-size: clamp(16px, 4.3cqw, 22px); }
.xy-vg-header-name small { font-size: clamp(10px, 2.75cqw, 13px); overflow-wrap: anywhere; }
.xy-vg-budget { flex: none; padding: 6px 8px; }
.xy-vg-budget small { font-size: 9px; }
.xy-vg-budget b { font-size: clamp(11px, 3.3cqw, 15px); white-space: nowrap; }
.xy-vg-works { width: clamp(32px, 8cqw, 43px); }
.xy-vg-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.xy-vg-chat-list { display: flex; flex-direction: column; gap: 16px; padding: 18px var(--vg-side) 4px; }
.xy-vg-chat-message { display: flex; align-items: flex-start; gap: 9px; width: 100%; }
.xy-vg-chat-message.is-user { justify-content: flex-end; }
.xy-vg-chat-message > p { max-width: min(78%, 430px); margin: 0; padding: 11px 15px; border-radius: 18px; color: #19203a; background: #f5f4fb; font-size: clamp(14px, 3.7cqw, 17px); line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.xy-vg-chat-message.is-user > p { color: #fff; background: #7655e9; border-bottom-right-radius: 6px; }
.xy-vg-chat-message.is-assistant > p { background: #f5f4fb; border-bottom-left-radius: 6px; }
.xy-vg-chat-message.is-error > p { color: #9c3f43; background: #fff1f1; }
.xy-vg-chat-message.is-pending > p { color: #777e98; }
.xy-vg-chat-message .xy-vg-chat-avatar { width: clamp(32px, 8.5cqw, 42px); height: clamp(32px, 8.5cqw, 42px); }
.xy-vg-chat-list.is-welcome { gap: 0; min-height: 100%; padding: 0; }
.xy-vg-chat-message.is-action { margin-top: 2px; }
.xy-vg-chat-card { flex: 1; min-width: 0; max-width: calc(100% - 51px); padding: 14px; color: #19203a; background: #f8f7fd; border: 1px solid #eeebf8; border-radius: 18px; border-bottom-left-radius: 6px; }
.xy-vg-chat-card.xy-vg-advice,
.xy-vg-chat-card.xy-vg-plan,
.xy-vg-chat-card.xy-vg-result { padding: 14px; }
.xy-vg-chat-card .xy-vg-materials { margin-top: 0; }
.xy-vg-chat-card .xy-vg-remix-hint { margin-inline: 0; }
.xy-vg-chat-card .xy-vg-storyboard { margin-top: 0; }
.xy-vg-chat-card .xy-vg-settings { position: static; max-height: none; margin-top: 14px; padding: 0; overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.xy-vg-chat-card .xy-vg-settings-list button { padding-inline: 8px; }
.xy-vg-chat-card .xy-vg-settings-list button strong { font-size: 12px; }
.xy-vg-chat-card .xy-vg-settings-list button span { font-size: 11px; }
.xy-vg-chat-card .xy-vg-settings-list button svg { flex: none; width: 17px; }
.xy-vg-chat-card .xy-vg-result-poster { width: min(100%, 310px); }
.xy-vg-generate-inline { margin-top: 16px; }
.xy-vg-welcome {
  min-height: 100%;
  padding: clamp(18px, 3dvh, 36px) var(--vg-side) 28px;
}
.xy-vg-hero-portrait {
  display: flex;
  align-items: end;
  justify-content: center;
  width: clamp(165px, 52cqw, 250px);
  height: clamp(158px, 23dvh, 250px);
  flex: none;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}
.xy-vg-hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
}
.xy-vg-welcome h1 {
  max-width: 100%;
  margin-top: clamp(10px, 1.6dvh, 18px);
  font-size: clamp(31px, 8.5cqw, 47px);
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
.xy-vg-welcome-subtitle {
  max-width: 100%;
  margin-top: 9px;
  font-size: clamp(14px, 4cqw, 20px);
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
}
.xy-vg-mode-grid { gap: clamp(5px, 1.5cqw, 10px); margin-top: clamp(22px, 3.8dvh, 44px); }
.xy-vg-mode-grid button {
  min-width: 0;
  min-height: clamp(82px, 11dvh, 104px);
  padding: 10px clamp(5px, 1.8cqw, 12px);
  border-radius: clamp(15px, 4cqw, 22px);
}
.xy-vg-mode-grid button strong { min-width: 0; font-size: clamp(12px, 3.3cqw, 16px); white-space: normal; }
.xy-vg-mode-grid button small { font-size: clamp(10px, 2.7cqw, 12px); white-space: normal; line-height: 1.3; }
.xy-vg-help { margin-top: clamp(17px, 3dvh, 30px); }
.xy-vg-idea { margin-top: clamp(32px, 5dvh, 68px); }
.xy-vg-idea > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.xy-vg-composer {
  position: relative;
  z-index: 4;
  gap: clamp(6px, 1.8cqw, 10px);
  min-height: 72px;
  padding: 9px var(--vg-side) 10px;
  border-top: 1px solid #f5f3fb;
}
.xy-vg-composer button { width: clamp(42px, 12cqw, 50px); height: clamp(42px, 12cqw, 50px); }
.xy-vg-composer input { min-width: 0; width: 100%; height: 50px; }
.xy-vg-advice,
.xy-vg-result { padding: 6px var(--vg-side) 28px; }
.xy-vg-advice > .xy-vg-example-tag,
.xy-vg-result .xy-vg-example-tag {
  position: static;
  transform: none;
  margin: 8px auto 18px;
  white-space: normal;
  text-align: center;
}
.xy-vg-user-row { min-width: 0; }
.xy-vg-user-row > span:first-child { max-width: min(78%, 420px); overflow-wrap: anywhere; }
.xy-vg-assistant-row p { min-width: 0; overflow-wrap: anywhere; }
.xy-vg-material-grid { gap: clamp(5px, 1.3cqw, 9px); }
.xy-vg-material,
.xy-vg-add-tile { height: clamp(86px, 28cqw, 132px); }
.xy-vg-material > span:last-child { display: block; overflow: hidden; text-overflow: ellipsis; }
.xy-vg-plan { padding: 6px var(--vg-side) 28px; }
.xy-vg-page.has-settings .xy-vg-plan { padding-bottom: min(62dvh, 520px); }
.xy-vg-storyboard-head { gap: 10px; }
.xy-vg-storyboard-head > div { min-width: 0; }
.xy-vg-storyboard-head h1,
.xy-vg-storyboard-head p { white-space: normal; overflow-wrap: anywhere; }
.xy-vg-shot-preview { width: clamp(80px, 25cqw, 112px); height: clamp(68px, 19cqw, 86px); }
.xy-vg-shot > div { min-width: 0; }
@media (max-width: 480px) {
  .xy-vg-shot { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 3px 9px; min-height: 82px; }
  .xy-vg-shot-preview { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 64px; }
  .xy-vg-shot-no { grid-column: 2; grid-row: 1; font-size: 15px; }
  .xy-vg-shot > div { grid-column: 2; grid-row: 2; }
  .xy-vg-shot strong { font-size: 13px; }
  .xy-vg-shot p { margin-top: 4px; padding: 0; background: transparent; border-radius: 0; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
}
.xy-vg-settings {
  bottom: 72px;
  max-height: min(74dvh, calc(100% - 112px));
  padding: 0 var(--vg-side) 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #f0edf9;
  border-bottom: 0;
}
.xy-vg-settings-list button { min-height: 44px; }
.xy-vg-settings-list button strong { min-width: 0; }
.xy-vg-settings-list button span { flex: none; }
.xy-vg-result-poster { width: min(78%, 350px); }
.xy-vg-result-actions { flex-wrap: wrap; }
.xy-vg-result-actions h1 { min-width: 110px; white-space: normal; }
.xy-vg-revision-confirm { flex-wrap: wrap; }
.xy-video-guide-notice { left: var(--vg-side, 16px); right: var(--vg-side, 16px); bottom: 88px; }

@media (max-width: 360px) {
  .xy-vg-header { gap: 5px; }
  .xy-vg-header-name small { font-size: 10px; }
  .xy-vg-budget { gap: 2px; padding: 5px; }
  .xy-vg-budget svg { width: 15px; }
  .xy-vg-budget small { display: none; }
  .xy-vg-mode-grid button { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .xy-vg-mode-grid button svg { width: 24px; height: 24px; }
  .xy-vg-mode-grid button strong { line-height: 1.2; }
  .xy-vg-mode-grid button small { font-size: 10px; }
  .xy-vg-choice button { white-space: normal; line-height: 1.2; }
  .xy-vg-composer { gap: 5px; }
  .xy-vg-composer button { width: 40px; height: 40px; }
  .xy-vg-composer input { padding-inline: 11px; font-size: 13px; }
}

@media (max-height: 720px) {
  .xy-vg-hero-portrait { width: min(45cqw, 180px); height: min(22dvh, 160px); }
  .xy-vg-welcome { padding-top: 10px; }
  .xy-vg-mode-grid { margin-top: 18px; }
  .xy-vg-idea { margin-top: 24px; }
  .xy-vg-settings { max-height: calc(100% - 100px); }
}

@media (min-height: 900px) {
  .xy-vg-welcome { padding-top: clamp(30px, 4dvh, 56px); }
  .xy-vg-hero-portrait { height: clamp(190px, 26dvh, 260px); }
  .xy-vg-mode-grid { margin-top: clamp(32px, 4.5dvh, 50px); }
  .xy-vg-idea { margin-top: clamp(48px, 6dvh, 78px); }
}
.xy-intel-overlay {
  position: absolute;
  z-index: 74;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f9f4 0%, #f8faf7 38%, #f7f9f6 100%);
  color: #22342c;
}

.xy-intel-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  border-bottom: 1px solid #e6eee7;
  background: rgb(255 255 255 / 92%);
  flex: none;
}
.xy-intel-header > button,
.xy-intel-header > span { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 14px; background: #eaf3eb; color: #376d50; }
.xy-intel-header > div { display: grid; gap: 2px; min-width: 0; text-align: center; }
.xy-intel-header strong { font-size: 18px; }
.xy-intel-header small { overflow: hidden; color: #819187; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.xy-intel-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: none; padding: 9px 14px; background: rgb(255 255 255 / 92%); }
.xy-intel-tabs button { min-height: 39px; border: 0; border-radius: 12px; background: transparent; color: #7b8c80; font-size: 13px; font-weight: 700; }
.xy-intel-tabs button.is-active { background: #e5f2e8; color: #236b42; }
.xy-intel-scroll-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.xy-intel-scroll { flex: 1; min-height: 0; }
.xy-intel-body { display: grid; gap: 13px; padding: 15px 14px calc(30px + env(safe-area-inset-bottom, 0px)); }
.xy-intel-hero { padding: 23px 20px; border-radius: 22px; background: linear-gradient(135deg, #e4f3e7, #f5faf4 74%); }
.xy-intel-hero span { color: #41765a; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.xy-intel-hero h1 { margin: 12px 0 8px; font-size: 23px; line-height: 1.38; letter-spacing: -.02em; }
.xy-intel-hero p, .xy-intel-card p { margin: 0; color: #6a7c70; font-size: 13px; line-height: 1.65; }
.xy-intel-card, .xy-intel-report { display: grid; gap: 12px; padding: 19px; border: 1px solid #e7eee8; border-radius: 20px; background: #fff; box-shadow: 0 8px 26px rgb(45 91 56 / 5%); }
.xy-intel-card h2, .xy-intel-report h2 { margin: 0; font-size: 17px; line-height: 1.4; }
.xy-intel-section-title { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.xy-intel-section-title small { color: #75a383; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.xy-intel-section-title em { color: #568168; font-size: 11px; font-style: normal; white-space: nowrap; }
.xy-intel-prompt { display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 0 13px; border: 0; border-radius: 12px; background: #ecf6ed; color: #2a7046; font-weight: 700; }
.xy-intel-dialogue { display: grid; gap: 11px; }
.xy-intel-bubble { max-width: 90%; padding: 12px 14px; border-radius: 16px; background: #fff; color: #33453a; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.xy-intel-bubble.is-user { justify-self: end; border-bottom-right-radius: 5px; background: #dff0e3; }
.xy-intel-bubble.is-assistant { justify-self: start; border-bottom-left-radius: 5px; border: 1px solid #e9eee9; }
.xy-intel-state { margin: 0; padding: 15px; color: #66846e; text-align: center; font-size: 13px; }
.xy-intel-error { display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: 12px; background: #fff2ee; color: #a24235; font-size: 12px; }
.xy-intel-error span { flex: 1; }
.xy-intel-error button { border: 0; background: transparent; color: inherit; font-weight: 800; }
.xy-intel-hint { display: flex; gap: 6px; align-items: start; margin: 0; color: #799083; font-size: 11px; line-height: 1.6; }
.xy-intel-form { display: grid; gap: 12px; padding: 18px; border: 1px solid #e7eee8; border-radius: 20px; background: #fff; }
.xy-intel-form > label, .xy-intel-form-pair > label { display: grid; gap: 7px; min-width: 0; color: #344c3c; font-size: 12px; font-weight: 700; }
.xy-intel-form input:not([type=checkbox]), .xy-intel-form textarea, .xy-intel-composer input { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #dfebe2; border-radius: 11px; outline: none; background: #fbfdfb; color: #233b2b; font: inherit; font-weight: 400; }
.xy-intel-form input:not([type=checkbox]) { min-height: 42px; padding: 9px 11px; }
.xy-intel-form textarea { padding: 10px 11px; line-height: 1.5; resize: vertical; }
.xy-intel-form input:focus, .xy-intel-form textarea:focus, .xy-intel-composer input:focus { border-color: #72a980; }
.xy-intel-form label > small { color: #819187; font-size: 11px; font-weight: 400; line-height: 1.5; }
.xy-intel-form-pair { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.xy-intel-form fieldset { margin: 0; padding: 10px 0; border: 0; }
.xy-intel-form legend { margin-bottom: 8px; color: #344c3c; font-size: 12px; font-weight: 700; }
.xy-intel-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.xy-intel-channels label { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid #e3eee5; border-radius: 9px; color: #4d6754; font-size: 11px; }
.xy-intel-channels input { accent-color: #388356; }
.xy-intel-choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
.xy-intel-choice-row button { min-height: 32px; padding: 5px 10px; border: 1px solid #dfeae1; border-radius: 9px; background: #fff; color: #52715c; font-size: 11px; }
.xy-intel-choice-row button.is-active { border-color: #79b38a; background: #eaf5ec; color: #246c42; font-weight: 800; }
.xy-intel-poster { display: grid; gap: 12px; min-height: 210px; align-content: space-between; padding: 20px; border-radius: 17px; background: linear-gradient(145deg, #d9eee0, #f1f9f2); color: #1f5939; }
.xy-intel-poster.is-amber { background: linear-gradient(145deg, #f9e8c8, #fff8e9); color: #775022; }
.xy-intel-poster.is-midnight { background: linear-gradient(145deg, #152e4c, #31536e); color: #f4f9ff; }
.xy-intel-poster.layout-card { border: 9px solid rgb(255 255 255 / 56%); }
.xy-intel-poster.layout-bulletin { border-top: 7px solid currentColor; border-radius: 4px; }
.xy-intel-poster small { font-size: 10px; opacity: .72; }
.xy-intel-poster strong { max-width: 12em; font-size: 24px; line-height: 1.3; }
.xy-intel-poster p { margin: 0; color: inherit; font-size: 14px; opacity: .86; }
.xy-intel-poster span, .xy-intel-poster em { font-size: 11px; font-style: normal; opacity: .78; }
.xy-intel-poster em { border-top: 1px solid currentColor; padding-top: 7px; }
.xy-intel-primary { min-height: 43px; padding: 0 15px; border: 0; border-radius: 12px; background: #39845a; color: white; font-size: 13px; font-weight: 800; }
.xy-intel-primary:disabled { opacity: .48; }
.xy-intel-report h3 { margin: 7px 0 0; color: #315b3f; font-size: 13px; }
.xy-intel-report p { margin: 0; color: #52685a; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.xy-intel-report > small, .xy-intel-signal small { color: #819187; font-size: 11px; }
.xy-officer-picker { min-width: 0; }
.xy-officer-picker-track { display: flex; gap: 8px; padding: 3px 0 7px; }
.xy-officer-picker button { display: grid; flex: 0 0 min(70vw, 250px); gap: 5px; min-width: 0; padding: 12px; border: 1px solid #e2ebe4; border-radius: 12px; background: #fff; color: #385840; text-align: left; font-size: 12px; }
.xy-officer-picker button.is-active { border-color: #69a87b; background: #edf7ef; }
.xy-officer-picker strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xy-officer-picker small { color: #789282; }
.xy-officer-check { display: flex; align-items: flex-start; gap: 8px; color: #355b40; font-size: 12px; line-height: 1.5; }
.xy-officer-check input { flex: none; margin-top: 2px; accent-color: #39845a; }
.xy-officer-actions { display: flex; gap: 9px; }
.xy-officer-actions > button:first-child { min-height: 43px; padding: 0 17px; border: 1px solid #e0e9e2; border-radius: 12px; background: #fff; color: #607467; }
.xy-officer-actions > .xy-intel-primary { flex: 1; }
.xy-officer-poster-img { display: block; width: min(100%, 330px); height: auto; justify-self: center; border: 1px solid #e1ebe4; border-radius: 15px; background: #fff; }
.xy-officer-chat .xy-intel-dialogue { max-height: 290px; overflow-y: auto; }
.xy-officer-chat .xy-intel-bubble { background: #f6faf7; }
.xy-officer-chat .xy-intel-bubble.is-user { background: #dff0e3; }
.xy-officer-proposal { display: grid; gap: 10px; padding: 13px; border: 1px solid #b9d9c0; border-radius: 13px; background: #eef8f0; }
.xy-officer-proposal p { color: #315e40; font-weight: 650; }
.xy-officer-video-select { display: grid; gap: 10px; }
.xy-officer-video-select label { display: grid; gap: 5px; color: #3b5c45; font-size: 12px; font-weight: 700; }
.xy-officer-video-select select { min-height: 42px; padding: 8px 10px; border: 1px solid #dbe9df; border-radius: 10px; background: #fbfdfb; color: #24452e; font: inherit; }
.xy-officer-video-preview { width: 100%; max-height: 440px; border-radius: 14px; background: #173123; }
.xy-intel-signal { display: grid; gap: 4px; padding: 10px; border-radius: 11px; background: #f5faf6; }
.xy-intel-signal strong { font-size: 12px; }
.xy-intel-report a { color: #287b4a; font-size: 11px; overflow-wrap: anywhere; }
.xy-intel-source-error { color: #ae6750 !important; overflow-wrap: anywhere; }
.xy-intel-review-note { color: #8d6f46 !important; }
.xy-intel-composer { display: flex; gap: 8px; align-items: center; flex: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e6eee7; background: #fff; }
.xy-intel-composer input { flex: 1; min-height: 43px; padding: 9px 12px; font-size: 13px; }
.xy-intel-composer button { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; border: 0; border-radius: 12px; background: #39845a; color: #fff; }
.xy-intel-composer button:disabled { opacity: .48; }
@media (max-width: 360px) { .xy-intel-hero h1 { font-size: 21px; } .xy-intel-form-pair { grid-template-columns: 1fr; } }

/* Intelligence and officer workspaces: editorial hierarchy, compact conversation. */
.xy-intel-overlay {
  background: #f6f8f4;
  color: #24372c;
}
.xy-intel-header { border-bottom: 0; background: #fbfcfa; }
.xy-intel-header > button,
.xy-intel-header > span { border-radius: 50%; background: #e9f1e9; }
.xy-intel-tabs {
  gap: 0;
  padding: 0 17px 7px;
  border-bottom: 1px solid #e7ebe5;
  background: #fbfcfa;
}
.xy-intel-tabs button { position: relative; border-radius: 0; }
.xy-intel-tabs button.is-active { background: transparent; color: #235e3a; }
.xy-intel-tabs button.is-active::after {
  position: absolute; right: 21%; bottom: 0; left: 21%; height: 3px;
  border-radius: 3px; background: #4b9a67; content: "";
}
.xy-intel-body { gap: 16px; padding: 18px 17px calc(30px + env(safe-area-inset-bottom, 0px)); }
.xy-intel-hero {
  position: relative; min-height: 158px; overflow: hidden;
  padding: 23px 23px 20px; border-radius: 25px;
  background: linear-gradient(122deg, #173c2b 0%, #24543a 62%, #367250 100%);
  box-shadow: 0 17px 30px rgb(24 75 45 / 16%); color: #fff;
}
.xy-intel-hero::before {
  position: absolute; top: -61px; right: -52px; width: 209px; height: 209px;
  border: 1px solid rgb(242 255 225 / 20%); border-radius: 50%; content: "";
}
.xy-intel-hero::after {
  position: absolute; right: -33px; bottom: -110px; width: 197px; height: 197px;
  border: 35px solid rgb(194 239 179 / 8%); border-radius: 50%; content: "";
}
.xy-intel-hero span { position: relative; z-index: 1; color: #bbd9b2; font-size: 10px; letter-spacing: .16em; }
.xy-intel-hero h1 {
  position: relative; z-index: 1; max-width: 285px; margin: 13px 0 17px;
  color: #fff; font-size: clamp(23px, 7vw, 30px); font-weight: 760;
  line-height: 1.27; letter-spacing: -.045em;
}
.xy-intel-hero small { position: relative; z-index: 1; color: #c9e2c9; font-size: 11px; letter-spacing: .03em; }
.xy-intel-hero-orbit,
.xy-officer-hero-mark {
  position: absolute; right: 21px; bottom: 26px; display: grid;
  width: 84px; height: 84px; place-items: center;
  border: 1px solid rgb(232 255 219 / 45%); border-radius: 27px;
  background: linear-gradient(145deg, rgb(222 255 205 / 16%), rgb(255 255 255 / 4%));
  color: #d5f5cb; transform: rotate(-13deg);
}
.xy-intel-hero-orbit svg,
.xy-officer-hero-mark svg { transform: rotate(13deg); }
.xy-intel-conversation-heading {
  display: flex; align-items: center; gap: 8px; min-height: 25px;
  padding: 4px 2px 1px; color: #315d3d;
}
.xy-intel-conversation-heading strong { font-size: 12px; letter-spacing: .04em; }
.xy-intel-conversation-heading small { margin-left: auto; color: #85978a; font-size: 10px; }
.xy-intel-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #56ad71; box-shadow: 0 0 0 4px #e1f1e5; }
.xy-intel-page-heading { display: grid; gap: 5px; padding: 5px 5px 2px; }
.xy-intel-page-heading small { color: #468b5c; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.xy-intel-page-heading h1 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.xy-intel-page-heading span { color: #839387; font-size: 12px; }
.xy-intel-rule-status { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 13px; background: #eaf1e9; color: #4a7357; font-size: 11px; }
.xy-intel-start-card {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 61px; padding: 0 17px; border: 1px solid #dfebdf;
  border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgb(50 90 58 / 5%);
  color: #2d6943; font-size: 14px; font-weight: 750; text-align: left;
}
.xy-intel-start-card svg { display: grid; width: 27px; height: 27px; padding: 5px; border-radius: 50%; background: #e3f1e7; }
.xy-intel-dialogue { gap: 14px; padding: 4px 0 2px; }
.xy-intel-bubble { max-width: 84%; padding: 13px 16px; border-radius: 18px; font-size: 14px; line-height: 1.57; box-shadow: 0 5px 17px rgb(27 55 37 / 4%); }
.xy-intel-bubble.is-user { border: 1px solid #d8e9dc; border-bottom-right-radius: 5px; background: #e6f2e7; }
.xy-intel-bubble.is-assistant { border: 1px solid #e9eee8; border-bottom-left-radius: 5px; background: #fff; }
.xy-intel-card { border-color: #e9eee7; box-shadow: 0 9px 22px rgb(30 64 40 / 4%); }
.xy-intel-report-action { border-left: 4px solid #55a66c; }
.xy-officer-hero { min-height: 149px; background: linear-gradient(122deg, #233947, #2b5a57 70%, #4c8170); }
.xy-officer-overlay .xy-intel-hero::before { border-color: rgb(226 252 251 / 23%); }
.xy-officer-hero-mark { color: #d7f0dc; }
.xy-officer-primary-card {
  gap: 18px; padding: 20px; border: 0;
  background: linear-gradient(145deg, #fff 0%, #fbfdf9 65%, #edf5ed 100%);
  box-shadow: 0 14px 30px rgb(32 78 55 / 9%);
}
.xy-officer-primary-card .xy-intel-section-title small { color: #469361; }
.xy-officer-primary-card .xy-intel-section-title h2 { margin-top: 3px; font-size: 20px; }
.xy-officer-primary-card .xy-intel-primary { min-height: 49px; border-radius: 14px; }
.xy-officer-secondary-card { padding: 18px 20px; border: 1px solid #e5ede4; background: #f0f5ee; }
.xy-officer-secondary-card .xy-intel-primary { min-height: 38px; background: #e1eee4; color: #306346; }
.xy-officer-dialogue-panel { display: grid; gap: 11px; padding: 11px 14px; border-radius: 17px; background: #edf3ee; }
.xy-officer-empty { margin: 0; padding: 14px 0 4px; color: #829386; font-size: 12px; text-align: center; }
.xy-officer-overlay .xy-intel-card:not(.xy-officer-primary-card) { box-shadow: none; }
.xy-intel-composer { box-shadow: 0 -6px 22px rgb(30 60 40 / 5%); }
.xy-intel-composer input { border-radius: 17px; background: #f8faf7; }
.xy-intel-composer button { border-radius: 15px; }
@media (max-width: 360px) {
  .xy-intel-hero h1 { font-size: 23px; }
  .xy-intel-conversation-heading small { display: none; }
  .xy-officer-hero-mark, .xy-intel-hero-orbit { right: 14px; width: 68px; height: 68px; }
}

/* Dedicated 日报 / 内容 / 发布 workspaces and their second-level pages. */
.xy-officer-header { padding-bottom: 12px; border-bottom: 1px solid #e9eee8; }
.xy-officer-header > div { gap: 0; }
.xy-officer-header > div strong { font-size: 17px; line-height: 1.45; }
.xy-officer-header > div small { font-size: 10px; }
.xy-officer-body { gap: 19px; padding-top: 18px; }
.xy-officer-overlay .xy-intel-hero { min-height: 153px; }
.xy-officer-overlay.is-content .xy-officer-hero { background: linear-gradient(120deg, #263a4a 0%, #345e68 62%, #658b82 100%); }
.xy-officer-overlay.is-publisher .xy-officer-hero { background: linear-gradient(120deg, #293b3c 0%, #425e4b 62%, #71966d 100%); }
.xy-officer-overlay.is-daily { background: #f7f8ff; color: #27243e; }
.xy-officer-overlay.is-daily .xy-officer-header { border-bottom-color: #ece9f7; background: #fff; }
.xy-officer-overlay.is-daily .xy-officer-header > button,
.xy-officer-overlay.is-daily .xy-officer-header > span { background: #f0ecff; color: #7148db; }
.xy-officer-overlay.is-daily .xy-officer-header > div small { color: #8b82a1; }
.xy-officer-overlay.is-daily .xy-officer-body { gap: 16px; padding-top: 20px; }
.xy-daily-chat-heading { display: flex; align-items: center; gap: 12px; padding: 2px 3px; }
.xy-daily-chat-heading .xy-intel-live-dot { flex: none; background: #865cf1; box-shadow: 0 0 0 5px #eae3ff; }
.xy-daily-chat-heading > div { display: grid; gap: 3px; }
.xy-daily-chat-heading strong { color: #30254e; font-size: 18px; }
.xy-daily-chat-heading small { color: #8e88a0; font-size: 12px; }
.xy-daily-conversation { display: grid; gap: 12px; min-height: 155px; align-content: start; padding: 4px 0 7px; }
.xy-officer-overlay.is-daily .xy-intel-bubble.is-assistant { border-color: #eeeaf8; color: #3d3654; }
.xy-officer-overlay.is-daily .xy-intel-bubble.is-user { border-color: #e2d9ff; background: #ece5ff; color: #3d2f66; }
.xy-officer-overlay.is-daily .xy-officer-proposal { border-color: #dbd0ff; background: #f4f0ff; }
.xy-officer-overlay.is-daily .xy-officer-proposal p { color: #5a3b9e; }
.xy-daily-notice { margin: 0; padding: 10px 12px; border-radius: 11px; background: #eee9ff; color: #6944c1; font-size: 12px; }
.xy-daily-source-summary { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #eeebf7; border-radius: 13px; background: #fff; }
.xy-daily-source-summary span { color: #59478e; font-size: 12px; font-weight: 700; }
.xy-daily-source-summary small { overflow: hidden; color: #8c88a0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.xy-officer-overlay.is-daily .xy-officer-section-heading small { color: #8159df; }
.xy-daily-composer { flex: none; border-top: 1px solid #ece9f7; background: #fff; }
.xy-daily-tools { display: flex; gap: 8px; overflow-x: auto; padding: 11px 14px 5px; scrollbar-width: none; }
.xy-daily-tools::-webkit-scrollbar { display: none; }
.xy-daily-tools button { display: inline-flex; flex: none; align-items: center; gap: 5px; min-height: 33px; padding: 0 11px; border: 1px solid #e8e3f4; border-radius: 999px; background: #f8f6ff; color: #62558a; font-size: 12px; font-weight: 700; white-space: nowrap; }
.xy-daily-tools button.is-primary { border-color: #7750e5; background: #7750e5; color: #fff; }
.xy-daily-tools button.is-active { border-color: #9370ef; background: #eee8ff; color: #6942c5; }
.xy-daily-tools button:disabled { opacity: .55; }
.xy-daily-tools button small { display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 50%; background: rgb(100 74 173 / 10%); font-size: 10px; }
.xy-officer-overlay.is-daily .xy-intel-composer { border-top: 0; padding-top: 5px; box-shadow: none; }
.xy-officer-overlay.is-daily .xy-intel-composer input { border-color: #e9e3f5; background: #f8f7fd; }
.xy-officer-overlay.is-daily .xy-intel-composer input:focus { border-color: #8967ea; }
.xy-officer-overlay.is-daily .xy-intel-composer button,
.xy-officer-overlay.is-daily .xy-daily-source-sheet > .xy-intel-primary { background: #7750e5; }
.xy-daily-source-sheet { display: grid; flex: none; gap: 9px; max-height: min(47dvh, 420px); overflow-y: auto; padding: 13px 15px; border-top: 1px solid #ece7f7; background: #fff; box-shadow: 0 -8px 22px rgb(70 48 125 / 8%); }
.xy-daily-source-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.xy-daily-source-sheet-head strong { color: #342658; font-size: 15px; }
.xy-daily-source-sheet-head button { width: 29px; height: 29px; border: 0; border-radius: 50%; background: #f1edfb; color: #7054ae; font-size: 20px; }
.xy-daily-source-sheet p { margin: 0; color: #827c94; font-size: 11px; line-height: 1.5; }
.xy-daily-source-item { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid #ebe5f8; border-radius: 10px; background: #faf9ff; color: #382b59; text-decoration: none; }
.xy-daily-source-item strong { font-size: 12px; line-height: 1.4; }
.xy-daily-source-item small { color: #887da2; font-size: 10px; }
.xy-daily-source-item span { display: -webkit-box; overflow: hidden; color: #6f6781; font-size: 11px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.xy-daily-source-refresh { min-height: 34px; border: 1px solid #e3daf9; border-radius: 9px; background: #f5f1ff; color: #6845bf; font-size: 11px; font-weight: 700; }
.xy-officer-overlay .xy-officer-hero h1 { margin-bottom: 19px; }
.xy-officer-action-panel {
  display: grid; gap: 17px; padding: 21px 20px 20px;
  border-radius: 23px; background: #fff;
  box-shadow: 0 14px 30px rgb(29 77 50 / 8%);
}
.xy-officer-action-panel > div:first-child { display: grid; gap: 5px; }
.xy-officer-action-panel small,
.xy-officer-section-heading small { color: #4f9866; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.xy-officer-action-panel h2 { margin: 0; color: #243b2d; font-size: 20px; line-height: 1.35; letter-spacing: -.025em; }
.xy-officer-action-panel p { margin: 0; color: #8a9a8d; font-size: 12px; }
.xy-officer-action-panel > .xy-intel-primary { min-height: 48px; border-radius: 14px; font-size: 14px; }
.xy-officer-action-note { letter-spacing: 0 !important; }
.xy-officer-action-panel .xy-officer-picker { margin: 0 -2px; }
.xy-officer-action-panel .xy-officer-picker-track { padding: 1px 2px 5px; }
.xy-officer-action-panel .xy-officer-picker button { flex-basis: min(66vw, 225px); min-height: 59px; }
.xy-officer-records { display: grid; gap: 0; }
.xy-officer-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 3px 3px 13px; }
.xy-officer-section-heading > div { display: grid; gap: 4px; }
.xy-officer-section-heading h2 { margin: 0; color: #263b2f; font-size: 18px; letter-spacing: -.02em; }
.xy-officer-section-heading em { color: #839688; font-size: 11px; font-style: normal; white-space: nowrap; }
.xy-officer-record {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 76px;
  padding: 11px 1px; border: 0; border-top: 1px solid #e3eae2;
  background: transparent; color: #294432; text-align: left;
}
.xy-officer-record:last-child { border-bottom: 1px solid #e3eae2; }
.xy-officer-record-icon { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 14px; background: #e8f2e9; color: #398055; }
.xy-officer-record-copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
.xy-officer-record-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xy-officer-record-copy small { overflow: hidden; color: #8c9b90; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.xy-officer-record > em { flex: none; color: #758b79; font-size: 10px; font-style: normal; }
.xy-officer-record > em.is-pending { color: #a37b3c; }
.xy-officer-record > em.is-approved { color: #408858; }
.xy-officer-record > em.is-rejected { color: #a97065; }
.xy-officer-record > svg { flex: none; color: #91a896; }
.xy-officer-empty-state { display: grid; gap: 7px; padding: 24px 19px; border: 1px dashed #d9e6db; border-radius: 16px; background: #fafcf9; text-align: center; }
.xy-officer-empty-state strong { color: #496551; font-size: 13px; }
.xy-officer-empty-state span { color: #8b9d8d; font-size: 11px; }
.xy-officer-empty-state button,
.xy-officer-text-link { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 4px 0; border: 0; background: transparent; color: #388058; font-size: 12px; font-weight: 750; }
.xy-officer-utility { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 16px 17px; border: 1px solid #dce8de; border-radius: 16px; background: #ebf2ea; color: #355c42; text-align: left; }
.xy-officer-utility > span { display: grid; gap: 4px; }
.xy-officer-utility strong { font-size: 13px; }
.xy-officer-utility small { color: #819485; font-size: 11px; }
.xy-officer-utility em { display: flex; align-items: center; color: #548365; font-size: 11px; font-style: normal; white-space: nowrap; }
.xy-officer-release-intro { display: flex; gap: 11px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #eaf3e8; }
.xy-officer-release-intro > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #d7ead8; color: #488a5a; }
.xy-officer-release-intro > div { display: grid; gap: 4px; }
.xy-officer-release-intro strong { font-size: 12px; }
.xy-officer-release-intro small { color: #7e9381; font-size: 10px; }
.xy-officer-detail-layer { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #f6f8f4; }
.xy-officer-detail-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; flex: none; padding: calc(10px + env(safe-area-inset-top, 0px)) 17px 10px; border-bottom: 1px solid #e3eae2; background: #fff; text-align: center; }
.xy-officer-detail-header button { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: #e9f1e9; color: #326a48; }
.xy-officer-detail-header strong { font-size: 17px; }
.xy-officer-detail-header span { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid #dbe7dd; border-radius: 50%; color: #5e906e; font-size: 11px; font-weight: 800; }
.xy-officer-detail-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.xy-officer-detail-scroll { scrollbar-width: none; }
.xy-officer-detail-scroll::-webkit-scrollbar { width: 0; height: 0; }
.xy-officer-detail-body { display: grid; gap: 17px; padding: 22px 17px calc(32px + env(safe-area-inset-bottom, 0px)); }
.xy-officer-detail-heading { display: grid; gap: 9px; padding: 3px 3px 5px; }
.xy-officer-detail-heading small { color: #4d9062; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.xy-officer-detail-heading h1 { margin: 0; color: #1e3928; font-size: 25px; line-height: 1.3; letter-spacing: -.035em; }
.xy-officer-detail-heading p { margin: 0; color: #768d7c; font-size: 13px; line-height: 1.6; }
.xy-officer-detail-section { display: grid; gap: 13px; padding: 18px; border: 1px solid #e4ece3; border-radius: 18px; background: #fff; }
.xy-officer-detail-section .xy-officer-section-heading { padding: 0 0 3px; }
.xy-officer-detail-section > p { margin: 0; color: #5d7464; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.xy-officer-detail-section > small { color: #819386; font-size: 11px; line-height: 1.6; }
.xy-officer-detail-section > a { color: #388154; font-size: 12px; overflow-wrap: anywhere; }
.xy-officer-detail-section .xy-intel-signal { background: #f5f9f4; }
.xy-officer-detail-section .xy-intel-signal p { margin: 0; color: #637b68; font-size: 12px; line-height: 1.6; }
.xy-officer-detail-section .xy-intel-primary { min-height: 44px; }
.xy-officer-detail-status { display: flex; align-items: center; gap: 8px; color: #65816d; font-size: 13px; font-weight: 800; }
.xy-officer-detail-status span { width: 8px; height: 8px; border-radius: 50%; background: #aebbad; }
.xy-officer-detail-status span.is-on { background: #56a96c; box-shadow: 0 0 0 4px #e4f2e5; }
.xy-officer-review-box { background: #edf5ed; }
.xy-officer-review-box .xy-officer-actions { min-width: 0; }
.xy-officer-detail-next { display: flex; justify-content: space-between; gap: 8px; }
.xy-officer-detail-next button { display: flex; align-items: center; gap: 3px; padding: 7px 0; border: 0; background: transparent; color: #3d8053; font-size: 11px; font-weight: 700; }
.xy-officer-detail-footnote { margin: 0; color: #849386; font-size: 11px; text-align: center; }
.xy-officer-detail-section > .xy-officer-publish-card { gap: 15px; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.xy-officer-detail-section > .xy-officer-publish-card > .xy-intel-section-title { display: none; }
.xy-officer-publish-card > p { margin: 0; color: #829485; font-size: 11px; line-height: 1.6; }
.xy-officer-publish-card > small { color: #8a9b8d; font-size: 11px; line-height: 1.5; }
.xy-officer-publish-field { display: grid; gap: 7px; color: #345a3e; font-size: 12px; font-weight: 750; }
.xy-officer-publish-field select,
.xy-officer-publish-field textarea { box-sizing: border-box; width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #dce9df; border-radius: 11px; outline: 0; background: #f9fcf9; color: #314636; font: inherit; font-weight: 400; }
.xy-officer-publish-field textarea { min-height: 93px; resize: vertical; line-height: 1.55; }
.xy-officer-publish-field select:focus,
.xy-officer-publish-field textarea:focus { border-color: #73aa82; }
.xy-officer-publish-devices { display: grid; gap: 9px; padding: 13px; border: 1px solid #e4ede5; border-radius: 12px; background: #f6faf6; }
.xy-officer-publish-devices:empty { display: none; }
.xy-officer-publish-card > .xy-officer-check { padding: 12px; border-radius: 12px; background: #edf5ed; }
.xy-officer-publish-card > .xy-intel-primary { min-height: 47px; }
@media (max-width: 360px) {
  .xy-officer-action-panel { padding: 18px; }
  .xy-officer-record-copy strong { font-size: 12px; }
  .xy-officer-detail-body { padding-inline: 14px; }
}
.wobangni-core-screen{--wb-blue:#4077f5;--wb-purple:#6956e9;position:fixed;inset:0;z-index:10;background:#f5f7ff}
.wobangni-core-screen .xy-app-shell{background:radial-gradient(circle at 82% 5%,#9fb8ff33,transparent 28%),#f7f9ff}
.wobangni-core-screen .xy-shared-brand-scroll:not(.xy-dashboard-scroll)>.app-top-header{width:calc(100% + 24 * var(--dash-u));margin:calc(-25 * var(--dash-u)) calc(-12 * var(--dash-u)) 9px}
.wobangni-core-screen .xy-brand-mark{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.wobangni-core-screen .xy-brand-mark img{width:100%;height:100%;object-fit:contain;transform:none;clip-path:none}
.wobangni-core-screen .xy-brand-lockup strong,.wobangni-core-screen .xy-brand-lockup strong em{color:#233b7b}
.wobangni-core-screen .xy-bottom-nav .is-active,.wobangni-core-screen .xy-bottom-nav [aria-current=page]{color:var(--wb-blue)}
.wobangni-core-screen .xy-bottom-nav .xy-bottom-assistant{align-self:stretch;transform:translateY(calc(-10 * (100cqw / 347)));gap:calc(1 * (100cqw / 347));padding:calc(2 * (100cqw / 347)) 0;background:transparent;box-shadow:none;color:#8a8d9a}
.wobangni-core-screen .xy-bottom-nav .xy-bottom-assistant img{content:url('/assets/brand/wobangni-mark-30baf2c901a8.png');display:block;width:calc(23 * (100cqw / 347));height:calc(23 * (100cqw / 347));border-radius:0;object-fit:contain;filter:none;box-shadow:none}
.wobangni-core-screen .xy-bottom-nav .xy-bottom-assistant span{font-size:13px;line-height:1.1}
.wobangni-core-screen .xy-agent-catalog,.wobangni-core-screen .xy-mobile-page{--xy-primary:#4779f4;--brand-primary:#4779f4}
.wobangni-core-screen .xy-account-submit,.wobangni-core-screen .xy-ecom-primary,.wobangni-core-screen .xy-ecom-generate{background:linear-gradient(105deg,#2e8cf9,#4a74ed,#6f5beb);box-shadow:0 8px 18px #417df33d;color:#fff}
.wobangni-core-screen .xy-account-tabs button.is-active,.wobangni-core-screen .xy-account-switch button,.wobangni-core-screen .xy-ecom-header strong{color:#2454b2}
.wobangni-core-screen .xy-account-download-link{display:none}

.workspace-skeleton{position:relative;width:min(100%,427px);min-height:100dvh;margin:0 auto;background:#fbfbfe;overflow:hidden}
.workspace-skeleton-header{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 50px) 16px 16px}
.workspace-skeleton-brand{display:flex;align-items:center;gap:10px;color:#233b7b;font-size:20px}
.workspace-skeleton-brand img{width:40px;height:40px;object-fit:contain;background:transparent}
.workspace-skeleton-pill{width:34px;height:34px;border-radius:50%}
.workspace-skeleton-content{padding:5px 16px 90px}
.workspace-skeleton-line{height:12px;border-radius:8px;margin-bottom:13px}
.workspace-skeleton-line.short{width:30%}
.workspace-skeleton-line.title{width:58%;height:24px;margin-bottom:24px}
.workspace-skeleton-line.section{width:40%;height:19px;margin:27px 0 17px}
.workspace-skeleton-hero{height:166px;padding:24px;border-radius:22px;background:linear-gradient(125deg,#e8eeff,#eeeafd);display:flex;flex-direction:column;gap:12px}
.workspace-skeleton-hero span{height:13px;width:55%;border-radius:8px;background:#ffffff94}
.workspace-skeleton-hero span:nth-child(2){width:75%;height:23px}
.workspace-skeleton-hero span:nth-child(3){width:38%;margin-top:auto}
.workspace-skeleton-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}
.workspace-skeleton-row span{height:75px;border-radius:17px}
.workspace-skeleton-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.workspace-skeleton-grid span{height:112px;border-radius:18px}
.workspace-skeleton-nav{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;height:calc(66px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#fff;border-top:1px solid #edf0f7}
.workspace-skeleton-nav span{width:24px;height:24px;border-radius:9px}
.workspace-skeleton :is(.workspace-skeleton-pill,.workspace-skeleton-line,.workspace-skeleton-row span,.workspace-skeleton-grid span,.workspace-skeleton-nav span){background:linear-gradient(100deg,#ebeff8 25%,#f7f9ff 50%,#ebeff8 75%);background-size:200% 100%;animation:workspace-skeleton-pulse 1.4s ease-in-out infinite}
@keyframes workspace-skeleton-pulse{to{background-position-x:-200%}}
@media (prefers-reduced-motion:reduce){.workspace-skeleton :is(.workspace-skeleton-pill,.workspace-skeleton-line,.workspace-skeleton-row span,.workspace-skeleton-grid span,.workspace-skeleton-nav span){animation:none}}
.bottom-nav.app-main-nav {
  position: relative;
  z-index: 30;
  width: 100%;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  min-height: calc(64px + env(safe-area-inset-bottom, 0px));
  flex: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  padding: 2px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 20px #cbdcf170;
}
.bottom-nav.app-main-nav button {
  position: relative;
  display: flex;
  min-width: 0;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4c658e;
  font-size: 11px;
  cursor: pointer;
}
.bottom-nav.app-main-nav button svg { width: 21px; height: 21px; flex: none; }
.bottom-nav.app-main-nav button small { font-size: 9px; line-height: 1; }
.bottom-nav.app-main-nav button.active { color: #7639f4; font-weight: 700; }
.bottom-nav.app-main-nav button.orb {
  align-self: start;
  width: 54px;
  height: 54px;
  margin: -5px auto 0;
  display: grid;
  place-items: center;
  background: transparent;
}
.bottom-nav.app-main-nav button.orb img { display: block; width: 54px; height: 54px; object-fit: contain; border-radius: 50%; }
.bottom-nav.app-main-nav button.orb small { display: none; }
.app-main-nav-update { position: absolute; top: 1px; right: 25%; width: 6px; height: 6px; border-radius: 50%; background: #ee4e99; }
.mobile-app-viewport .app-main-nav { position: absolute; right: 0; bottom: 0; left: 0; }
.home-header.app-top-header{position:relative;width:100%;height:58px;min-height:58px;flex:none;padding:3px 20px;background:linear-gradient(90deg,#eff6ffcf,#ffffff99);backdrop-filter:blur(16px)}
.app-top-header>.icon-button{width:26px;color:#263d6a}.app-top-header>.icon-button svg{width:24px}
.app-top-header .brand{position:absolute;left:60px;margin-left:0;border:0;padding:0;background:transparent;text-align:left}
.brand-mark-image{display:block;width:51px;height:51px;object-fit:contain;flex:none}.brand-compact .brand-mark-image{width:52px;height:52px}
.app-top-header .brand-words strong{font-size:21px;letter-spacing:-1px;line-height:1;text-shadow:none}.app-top-header .brand-words small{font-size:7px;letter-spacing:.5px;margin-top:3px}
.app-top-header .header-actions{gap:11px}.app-top-header .header-actions>.icon-button{width:35px;height:35px;background:#fffdf9e8;border-radius:12px}.app-top-header .header-actions>.icon-button svg{width:22px}.app-top-header .header-actions>.avatar-button{width:41px;height:41px;padding:0;border:2px solid #fff;border-radius:50%;overflow:hidden;box-shadow:0 2px 10px #7f9fd25e}
.app-top-header .avatar-button{position:relative}
.app-top-header .avatar-button img{display:block;width:100%;height:100%;object-fit:cover}
.app-top-update-dot{position:absolute;top:0;right:0;width:7px;height:7px;border-radius:50%;background:#ec46cc;box-shadow:0 0 0 2px #fff}
.partner-shell{--ink:#111747;--muted:#7887ad;display:flex;flex-direction:column;width:100%;max-width:480px;height:100dvh;margin:auto;background:#f5faff;color:var(--ink);overflow:hidden;box-shadow:0 0 40px #a9c9ee47;font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}.partner-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:22px;background:linear-gradient(180deg,#eaf5ff,#f6faff 360px,#f7fbff)}.partner-shell button{transition:transform .15s ease}.partner-shell button:active{transform:scale(.97)}.partner-shell svg{width:20px;height:20px}
.partner-header{display:grid;grid-template-columns:54px 1fr 76px;align-items:center;height:60px;padding:0 12px;background:#eef7ffb8}.partner-header>strong{text-align:center;font-size:18px;font-weight:800}.partner-header>button{width:38px;height:38px;display:grid;place-items:center}.partner-header>span{display:flex;justify-content:flex-end;color:#1473de;font-size:11px;font-weight:700}.partner-header>span button{display:flex;align-items:center;gap:3px;color:#1473de}.partner-hero-crop{position:relative;overflow:hidden;width:100%;background:#dceeff}.partner-hero-crop img{display:block;width:100%;height:auto;max-width:none}.partner-card{margin:11px 13px;padding:16px 14px;border-radius:18px;background:#fffffff2;box-shadow:0 4px 18px #b8d4ed3b}.partner-card>p{font-size:12px;color:var(--muted);line-height:1.55;margin:2px 0 15px}.partner-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 13px}.partner-section-title h2{display:flex;align-items:center;gap:7px;margin:0;font-size:16px;font-weight:850;line-height:1.25}.partner-section-title h2:before{content:'';width:4px;height:17px;border-radius:99px;background:linear-gradient(#0a8cff,#9e35ef)}.partner-section-title>button{display:flex;align-items:center;color:#7787a8;font-size:11px;white-space:nowrap}.partner-section-title>button svg{width:12px;height:12px}.partner-sticky{padding:13px 16px 18px;display:grid;gap:7px;background:linear-gradient(180deg,#f6faff00,#f6faff 23%)}.partner-gradient-button{display:flex;align-items:center;justify-content:center;gap:14px;min-height:54px;width:100%;padding:10px 17px;border-radius:999px;background:linear-gradient(105deg,#29c4f5,#258cff 35%,#7856f6 68%,#df59e9);box-shadow:inset 0 0 0 2px #ffffff88,0 9px 16px #7a8eee4f;color:#fff;font-weight:800;font-size:17px;text-align:center}.partner-gradient-button svg{width:22px;height:22px}.partner-text-link{color:#4d64a6;font-size:12px;text-align:center;padding:6px}
.partner-benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}.partner-benefit-grid>div{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}.partner-benefit-grid>div>span,.partner-benefit-grid>div>svg{display:grid;place-items:center;width:47px;height:47px;padding:11px;border-radius:16px;color:#8745ed;background:#f5eefe}.partner-benefit-grid>div:nth-child(1)>span{color:#ffa113;background:#fff3e4}.partner-benefit-grid>div:nth-child(2)>span{color:#ee4e9c;background:#fff0f7}.partner-benefit-grid>div:nth-child(3)>span{color:#148ef0;background:#eaf6ff}.partner-benefit-grid b{font-size:11px;white-space:nowrap}.partner-benefit-grid small{font-size:9px;color:#8492b2;line-height:1.25}.partner-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.partner-feature-grid>div{display:flex;align-items:center;gap:5px;padding:10px 7px;background:#f8faff;border-radius:12px;min-height:48px;color:#455b91}.partner-feature-grid svg{width:20px;height:20px;color:#7b4fec}.partner-feature-grid b{color:#1e2956;font-size:10px}.partner-steps{display:flex;align-items:center;justify-content:space-between;text-align:center;font-size:10px;color:#256aca;font-weight:750}.partner-steps>span{padding:12px 5px;background:#edf5ff;border-radius:10px;flex:1}.partner-steps svg{width:13px;height:13px;color:#91a0c0}
.partner-application{margin-top:0;border-radius:20px 20px 16px 16px}.partner-application>p{margin:-6px 0 11px}.partner-application form{display:grid;gap:10px}.partner-application form>label:not(.partner-agreement){display:flex;align-items:center;gap:7px;background:#f9fbff;border:1px solid #ebeff8;border-radius:13px;padding:8px 10px;min-height:52px}.partner-application form>label>span:first-child{display:flex;align-items:center;gap:5px;width:113px;flex:none;font-size:12px;font-weight:800}.partner-application form>label>span:first-child svg{color:#168cf3;width:18px;height:18px}.partner-application form>label>span:first-child em{color:#f32877;font-style:normal}.partner-application form>label>span:first-child small{font-size:10px;font-weight:400;color:#9aa9bd}.partner-application input:not([type=checkbox]){width:100%;min-width:0;height:34px;border:0;background:#f3f7fc;border-radius:7px;padding:0 9px;font-size:12px;outline:0;color:#1b2b55}.partner-application input::placeholder{color:#aab7ce}.partner-referral-help{display:flex;align-items:center;gap:9px;padding:10px;background:#f6f0ff;border-radius:12px;color:#6630dc}.partner-referral-help svg{width:27px;height:27px}.partner-referral-help strong,.partner-referral-help small{display:block}.partner-referral-help strong{font-size:12px}.partner-referral-help small{font-size:10px;color:#8896b1;margin-top:4px}.partner-agreement{display:flex;gap:7px;align-items:flex-start;color:#59729a;font-size:10px;line-height:1.4;padding:2px}.partner-agreement input{accent-color:#067af4;width:15px;height:15px;margin:0}.partner-error{color:#d42165!important;font-size:11px!important;margin:0!important}
.partner-dialog-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#0b163f99;padding:22px}.partner-dialog{position:relative;width:min(100%,400px);padding:31px 24px 25px;border-radius:26px;background:#fff;text-align:center;box-shadow:0 25px 55px #142d6766}.partner-dialog-close{position:absolute;right:13px;top:11px}.partner-dialog-icon{width:63px;height:63px;border-radius:21px;display:grid;place-items:center;margin:0 auto 12px;background:#e4fbf6;color:#09bb93}.partner-dialog-icon svg{width:40px;height:40px}.partner-dialog h2{font-size:22px;margin:0 0 9px}.partner-dialog p{font-size:13px;line-height:1.6;color:#647598}.partner-status-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:99px;background:#eaf3ff;color:#147ce9;font-size:12px;font-weight:800}.partner-invite-link{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:13px;border-radius:9px;background:#f4f7fc;color:#4d6394;font-size:11px;margin:18px 0}.partner-toast{position:fixed;z-index:70;left:50%;bottom:88px;transform:translateX(-50%);max-width:90vw;padding:10px 17px;border-radius:99px;background:#152556e8;color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.partner-status-hero{margin:15px 15px 3px;padding:31px 18px 25px;border-radius:22px;text-align:center;background:linear-gradient(135deg,#e1f5ff,#f5e9ff);box-shadow:0 6px 22px #b2cfea66}.partner-status-hero>svg{width:66px;height:66px;color:#267bf0;background:#fff;border-radius:22px;padding:12px}.partner-status-hero h1{font-size:22px;line-height:1.3;margin:15px 0 8px}.partner-status-hero p{font-size:12px;color:#67789b;line-height:1.6;margin:0}.partner-data-row{display:flex;justify-content:space-between;align-items:center;min-height:42px;border-bottom:1px solid #eef1f8;font-size:12px}.partner-data-row:last-child{border:0}.partner-data-row span{color:#7889a8}.partner-data-row b{font-size:12px}.partner-timeline{display:grid;gap:4px}.partner-timeline>div{display:flex;align-items:center;gap:8px;padding:10px 4px;color:#a7b1c5;font-size:13px;font-weight:750}.partner-timeline svg{width:23px;height:23px;padding:4px;border-radius:50%;background:#eff2f8}.partner-timeline .done{color:#27a585}.partner-timeline .done svg{background:#dff9f1}.partner-timeline .current{color:#237bdf}.partner-timeline .current svg{background:#e7f2ff}.partner-timeline small{margin-left:auto;font-size:10px;color:#9ca9be;font-weight:400}
.partner-demo-note{margin:9px 14px;color:#7c8fb7;background:#eaf4ff;padding:7px 10px;border-radius:8px;text-align:center;font-size:10px}.partner-center-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:-10px 15px 12px;position:relative;background:#fffffff2;border-radius:14px;box-shadow:0 6px 20px #aacbe652;text-align:center;padding:11px 2px}.partner-center-stats>div{border-right:1px solid #e3e9f4}.partner-center-stats>div:last-child{border:0}.partner-center-stats strong,.partner-center-stats small{display:block}.partner-center-stats strong{font-size:21px}.partner-center-stats small{font-size:10px;color:#697c9f}.partner-center-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 13px}.partner-center-nav button{display:flex;align-items:center;flex-direction:column;text-align:center;gap:5px;padding:11px 3px;background:#fff;border-radius:13px;box-shadow:0 3px 11px #c8ddf06b;min-width:0}.partner-center-nav button>span,.partner-center-nav button>svg{display:grid;place-items:center;width:33px;height:33px;color:#2797ee;background:#ebf6ff;border-radius:10px;padding:7px}.partner-center-nav button:nth-child(3)>span,.partner-center-nav button:nth-child(3)>svg{color:#f251a9;background:#fff0f8}.partner-center-nav button:nth-child(4)>span,.partner-center-nav button:nth-child(4)>svg{color:#de882a;background:#fff5e9}.partner-center-nav button:nth-child(5)>span,.partner-center-nav button:nth-child(5)>svg{color:#9055e5;background:#f3edff}.partner-center-nav b{font-size:10px;white-space:nowrap}.partner-center-nav small{font-size:8px;line-height:1.25;color:#8a9bb7;max-width:100%}.partner-level-card,.partner-current{display:flex;align-items:center;gap:11px}.partner-level-card>svg,.partner-current>svg{width:44px;height:44px;padding:9px;color:#e7a337;background:#fff5e3;border-radius:14px}.partner-level-card>div,.partner-current>span{flex:1}.partner-level-card strong,.partner-level-card small,.partner-current b,.partner-current small{display:block}.partner-level-card strong,.partner-current b{font-size:14px}.partner-level-card em,.partner-current em{font-style:normal;color:#e78836;font-size:10px}.partner-level-card small,.partner-current small{font-size:10px;color:#8292ab;line-height:1.5;margin-top:4px}.partner-level-card button{display:flex;align-items:center;gap:3px;color:#fff;font-size:11px;font-weight:700;border-radius:99px;padding:8px;background:linear-gradient(90deg,#24bbf7,#884df3,#d158ed)}.partner-level-card button svg{width:12px;height:12px}.partner-wide-banner{display:flex;align-items:center;gap:8px;width:calc(100% - 26px);min-height:71px;margin:10px 13px;padding:11px;border-radius:15px;text-align:left;background:linear-gradient(100deg,#e8f6ff,#f6e9ff);box-shadow:0 3px 15px #c0d3ec69}.partner-wide-banner>svg:first-child{width:39px;height:39px;color:#7d52ed}.partner-wide-banner span{flex:1}.partner-wide-banner b,.partner-wide-banner small{display:block}.partner-wide-banner b{font-size:12px}.partner-wide-banner small{font-size:9px;color:#8a96b3;margin-top:4px}.partner-wide-banner>svg:last-child{width:16px;height:16px}.partner-wide-banner.gift>svg:first-child{color:#f27ab4}
.partner-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.partner-stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 3px;background:#f8fbff;border-radius:11px;min-width:0}.partner-stat span{color:#3898ee}.partner-stat span svg{width:22px;height:22px}.partner-stat:nth-child(3) span{color:#f2a136}.partner-stat:nth-child(4) span{color:#e94b9b}.partner-stat strong{font-size:15px;line-height:1.3;margin-top:3px;white-space:nowrap}.partner-stat small{font-size:9px;color:#7486a8;white-space:nowrap}.partner-stat em{font-size:8px;color:#e25e83;font-style:normal}.partner-pills{display:flex;justify-content:flex-end;gap:3px;margin:-30px 0 7px}.partner-pills button{font-size:10px;padding:5px 9px;border-radius:99px;color:#8392af}.partner-pills button.active{color:#fff;background:linear-gradient(90deg,#25b9f8,#a33ff1)}.partner-chart{height:135px;display:flex;align-items:flex-end;gap:7px;padding:13px 8px 5px;border-bottom:1px solid #b8cbe7;background:repeating-linear-gradient(to top,transparent 0,transparent 32px,#e8eef8 33px)}.partner-chart>span{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(#7853fa,#379bf3,#cde4ff);opacity:.9}.partner-chart.bar>span{background:linear-gradient(#5d6af2,#d997e4,#f6c390)}
.partner-bottom-nav,.partner-work-nav{display:grid;grid-template-columns:repeat(7,1fr);align-items:center;flex:none;min-height:66px;padding:5px 4px max(6px,env(safe-area-inset-bottom));background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -4px 18px #cbdcf170}.partner-bottom-nav button,.partner-work-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:#6f7d9e}.partner-bottom-nav button svg,.partner-work-nav button svg{width:22px;height:22px}.partner-bottom-nav button.selected,.partner-work-nav button.selected{color:#7541ee;font-weight:800}.partner-nav-orb,.partner-work-nav button.orb{width:42px;height:42px;margin:-15px auto 0;display:grid;place-items:center;border-radius:50%;background:linear-gradient(125deg,#27b9f6,#6b58eb,#f657c5);color:#fff;font-size:27px;font-weight:900;box-shadow:0 4px 10px #8c7ce798}.partner-work-nav{grid-template-columns:repeat(5,1fr)}.partner-work-nav button.orb svg{width:25px;height:25px}.partner-tabs{display:flex;align-items:center;gap:4px;margin:0 13px 8px;overflow-x:auto;background:#fff;border-radius:13px;padding:4px}.partner-tabs button{flex:1;white-space:nowrap;padding:8px 9px;border-radius:10px;color:#788aae;font-size:11px;font-weight:700}.partner-tabs button.active{background:linear-gradient(90deg,#2a98f5,#aa48eb);color:#fff}.partner-tabs.scroll button{flex:none}.partner-tabs.triple button{min-width:0}
.partner-tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.partner-tile-grid button{display:flex;flex-direction:column;gap:4px;padding:8px;background:#f8fbff;border-radius:11px;text-align:left}.partner-tile-grid button span{display:grid;place-items:center;height:50px;border-radius:9px;background:#eef4ff;color:#547feb}.partner-tile-grid button span svg{width:27px;height:27px}.partner-tile-grid b{font-size:10px}.partner-tile-grid small{color:#5385df;font-size:9px}.partner-list{display:grid;gap:2px}.partner-list>button{display:flex;align-items:center;gap:9px;width:100%;min-height:57px;padding:8px 5px;border-bottom:1px solid #edf1f8;text-align:left}.partner-list>button:last-child{border:0}.partner-list>button>svg:first-child{width:31px;height:31px;padding:6px;border-radius:9px;background:#eef4ff;color:#6284de}.partner-list>button span{flex:1;min-width:0}.partner-list b,.partner-list small{display:block}.partner-list b{font-size:11px}.partner-list b em{color:#1b85d9;font-size:9px;font-style:normal}.partner-list small{font-size:9px;color:#8e9eba;margin-top:3px}.partner-list strong{font-size:10px;color:#7037d9}.partner-list>button>svg:last-child{width:14px;height:14px;color:#96a6bd}.partner-chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.partner-chip-grid button{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;background:#f4f8ff;color:#27477f;font-size:11px;font-weight:700}.partner-chip-grid svg{width:13px;height:13px}
.partner-money{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;background:linear-gradient(90deg,#fff2f4,#f6f0ff)}.partner-money>div{min-width:0}.partner-money small,.partner-money strong,.partner-money span{display:block}.partner-money small{font-size:10px;color:#e75c75;font-weight:700}.partner-money>div:nth-child(2) small{color:#9149d9}.partner-money strong{font-size:18px;margin:6px 0}.partner-money span{font-size:9px;color:#7b91b1}.partner-search{display:flex;align-items:center;gap:6px;background:#f4f8fd;border-radius:10px;padding:7px 10px;margin-bottom:9px;color:#8b9cbd}.partner-search svg{width:17px;height:17px}.partner-search input{flex:1;min-width:0;border:0;outline:0;background:none;color:#23366a;font-size:11px}.partner-filter-row{display:flex;gap:5px;overflow-x:auto;padding-bottom:8px}.partner-filter-row button{flex:none;padding:6px 9px;border-radius:99px;background:#f3f7fc;color:#8295b5;font-size:9px}.partner-filter-row button.active{color:#fff;background:#3192ed}.partner-empty{text-align:center;font-size:11px;color:#8e9eba;padding:20px}.partner-progress{display:flex;overflow:hidden;height:12px;border-radius:99px;margin-bottom:11px}.partner-progress span:nth-child(1){background:#299be8}.partner-progress span:nth-child(2){background:#864ff0}.partner-progress span:nth-child(3){background:#ff9f69}.partner-progress span:nth-child(4){background:#65d6aa}
.partner-course-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.partner-course-grid button{display:flex;flex-direction:column;text-align:left;padding:7px;background:#f8fbff;border-radius:11px}.partner-course-art{display:grid;place-items:center;width:100%;height:80px;border-radius:8px;background:linear-gradient(125deg,#d7efff,#a6d3ff,#deccff);color:#fff}.partner-course-art.tone-1{background:linear-gradient(125deg,#45b0f4,#635ae9,#c05ee9)}.partner-course-art.tone-2{background:linear-gradient(125deg,#c8e2fd,#f2d9ed)}.partner-course-art.tone-3{background:linear-gradient(125deg,#bddde9,#b5c7e9)}.partner-course-art svg{width:33px;height:33px}.partner-course-grid b{font-size:11px;margin:6px 0 2px}.partner-course-grid small{font-size:9px;color:#8999b4}.partner-course-grid em{font-size:9px;color:#1679dd;font-style:normal;margin-top:5px}.partner-level-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:0 13px}.partner-level-tabs button{display:flex;align-items:center;flex-direction:column;gap:4px;padding:10px 2px;border:1px solid transparent;border-radius:10px;background:#fff;min-width:0}.partner-level-tabs button.active{border-color:#128af5;background:#e9f5ff}.partner-level-tabs svg{width:22px;height:22px;color:#7d55e5}.partner-level-tabs b{font-size:10px;white-space:nowrap}.partner-level-tabs small{font-size:9px;white-space:nowrap}.partner-level-tabs+.partner-hero-crop{margin-top:10px}
.member-screen .partner-scroll{background:linear-gradient(180deg,#eaf5ff,#f8fbff 350px)}.member-top{height:78px;display:flex;align-items:center;gap:9px;padding:0 13px}.member-top>button{width:28px;height:34px;display:grid;place-items:center}.member-top>button:last-child{margin-left:auto}.member-brand{display:flex;align-items:center;gap:6px;color:#0744b6}.member-brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#27c3f9,#095bed,#9258e6);color:#fff;font-size:26px;font-weight:900}.member-brand strong{font-size:20px;line-height:1}.member-brand small{display:block;font-size:8px;letter-spacing:1px}.member-profile{display:flex;align-items:center;gap:12px;width:calc(100% - 26px);margin:0 13px 10px;padding:13px;border-radius:18px;background:linear-gradient(110deg,#e8ecff,#fff);text-align:left}.member-profile>svg:first-child{width:58px;height:58px;color:#4f8bd9}.member-profile span{flex:1}.member-profile small,.member-profile strong,.member-profile em{display:block}.member-profile small{color:#8b72d4;font-size:10px}.member-profile strong{font-size:16px;margin:4px 0}.member-profile em{font-size:10px;color:#889ab1;font-style:normal}.member-profile>svg:last-child{width:17px}.member-banners{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:0 13px 8px}.member-banners button{display:flex;align-items:center;gap:5px;min-height:72px;padding:9px;border-radius:15px;background:#f2ecff;text-align:left;min-width:0}.member-banners button:nth-child(2){background:#e9f6ff}.member-banners>button>svg:first-child{width:35px;height:35px;color:#985ae7}.member-banners>button:nth-child(2)>svg:first-child{color:#228eef}.member-banners span{flex:1;min-width:0}.member-banners b,.member-banners small{display:block}.member-banners b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-banners small{font-size:8px;color:#8c9db5;line-height:1.4;margin-top:2px}.member-banners>button>svg:last-child{width:12px;height:12px;color:#814ceb}.member-wallet{display:flex;align-items:center;gap:9px;margin:0 13px 16px;padding:12px;border-radius:14px;background:#fff}.member-wallet>svg{width:40px;height:40px;color:#2b99ed}.member-wallet span{flex:1;font-size:11px;font-weight:700}.member-wallet strong{display:block;font-size:19px;margin-top:2px}.member-wallet button{display:flex;align-items:center;color:#1479d7;font-size:10px}.member-wallet button svg{width:12px;height:12px}.member-screen .partner-section-title{padding:0 16px}.member-list{margin:0 13px 16px;padding:0 10px;background:#fff;border-radius:15px}.member-list>button{display:flex;align-items:center;gap:10px;width:100%;min-height:63px;text-align:left;border-bottom:1px solid #eef1f6}.member-list>button:last-child{border:0}.member-list>button>span{width:37px;height:37px;display:grid;place-items:center;background:#f0edff;border-radius:10px;color:#8257e3}.member-list>button>div{flex:1}.member-list b,.member-list small{display:block}.member-list b{font-size:12px}.member-list small{font-size:9px;color:#8998b0;margin-top:3px}.member-list>button>svg:last-child{width:15px;height:15px;color:#9cacc5}
@media(max-width:360px){.partner-center-nav b{font-size:9px}.partner-level-tabs b{font-size:9px}.partner-feature-grid{grid-template-columns:repeat(2,1fr)}.partner-header{grid-template-columns:44px 1fr 62px}.partner-header>strong{font-size:16px}.partner-gradient-button{font-size:14px}}
.intro-benefits{padding:11px 12px}.intro-benefits .partner-section-title{margin-bottom:6px}.intro-benefits>p{margin-bottom:8px}.intro-benefits .partner-benefit-grid{gap:3px}.intro-benefits .partner-benefit-grid>div{gap:2px}.intro-benefits .partner-benefit-grid>div>span{width:39px;height:39px;padding:9px}.intro-benefits .partner-benefit-grid small{font-size:8px}.intro-benefits+.partner-card{padding:11px 12px}.intro-benefits+.partner-card .partner-section-title{margin-bottom:8px}.intro-benefits+.partner-card .partner-feature-grid>div{min-height:39px;padding:6px}.intro-benefits+.partner-card+.partner-card{padding:11px 12px}.intro-benefits+.partner-card+.partner-card .partner-section-title{margin-bottom:8px}
.partner-center-stats{display:none}.partner-demo-note:has(+ .partner-center-stats){margin:0 13px;padding:4px 8px;font-size:9px}
.partner-section-nav{display:flex;gap:6px;margin:8px 13px 0;padding:5px;border-radius:12px;background:#fff;overflow-x:auto}.partner-section-nav button{flex:1;min-width:50px;padding:7px 5px;border-radius:9px;color:#60749a;font-size:11px;font-weight:700;white-space:nowrap}.partner-section-nav button.selected{background:#eee7ff;color:#713bea}
.partner-live .partner-scroll{padding-bottom:100px}.partner-live-hero{margin:12px 16px 0;padding:24px 22px 20px;border-radius:20px;background:linear-gradient(135deg,#132943,#174f61 58%,#267263);color:#fff;box-shadow:0 12px 28px #1a58602a}.partner-live-hero>span{font-size:10px;letter-spacing:2px;color:#b8e8de}.partner-live-hero h1{font-size:25px;line-height:1.3;margin:14px 0 8px}.partner-live-hero p{font-size:13px;line-height:1.6;color:#e4f5f1;margin:0 0 20px}.partner-live-hero>div{display:flex;align-items:center;gap:8px;background:#ffffff22;border:1px solid #ffffff38;border-radius:12px;padding:10px 12px;width:max-content}.partner-live-hero>div svg{width:22px;height:22px;color:#f6dd96}.partner-live-hero>div small{font-size:10px;background:#d9f9ed;color:#197153;border-radius:20px;padding:3px 7px}.partner-live-hero.invite{background:linear-gradient(135deg,#1e4362,#397b83 58%,#7bb3a0)}.partner-live-banner{display:flex;align-items:center;gap:16px;margin:12px 16px 0;padding:24px 20px;border-radius:18px;background:linear-gradient(120deg,#e5f7f2,#d8eef2);color:#194850}.partner-live-banner>svg{width:42px;height:42px;color:#37978b}.partner-live-banner h2{font-size:21px;margin:0 0 6px}.partner-live-banner p{font-size:12px;margin:0;color:#648286}.partner-live-stats{display:flex;justify-content:space-around;gap:8px;margin:16px;padding:12px 6px;border-radius:15px;background:#fff;box-shadow:0 2px 14px #1b665710}.partner-card .partner-live-stats{margin:8px 0 10px;box-shadow:none;background:#f6faf9}.partner-live-stats>div{display:flex;flex-direction:column;align-items:center;min-width:0;flex:1}.partner-live-stats b{font-size:20px;color:#194d4a}.partner-live-stats small{font-size:11px;color:#829295;margin-top:4px}.partner-live-disclosure{color:#829295;font-size:11px;line-height:1.6;margin:8px 0 0}.partner-live-row{display:flex;align-items:center;gap:12px;width:100%;padding:14px 2px;border:0;border-bottom:1px solid #ecf1ef;background:transparent;color:#334744;text-align:left;font-size:14px}.partner-live-row>svg:first-child{width:23px;height:23px;color:#58a18d;flex:none}.partner-live-row>svg:last-child{width:17px;height:17px;margin-left:auto;color:#9caeaa}.partner-live-row span{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.partner-live-row small{font-size:11px;color:#98a9a4}.partner-live-row strong{font-size:12px;color:#398970;white-space:nowrap}.partner-live .partner-invite-link{font-size:20px;letter-spacing:4px;text-align:center;margin:8px 0 20px}
.partner-review{max-width:860px}.partner-review-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.partner-review-top p{color:#677c78;font-size:13px;line-height:1.6}.partner-review-top button{border:1px solid #b8dad1;border-radius:9px;background:#eff9f6;padding:8px 13px;color:#337b66;white-space:nowrap}.partner-review .partner-tabs{max-width:440px}.partner-review .partner-search{max-width:480px}.partner-review-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px}.partner-review-list article{background:#fff;border:1px solid #e5eeeb;border-radius:15px;padding:18px;box-shadow:0 3px 14px #174c3b0b}.partner-review-id{display:flex;align-items:center;gap:8px;margin-bottom:14px}.partner-review-id svg{color:#64a28b}.partner-review-id small{margin-left:auto;color:#899c97;font-size:11px}.partner-review-list .partner-data-row{padding:8px 0}.partner-review-list .partner-data-row b{word-break:break-all}.partner-review-list article>input{width:100%;margin-top:13px;border:1px solid #dbe9e4;border-radius:9px;padding:10px}.partner-review-actions{display:flex;gap:8px;margin-top:12px}.partner-review-actions button{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;border:0;border-radius:9px;padding:10px;color:#fff;background:#42a480;cursor:pointer}.partner-review-actions button+button{background:#b7c4c0}.partner-review-actions button:disabled{opacity:.5;cursor:wait}
.member-brand-mark{font-size:0;background:transparent url('/assets/brand/wobangni-mark-30baf2c901a8.png') center/contain no-repeat;border-radius:0}.member-profile>svg:first-child{display:none}.member-profile::before{content:"";display:block;width:58px;height:58px;flex:none;border-radius:50%;background:#dce7ff url('/brand/partner/avatar.webp') center/cover no-repeat}.member-banners>button>svg:first-child{display:none}.member-banners>button::before{content:"";display:block;width:55px;height:59px;flex:none;border-radius:10px;background:url('/brand/partner/gift.webp') center/cover no-repeat}.member-banners>button:nth-child(2)::before{background-image:url('/brand/partner/mascot.webp')}
.member-logout{display:flex;align-items:center;gap:10px;width:100%;min-height:63px;text-align:left;border:0;background:transparent}.member-logout>span{display:grid;place-items:center;width:37px;height:37px;border-radius:10px;background:#f0edff;color:#8257e3}.member-logout>div{flex:1}.member-logout b,.member-logout small{display:block}.member-logout b{font-size:12px}.member-logout small{font-size:9px;color:#8998b0;margin-top:3px}.member-logout>svg:last-child{width:15px;height:15px;color:#9cacc5}
.member-logout{width:calc(100% - 26px);margin:-16px 13px 16px;padding:0 10px;background:#fff;border-radius:0 0 15px 15px}
.member-app-download{display:flex;align-items:center;gap:10px;margin:0 13px 16px;padding:12px;border:1px solid #dce7ff;border-radius:15px;background:linear-gradient(110deg,#f3edff,#e9f7ff);color:#20345e;text-decoration:none;box-shadow:0 4px 16px #a8c7eb35}.member-app-download>img{width:42px;height:42px;flex:none;border-radius:11px}.member-app-download>span:nth-child(2){flex:1;min-width:0}.member-app-download strong,.member-app-download small{display:block}.member-app-download strong{font-size:13px}.member-app-download small{margin-top:3px;color:#7183a5;font-size:10px}.member-app-download-action{display:flex;align-items:center;gap:3px;flex:none;color:#4168df;font-size:11px;font-weight:700}.member-app-download-action svg{width:16px;height:16px}

/* Approved partner workspace: the supplied artwork supplies the page illustrations;
   account values and controls stay as live HTML above the service data. */
.partner-live .partner-scroll{background:linear-gradient(180deg,#eaf5ff 0,#f8fcff 550px)}
.partner-live .partner-header{background:#eaf5ff}
.partner-live-art{margin:0 13px;width:calc(100% - 26px);border-radius:15px}
.partner-live-floating{position:relative;z-index:1;margin:-22px 22px 13px;width:max-content;max-width:calc(100% - 44px);box-shadow:0 8px 22px #709cda38}
.partner-live-floating>div{min-width:85px;padding:0 8px;border-right:1px solid #e2eaf5}
.partner-live-floating>div:last-child{border-right:0}
.partner-live .partner-center-nav{margin-top:12px}
.partner-live .partner-center-nav button{min-height:96px;border-radius:15px;box-shadow:0 4px 14px #b8d4ed25}
.partner-live .partner-center-nav button>span{background:linear-gradient(135deg,#e2f5ff,#f5e5ff);color:#385df2}
.partner-live .partner-center-nav button>span:has(img){background:none;padding:0}
.partner-live .partner-center-nav button>span img{display:block;width:100%;height:100%;object-fit:contain}
.partner-live .partner-card{box-shadow:0 5px 18px #bed8ed30}
.partner-live .partner-card{padding:12px;margin-top:9px;margin-bottom:9px}
.partner-live .partner-live-stats{background:#f8fbff;box-shadow:none;margin:9px 0}
.partner-live .partner-live-stats{padding:7px 5px}
.partner-live .partner-live-stats b{font-size:18px}
.partner-live .partner-live-stats small{font-size:10px}
.partner-live .partner-live-floating{margin-top:0;margin-bottom:8px;padding:5px 2px}
.partner-live .partner-live-floating b{font-size:18px}
.partner-live .partner-live-floating small{font-size:9px}
.partner-live .partner-live-stats b{color:#101947}
.partner-live .partner-live-stats small{color:#7080a7}
.partner-live-identity{display:flex;align-items:center;gap:12px}
.partner-live-identity>svg{width:42px;height:42px;flex:none;padding:8px;border-radius:13px;color:#f0a33d;background:#fff4df}
.partner-live-identity>span{min-width:0;flex:1}
.partner-live-identity b,.partner-live-identity small{display:block}
.partner-live-identity b{font-size:14px}
.partner-live-identity b em{font-style:normal;font-size:10px;color:#d58f27;background:#fff1d6;padding:3px 5px;border-radius:5px}
.partner-live-identity small{margin-top:5px;font-size:10px;color:#7b8cab}
.partner-live-identity button{display:flex;align-items:center;gap:3px;flex:none;padding:7px 11px;border-radius:99px;color:#fff;background:linear-gradient(105deg,#239deb,#9550f2);font-size:11px;font-weight:750}
.partner-live-identity button svg{width:13px;height:13px}
.partner-live-empty-chart{min-height:105px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;color:#9baed0;font-size:12px}
.partner-live-empty-chart svg{width:36px;height:36px;color:#9dc9ee}
.partner-live .partner-wide-banner{margin:11px 13px;width:calc(100% - 26px)}
.partner-live .partner-live-image-banner{display:block;padding:0;overflow:hidden;box-shadow:0 5px 18px #b8d4ed42;background:#eaf4ff}
.partner-live-image-banner img{display:block;width:100%;height:auto}
.partner-live .partner-tabs{margin:0 13px 9px}
.partner-live .partner-tabs.scroll{overflow-x:auto}
.partner-live .partner-tabs.scroll button{flex:none;white-space:nowrap}
.partner-live .partner-dialog canvas{display:block;width:220px;height:220px;margin:15px auto;border:9px solid white;box-shadow:0 0 0 1px #e5ebf6;border-radius:8px}
.partner-live .partner-dialog .partner-text-link{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px}
.partner-live .partner-dialog .partner-text-link svg{width:16px;height:16px}
.partner-live-course-count{font-size:11px;color:#7184a8}
.partner-live .partner-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.partner-live .partner-course-grid button{border:1px solid #edf2fb}
.partner-live-thumbnail{display:block;width:100%;height:82px;object-fit:cover;border-radius:8px}
.partner-live-officer{display:block;width:100%;height:88px;object-fit:cover;border-radius:8px}
.partner-live .partner-tile-grid button{padding:6px;text-align:left}
.partner-live .partner-tile-grid button>b{font-size:10px;line-height:1.2;margin-top:5px}
.partner-live .partner-tile-grid button>small{font-size:9px}
.partner-live-product{width:52px;height:48px;object-fit:cover;border-radius:7px;flex:none}
.partner-live .partner-work-nav .orb{border-radius:50%;color:#fff;background:linear-gradient(130deg,#13b8f0,#7a48f2)}
@media(max-width:390px){.partner-live-floating>div{min-width:76px}.partner-live .partner-center-nav button{min-height:88px}.partner-live-identity{gap:7px}.partner-live-identity button{padding:6px 7px}}

/* The five upgrade plans share one screen and one working tab strip. */
.partner-live:has(.partner-upgrade) .partner-scroll{background:#f7fbff;padding-bottom:80px}
.partner-live:has(.partner-upgrade) .partner-header{height:47px;background:#edf7ff;grid-template-columns:50px 1fr 91px}
.partner-upgrade-header-action{display:flex;align-items:center;justify-content:center;gap:3px;min-height:29px;padding:4px 7px;border-radius:99px;background:#fff;color:#1688f3;font-size:11px;white-space:nowrap;box-shadow:0 2px 8px #8bc7ef2b}
.partner-upgrade-header-action svg{width:15px;height:15px}
.partner-upgrade{padding:0 0 9px;color:#10184a;background:linear-gradient(180deg,#edf7ff 0,#f6fbff 330px,#fff 600px)}
.partner-upgrade-identity{display:flex;align-items:center;gap:9px;min-height:56px;margin:0 13px 4px;padding:5px 8px;border-radius:11px;background:#ffffffd9;box-shadow:0 3px 12px #afd4ee32}
.partner-upgrade-avatar{position:relative;width:39px;height:39px;flex:none;overflow:hidden;border-radius:50%;background:#fff}
.partner-upgrade-avatar img{position:absolute;left:-17px;top:-59px;display:block;width:350px;height:auto;max-width:none}
.partner-upgrade-identity-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px;white-space:nowrap}
.partner-upgrade-identity-copy b{font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
.partner-upgrade-identity-copy em{display:inline-flex;align-items:center;gap:2px;font-size:8px;font-style:normal;color:#05bc85;background:#e8fff5;border-radius:7px;padding:2px 4px}
.partner-upgrade-identity-copy em svg{width:10px;height:10px}
.partner-upgrade-identity-copy span,.partner-upgrade-identity-copy small{font-size:9px;color:#7180a5;overflow:hidden;text-overflow:ellipsis}
.partner-upgrade-identity>button{display:flex;align-items:center;gap:1px;flex:none;border-radius:99px;background:#edf7ff;color:#5277ab;font-size:8px;padding:6px 5px}
.partner-upgrade-identity>button svg{width:11px;height:11px}
.partner-upgrade-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0 13px 5px}
.partner-upgrade-level{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;height:68px;padding:5px 2px;border:1px solid transparent;border-radius:9px;background:#fff;color:#10184a;box-shadow:0 3px 10px #c9dff334}
.partner-upgrade-level svg{width:23px;height:23px;color:#0bcba4}
.partner-upgrade-tab-icon{position:relative;display:block;width:25px;height:25px;overflow:hidden}
.partner-upgrade-level .partner-upgrade-tab-icon{margin-top:5px}
.partner-upgrade-tab-icon img{display:block;width:1706%;height:auto;max-width:none}
.partner-upgrade-level.spark svg{color:#ff7855}.partner-upgrade-level.pioneer svg{color:#3298ff}.partner-upgrade-level.leader svg{color:#f5b52b}.partner-upgrade-level.brand svg{color:#a955ee}
.partner-upgrade-level b{font-size:10px;white-space:nowrap}.partner-upgrade-level small{font-size:10px;font-weight:750;white-space:nowrap}
.partner-upgrade-level.active{border-color:#228ef6;background:#f3faff;box-shadow:0 3px 10px #80bdf057}
.partner-upgrade-level.active.spark{border-color:#ff9055;background:#fff8f4}.partner-upgrade-level.active.leader{border-color:#efc146;background:#fff9ed}.partner-upgrade-level.active.brand{border-color:#a861eb;background:#fbf4ff}
.partner-upgrade-level i{position:absolute;right:-1px;top:-1px;padding:2px 4px;border-radius:0 8px 0 6px;background:#168df3;color:#fff;font-size:7px;font-style:normal;white-space:nowrap}
.partner-upgrade-level.spark i{background:#fa7e3f}.partner-upgrade-level.leader i{background:#c68320}.partner-upgrade-level.brand i{background:#9d48d6}
.partner-upgrade-hero{position:relative;overflow:hidden;margin:0 13px 5px;border-radius:8px;background:#ecf8ff}
.partner-upgrade-spark .partner-upgrade-hero{margin-top:14px}
.partner-upgrade-hero>img{display:block;width:107.3%;height:auto;max-width:none}
.partner-upgrade-section{margin:5px 13px 7px;padding:8px 9px 10px;border-radius:11px;background:#fff;box-shadow:0 3px 13px #c1d9ee2d}
.partner-upgrade-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:21px;margin-bottom:6px}
.partner-upgrade-heading h2{display:flex;align-items:center;gap:3px;margin:0;min-width:0;color:#11184a;font-size:12px;font-weight:800;white-space:nowrap}
.partner-upgrade-heading h2:before{content:'';display:block;width:3px;height:13px;margin-right:3px;border-radius:5px;background:#158eff}
.partner-upgrade-heading h2 span{font-size:11px;font-weight:500;color:#6b789b}
.partner-upgrade-heading>span{font-size:8px;color:#8394b4}
.partner-upgrade-heading button{display:flex;align-items:center;gap:1px;color:#1689ee;font-size:9px;white-space:nowrap}
.partner-upgrade-heading button svg{width:10px;height:10px}
.partner-upgrade-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.partner-upgrade-tile{display:flex;align-items:center;flex-direction:column;justify-content:flex-start;min-width:0;min-height:86px;padding:7px 2px 5px;border-radius:8px;background:#f5faff;text-align:center}
.partner-upgrade-tile svg{width:23px;height:23px;margin-bottom:6px;color:#269ef0;filter:drop-shadow(0 2px 3px #79b7f466)}
.partner-upgrade-tile:nth-child(2) svg{color:#f6ad2e}.partner-upgrade-tile:nth-child(3) svg{color:#21cbb3}.partner-upgrade-tile:nth-child(4) svg{color:#9757ef}
.partner-upgrade-tile b{max-width:100%;font-size:9px;line-height:1.4;overflow-wrap:anywhere}
.partner-upgrade-tile span{font-size:8px;line-height:1.35;color:#26365c;overflow-wrap:anywhere}
.partner-upgrade-tile small{font-size:7.5px;line-height:1.35;color:#8994ae;overflow-wrap:anywhere}
.partner-upgrade-support-section{padding-top:6px;padding-bottom:6px}
.partner-upgrade-support-section .partner-upgrade-tile{min-height:66px}
.partner-upgrade-support-section .partner-upgrade-tile svg{margin-bottom:3px}
.partner-upgrade-six{grid-template-columns:repeat(3,minmax(0,1fr))}
.partner-upgrade-six .partner-upgrade-tile{align-items:flex-start;min-height:55px;padding:7px 5px 7px 34px;position:relative;text-align:left}
.partner-upgrade-six .partner-upgrade-tile svg{position:absolute;left:6px;top:10px;width:22px;height:22px}
.partner-upgrade-rewards-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.partner-upgrade-rewards-grid>div{display:flex;align-items:center;flex-direction:column;min-width:0;padding:5px 1px 7px;border-radius:7px;background:#f6faff;text-align:center}
.partner-upgrade-rewards-grid svg{width:21px;height:21px;margin-bottom:5px;color:#399df2}
.partner-upgrade-rewards-grid>div:nth-child(2) svg{color:#f2598b}.partner-upgrade-rewards-grid>div:nth-child(3) svg{color:#3fb1f7}.partner-upgrade-rewards-grid>div:nth-child(4) svg{color:#29c9a6}.partner-upgrade-rewards-grid>div:nth-child(5) svg{color:#559ff3}
.partner-upgrade-rewards-grid b{font-size:8px;white-space:nowrap}.partner-upgrade-rewards-grid strong{margin-top:2px;color:#ed4c78;font-size:9px;white-space:nowrap}.partner-upgrade-rewards-grid small{font-size:7px;color:#7584a6;white-space:nowrap}
.partner-upgrade-rewards-list{display:grid;gap:1px}.partner-upgrade-rewards-list>div{display:grid;grid-template-columns:22px minmax(0,1fr) 76px 74px;align-items:center;gap:5px;min-height:45px;padding:5px 2px;border-bottom:1px solid #edf1f7}
.partner-upgrade-rewards-list>div:last-child{border-bottom:0}.partner-upgrade-rewards-list svg{width:20px;height:20px;color:#f25589}.partner-upgrade-rewards-list>div>span{display:flex;flex-direction:column;min-width:0}.partner-upgrade-rewards-list b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.partner-upgrade-rewards-list small{font-size:7.5px;color:#8e9bb4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.partner-upgrade-rewards-list strong{font-size:9px;color:#ea4676;white-space:nowrap}
.partner-upgrade-rewards-list>div>span:last-child strong{color:#a044e6}
.partner-upgrade-growth>div:last-child{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.partner-upgrade-growth>div:last-child>span{display:grid;grid-template-columns:20px 1fr;grid-template-rows:auto auto;column-gap:3px;min-width:0}
.partner-upgrade-growth>div:last-child svg{grid-row:span 2;width:18px;height:18px;color:#279ef5}.partner-upgrade-growth b{font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.partner-upgrade-growth small{font-size:7px;color:#d363e8;white-space:nowrap}
.partner-upgrade-fit .partner-upgrade-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.partner-upgrade-fit .partner-upgrade-tile{min-height:66px;align-items:flex-start;position:relative;padding:8px 3px 5px 33px;text-align:left}
.partner-upgrade-fit .partner-upgrade-tile svg{position:absolute;left:5px;top:8px}
.partner-upgrade-detail{margin:7px 1px 0;padding:7px;border-radius:6px;background:#eef7ff;color:#637498;font-size:9px;line-height:1.5}
.partner-upgrade-footer{position:fixed;left:50%;bottom:66px;transform:translateX(-50%);width:min(100%,480px);z-index:5;display:flex;align-items:center;gap:6px;min-height:66px;margin-top:8px;padding:8px 13px;background:#fffffff4;box-shadow:0 -4px 14px #b6d9ed3d}
.partner-upgrade-footer>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.partner-upgrade-footer strong{color:#0984f6;font-size:14px;white-space:nowrap}.partner-upgrade-leader .partner-upgrade-footer strong{color:#c17b10}.partner-upgrade-spark .partner-upgrade-footer strong{color:#ed694d}.partner-upgrade-footer small{font-size:7.5px;color:#8090ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.partner-upgrade-footer>button{display:flex;align-items:center;justify-content:center;gap:3px;min-height:40px;min-width:44%;padding:6px 9px;border-radius:99px;background:linear-gradient(95deg,#18b6f6,#8753f2);box-shadow:0 4px 12px #779ef489;color:#fff;font-size:11px;font-weight:750;white-space:nowrap}
.partner-upgrade-spark .partner-upgrade-footer>button{background:linear-gradient(95deg,#ffa944,#ff6574)}.partner-upgrade-leader .partner-upgrade-footer>button{background:linear-gradient(95deg,#efca49,#f29b1c)}.partner-upgrade-brand .partner-upgrade-footer>button{background:linear-gradient(95deg,#b76bf7,#7651f0)}
.partner-upgrade-footer>button:disabled{opacity:.6;cursor:wait}.partner-upgrade-footer>button svg{width:15px;height:15px}
.partner-upgrade-disclaimer{margin:8px 16px 0;color:#9aabc2;font-size:8px;line-height:1.35;text-align:center}
.partner-upgrade-compare-trigger{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.partner-upgrade-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:#0a1a4399;padding:12px}
.partner-upgrade-overlay>div{width:min(100%,450px);padding:14px;border-radius:20px;background:#fff;box-shadow:0 18px 50px #10286055}
.partner-upgrade-overlay header{display:flex;align-items:center;justify-content:space-between;margin:2px 0 10px}.partner-upgrade-overlay header strong{font-size:17px}.partner-upgrade-overlay header button{display:grid;place-items:center;width:28px;height:28px}
.partner-upgrade-overlay>div>button{display:flex;align-items:center;gap:9px;width:100%;min-height:54px;border-bottom:1px solid #edf2fa;text-align:left}.partner-upgrade-overlay>div>button:last-child{border-bottom:0}.partner-upgrade-overlay>div>button>svg:first-child{color:#449bf2}.partner-upgrade-overlay>div>button span{display:flex;flex:1;flex-direction:column}.partner-upgrade-overlay>div>button b{font-size:12px}.partner-upgrade-overlay>div>button small{font-size:9px;color:#91a0b8}.partner-upgrade-overlay>div>button strong{font-size:11px;color:#148aed}
@media(max-width:360px){.partner-upgrade-identity>button{display:none}.partner-upgrade-levels{gap:3px;margin-inline:8px}.partner-upgrade-section,.partner-upgrade-hero{margin-inline:8px}.partner-upgrade-level b,.partner-upgrade-level small{font-size:9px}.partner-upgrade-rewards-list>div{grid-template-columns:20px minmax(0,1fr) 64px 65px;gap:3px}.partner-upgrade-rewards-list strong{font-size:8px}}
.partner-upgrade-body-art{position:relative;overflow:hidden;width:calc(100% - 26px);margin:0 13px;background:#fff}
.partner-upgrade-body-art>img{display:block;width:107.3%;height:auto;max-width:none}
.partner-upgrade-art-hotspot{position:absolute;right:1%;width:18%;height:5%;border-radius:8px;background:transparent}
.partner-upgrade-art-hotspot:focus-visible{outline:2px solid #168df3;outline-offset:-2px}
.partner-upgrade>.partner-upgrade-section{display:none}
.partner-upgrade-footer-art{display:block;min-height:0;padding:0;overflow:hidden;border-radius:0;background:#fff;box-shadow:0 -4px 14px #b6d9ed3d}
.partner-upgrade-footer-art>img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none}
.partner-upgrade .partner-upgrade-footer-art>button{position:absolute;top:4%;right:1%;bottom:4%;width:56%;min-height:0;padding:0;border-radius:0;background:transparent;box-shadow:none}
.partner-upgrade-footer-art>button:disabled{opacity:1;cursor:wait}
.partner-upgrade-brand .partner-upgrade-footer-art>button[aria-label^="升级"]{width:42%}
.partner-upgrade-brand .partner-upgrade-footer-art>button.partner-upgrade-consult{left:42%;right:auto;width:23%}
.partner-upgrade-footer-art>button span{padding:5px 9px;border-radius:99px;background:#13234ad9;color:#fff;font-size:10px}
.partner-upgrade-detail-list{max-height:50dvh;overflow-y:auto}.partner-upgrade-detail-list p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:11px 4px;border-bottom:1px solid #edf2f8;font-size:11px}.partner-upgrade-detail-list p b{min-width:84px}.partner-upgrade-detail-list p span{color:#7584a2;text-align:right}.partner-upgrade-detail-legal{display:block;margin:10px 0 3px;color:#8c9ab3;font-size:9px}
.partner-upgrade-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.partner-pending-notice{max-width:365px;padding-top:22px}
.partner-pending-notice>img{display:block;width:min(78%,260px);height:auto;margin:2px auto 8px;border-radius:16px}
.partner-pending-notice h2{font-size:24px;line-height:1.35;color:#111747}
.partner-pending-notice h2 em{font-style:normal;color:#674bf4}
.partner-pending-notice p{margin:12px 0 20px}
.partner-pending-notice .partner-text-link{display:block;width:100%;margin-top:7px}
.partner-finance-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:16px 0 24px; }
.partner-finance-form input,.partner-finance-form select,.partner-finance-form button,.partner-finance-form label { min-height:42px; border:1px solid #dce3f4; border-radius:10px; padding:9px 12px; background:#fff; color:#20294b; font:inherit; }
.partner-finance-form label { display:flex; align-items:center; gap:8px; }
.partner-finance-form label input { min-width:0; border:0; padding:0; }
.partner-finance-form button { background:#344bc2; color:#fff; cursor:pointer; }
/* The account content follows the supplied 853px reference at a 390px phone width. */
.member-screen { color: #101429; }
.member-screen .partner-scroll { padding-bottom: 14px; background: linear-gradient(180deg, #f4f8ff 0%, #fafcff 58%, #f7faff 100%); }
.member-content { padding: 31px 13px 0; }
.member-screen .member-profile { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; height: 86px; margin: 0 0 8px; padding: 10px 13px 10px 9px; overflow: hidden; border: 1px solid #d8ddf5; border-radius: 18px; background: linear-gradient(116deg, #f4f5ff 0%, #ebedff 55%, #f8faff 100%); box-shadow: 0 7px 17px #b6c6e24a; }
.member-screen .member-profile::before { display: none; }
.member-profile::after { content: ''; position: absolute; width: 156px; height: 156px; right: -42px; bottom: -79px; border-radius: 50%; background: #ffffffa3; transform: rotate(-20deg); pointer-events: none; }
.member-profile-avatar { position: relative; z-index: 1; width: 68px; height: 68px; flex: none; border: 2px solid white; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 10px #9db4db70; }
.member-profile-details { position: relative; z-index: 1; min-width: 0; flex: 1; }
.member-screen .member-profile-details > small { color: #9e89d8; font-size: 10px; font-weight: 600; }
.member-profile-name { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; margin: 7px 0 0; padding: 0; text-align: left; }
.member-profile-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 1.2; font-weight: 800; }
.member-screen .member-profile-name .member-level { flex: none; }
.member-level { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 3px 5px; border-radius: 12px; color: #8358d9; background: #e9e1ff; font-size: 9px; font-weight: 700; }
.member-level svg { width: 12px !important; height: 12px !important; }
.member-profile-arrow { position: relative; z-index: 1; display: grid; place-items: center; color: #79829c; }
.member-profile-arrow svg { width: 18px; height: 18px; }

.member-screen .member-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 3px 7px; }
.member-screen .member-banners button { position: relative; min-width: 0; height: 67px; min-height: 67px; gap: 0; padding: 0 5px 0 4px; overflow: hidden; border: 1px solid #ddcefa; border-radius: 16px; background: linear-gradient(112deg, #f7f1ff, #f5f1ff 65%, #f9f6ff); box-shadow: 0 5px 13px #c9b7eb40; }
.member-screen .member-banners button:nth-child(2) { border-color: #f7d9c6; background: linear-gradient(108deg, #fff1e9, #fff0e5 70%, #fff9f3); }
.member-screen .member-banners button::before { display: none; }
.member-banners .member-banner-invite > img { display: block; width: 70px; height: 64px; flex: none; object-fit: contain; }
.member-banners .member-partner-art { display: block; width: 60px; height: 63px; flex: none; background: url('/brand/partner/member-reference.png') -202px -189px / 390px 841px no-repeat; }
.member-screen .member-banners button > span:nth-child(2) { min-width: 0; flex: 1; }
.member-screen .member-banners b { color: #111545; font-size: 14px; letter-spacing: -.5px; }
.member-screen .member-banners button:nth-child(2) b { color: #ba2517; }
.member-screen .member-banners button:nth-child(2) b { font-size: 12px; }
.member-screen .member-banners small { margin-top: 4px; color: #69728f; font-size: 7px; white-space: nowrap; }
.member-screen .member-banners button:nth-child(2) small { color: #e57649; }
.member-screen .member-banners i { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #7958ec; color: #fff; }
.member-screen .member-banners button:nth-child(2) i { background: #ff9a66; }
.member-screen .member-banners i svg { width: 13px; height: 13px; }

.member-screen .member-wallet { display: flex; align-items: center; height: 70px; gap: 0; margin: 0 3px 12px; padding: 7px 7px 7px 6px; border: 1px solid #eef0fb; border-radius: 17px; background: linear-gradient(102deg, #f4f7ff, #fff); box-shadow: 0 5px 13px #d4def05b; }
.member-screen .member-wallet > .member-wallet-art { display: block; width: 54px; height: 56px; flex: 0 0 54px; overflow: hidden; background: url('/brand/partner/member-reference.png') -21px -270px / 390px 841px no-repeat; }
.member-wallet-balance { min-width: 0; flex: 1 1 auto; padding-left: 3px; }
.member-screen .member-wallet-balance > span { display: block; flex: none; color: #12182d; font-size: 10px; font-weight: 700; white-space: nowrap; }
.member-wallet-balance strong { display: block; margin-top: 1px; font-size: 23px; line-height: 1.2; font-weight: 800; white-space: nowrap; }
.member-screen .member-recharge { display: flex; align-items: center; gap: 1px; align-self: end; margin: 0 7px 12px 0; color: #3479da; font-size: 10px; white-space: nowrap; }
.member-recharge svg { width: 13px; height: 13px; }
.member-wallet-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 143px; height: 100%; flex: 0 0 143px; padding-left: 6px; border-left: 1px solid #e7eaf4; }
.member-wallet-actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 4px 2px; border-radius: 11px; background: #fff; box-shadow: 0 3px 9px #d9e1f45c; }
.member-wallet-actions button svg { width: 22px; height: 22px; color: #398af1; }
.member-wallet-actions button:last-child svg { color: #8658e8; }
.member-screen .member-wallet-actions button span { flex: none; color: #131729; font-size: 8px; font-weight: 700; white-space: nowrap; }

.member-section-heading { display: flex; justify-content: space-between; align-items: center; height: 22px; margin: 0 3px 8px; }
.member-section-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 800; }
.member-section-heading h2::before { content: ''; display: block; width: 4px; height: 12px; border-radius: 4px; background: #7c5bf6; }
.member-section-heading > small { display: flex; align-items: center; color: #929ab1; font-size: 9px; }
.member-section-heading > small svg { width: 10px; height: 10px; }
.member-screen .member-list { margin: 0 3px 13px; padding: 1px 13px; border: 1px solid #edf0f9; border-radius: 17px; background: #fff; box-shadow: 0 6px 17px #d6deef57; }
.member-screen .member-list > button { min-height: 50px; gap: 12px; border-color: #edf0f5; }
.member-screen .member-list > button > span { width: 37px; height: 37px; flex: none; border-radius: 10px; background: #f0edff; color: #7959ef; }
.member-screen .member-list > button > span svg { width: 22px; height: 22px; }
.member-screen .member-list > button > div { min-width: 0; }
.member-screen .member-list b { font-size: 11px; font-weight: 750; }
.member-screen .member-list small { margin-top: 3px; color: #939cb2; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-screen .member-list > button > svg:last-child { width: 13px; height: 13px; color: #8790a6; }
.member-screen .member-device-list { margin-bottom: 4px; }
@media (max-width: 365px) { .member-content { padding-left: 9px; padding-right: 9px; } .member-banners .member-banner-invite > img, .member-banners .member-partner-art { width: 57px; } .member-screen .member-banners b { font-size: 12px; } .member-screen .member-wallet > .member-wallet-art { width: 48px; flex-basis: 48px; } .member-wallet-balance strong { font-size: 19px; } .member-wallet-actions { width: 126px; flex-basis: 126px; gap: 2px; padding-left: 5px; } }
.officer-share-management{margin-top:24px}.officer-share-management h2{margin-bottom:8px}.officer-share-management>p{line-height:1.6}.officer-share-configs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.officer-share-configs article{display:grid;gap:8px;padding:16px;border:1px solid #e7e1f6;border-radius:14px;background:#fff}.officer-share-configs h3{margin:0}.officer-share-configs label{display:grid;gap:5px;font-size:12px}.officer-share-configs input{min-width:0;padding:8px;border:1px solid #ddd4f0;border-radius:8px}.officer-share-configs button{padding:9px;border:0;border-radius:9px;background:#7654df;color:#fff}.officer-share-configs button:disabled{opacity:.5}.officer-share-configs span{font-size:12px;color:#6e6393}.officer-share-table{overflow:auto}.officer-share-table table{width:100%;border-collapse:collapse;font-size:12px}.officer-share-table th,.officer-share-table td{min-width:90px;padding:9px;border-bottom:1px solid #ede9f6;text-align:left;word-break:break-all}.officer-share-table th{background:#f5f1ff}.officer-share-table td:nth-child(2),.officer-share-table td:nth-child(3){min-width:140px}
.officer-management{margin-top:22px;color:#253b58}.officer-management>p,.officer-management section>p{font-size:13px;line-height:1.65;color:#667b98}.officer-management-actions{display:flex;align-items:center;gap:12px;margin:18px 0}.officer-management-actions span{font-size:12px;color:#507293}.officer-management button{border:0;background:#2d83d8;color:white;border-radius:9px;padding:10px 15px;font-size:13px;font-weight:700;cursor:pointer}.officer-management button:disabled{opacity:.5;cursor:default}.officer-management section{border:1px solid #e4ebf6;border-radius:14px;padding:18px;margin:15px 0}.officer-management h2{font-size:18px;margin:0 0 13px}.officer-management h2 small{font-size:12px;color:#8da0b8;font-weight:400}.officer-management-table{overflow-x:auto;margin-bottom:15px}.officer-management table{border-collapse:collapse;width:100%;min-width:620px}.officer-management th,.officer-management td{padding:9px;border-bottom:1px solid #edf1f7;text-align:left;font-size:12px;white-space:nowrap}.officer-management th{color:#8190a4}.officer-management td:first-child{font-weight:700}.officer-management select,.officer-management input[type=number]{border:1px solid #d9e3f0;border-radius:7px;background:#fff;padding:7px;color:#253b58;font:inherit}.officer-management td input[type=number]{width:64px}.officer-management input[type=checkbox]{width:18px;height:18px;accent-color:#2d83d8}.officer-management-price{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;font-size:13px}.officer-management-price input{width:85px}.officer-management code{font-size:12px;background:#eff5fb;padding:2px 4px;border-radius:4px}
.app-factory-admin{font-family:inherit;color:#272438;max-width:1500px;margin:auto}.app-factory-admin *{box-sizing:border-box}.app-factory-admin button{cursor:pointer}.af-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:10px 0 27px}.af-head p{margin:0 0 7px;color:#7856e9;font-size:13px;font-weight:800;letter-spacing:.08em}.af-head h2{font-size:31px;margin:0 0 7px}.af-head span{color:#777586;font-size:14px}.af-primary,.af-ai button,.af-member-form button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;background:linear-gradient(135deg,#7951f7,#5c8dfc);color:#fff;padding:11px 17px;font-weight:750;white-space:nowrap}.af-primary:disabled,.af-ai button:disabled,.af-member-form button:disabled{opacity:.48;cursor:not-allowed}.af-message{border-radius:10px;background:#f0ebff;color:#5b3ccc;padding:11px 14px;margin:0 0 18px}.af-list{display:grid;gap:11px}.af-list-item{display:flex;align-items:center;text-align:left;gap:15px;width:100%;background:#fff;border:1px solid #e9e6ef;border-radius:16px;padding:16px;color:inherit}.af-list-item:hover{border-color:#9d8bfa;box-shadow:0 10px 24px #5037b112}.af-list-item>span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0}.af-list-item strong{font-size:17px}.af-list-item small{color:#858190;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.af-list-item em{font-size:12px;font-style:normal;background:#f2f0f5;color:#77727d;padding:6px 10px;border-radius:99px}.af-list-item em.is-live{background:#e9f7ed;color:#279457}.af-app-avatar{display:grid;place-items:center;flex:none;width:45px;height:45px;border-radius:13px;color:#fff;font-size:21px;font-weight:800}.af-empty{padding:50px;text-align:center;border:1px dashed #dcd6ee;border-radius:18px;color:#868090}.af-toolbar{display:flex;align-items:center;gap:15px;flex-wrap:wrap;border-bottom:1px solid #eae7ef;padding:0 0 14px;margin-bottom:18px}.af-toolbar>button:first-child{border:0;background:transparent;color:#7554dd;padding:9px 0}.af-toolbar strong{font-size:17px}.af-toolbar span{margin-left:auto;color:#948f9b;font-size:13px}.af-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start}.af-editor{min-width:0;background:#fff;border:1px solid #eae7ef;border-radius:17px;overflow:hidden}.af-tabs{display:flex;overflow-x:auto;gap:2px;border-bottom:1px solid #eeeaf2;padding:8px 10px 0}.af-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;padding:12px 14px;white-space:nowrap;color:#7e7888;font-weight:700}.af-tabs button.active{color:#6c47e9;border-bottom-color:#7951f7}.af-panel{padding:24px;max-height:74vh;overflow:auto}.af-panel>h3{margin:0 0 7px;font-size:21px}.af-panel>p{color:#817c89;margin:0 0 22px;font-size:13px;line-height:1.6}.af-fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:19px}.af-field{display:grid;gap:7px;font-size:13px;font-weight:700}.af-field span{color:#5f596a}.af-field input,.af-field textarea,.af-field select,.af-ai textarea,.af-member-form input,.af-member-form select{font:inherit;width:100%;border:1px solid #ded9e9;border-radius:10px;background:#fff;padding:10px 11px;color:#292431;outline:none}.af-field textarea,.af-ai textarea{resize:vertical;line-height:1.5}.af-field input:focus,.af-field textarea:focus,.af-field select:focus,.af-ai textarea:focus,.af-member-form input:focus{border-color:#8b6cf2;box-shadow:0 0 0 3px #8764ee19}.af-field small{font-size:12px;font-weight:400;color:#908999}.af-colors{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.af-colors label{display:flex;align-items:center;gap:9px;background:#f8f7fb;border-radius:10px;padding:10px}.af-colors span{flex:1;font-size:13px}.af-colors input{width:32px;height:28px;border:0;background:transparent}.af-colors code{color:#74707f}.af-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.af-blocks label{display:flex;align-items:center;justify-content:space-between;border:1px solid #e9e6ee;border-radius:11px;padding:12px 14px}.af-blocks label span{display:grid;gap:3px}.af-blocks small{color:#a29ba9;font-size:11px}.af-blocks input{accent-color:#7b55ee;width:19px;height:19px}.af-collection{border-top:1px solid #eeeaf3;padding-top:19px;margin-top:20px}.af-collection-title,.af-collection-item-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.af-collection-title h3{font-size:16px;margin:0}.af-collection-title small{color:#9993a1;font-size:12px}.af-collection-title button,.af-collection-item-heading button,.af-domain button{display:inline-flex;align-items:center;gap:5px;border:0;background:#f2edff;color:#6e4bd6;border-radius:8px;padding:7px 10px}.af-collection-item{border:1px solid #ece8f0;border-radius:11px;padding:13px;margin:11px 0}.af-collection-item-heading{margin-bottom:11px}.af-collection-item-heading b{font-size:13px}.af-collection-item-heading button{color:#a45b73;background:#fff2f5}.af-ai{border-radius:15px;background:linear-gradient(135deg,#f3efff,#eaf7ff);padding:17px;margin-top:25px}.af-ai h3{display:flex;align-items:center;gap:7px;margin:0;font-size:17px;color:#6845cf}.af-ai p{color:#77718a;font-size:13px;line-height:1.6}.af-ai textarea{margin-bottom:9px}.af-ai button{margin-right:9px}.af-member-form{display:flex;gap:8px;flex-wrap:wrap}.af-member-form input{flex:1;min-width:140px}.af-member-form select{width:130px}.af-member-list{margin-top:20px}.af-member-list>div{display:flex;align-items:center;gap:12px;border-bottom:1px solid #eeeaf3;padding:12px 0}.af-member-list strong{flex:1}.af-member-list span{font-size:13px;color:#7f748f}.af-member-list button{border:0;background:transparent;color:#a7697e}.af-domain{display:flex;align-items:center;gap:12px;background:#f6f2ff;border-radius:12px;padding:15px}.af-domain>div{display:grid;gap:4px;flex:1;min-width:0}.af-domain strong{word-break:break-word}.af-domain small{font-size:12px;color:#91899c}.af-release-line{display:flex;align-items:center;justify-content:space-between;gap:10px}.af-release-line span{font-size:13px;color:#6d6873}.af-preview{position:sticky;top:16px;border-radius:18px;background:#ece8f2;padding:16px;max-height:80vh;overflow:auto}.af-phone{width:100%;min-height:590px;overflow:hidden;border:5px solid #25232b;border-radius:28px;background:var(--af-bg);color:var(--af-text);box-shadow:0 18px 35px #221d3530}.af-phone-status{height:28px;display:flex;justify-content:space-between;padding:8px 14px 0;font-size:10px;font-weight:800;background:#fff}.af-phone-top{display:flex;align-items:center;gap:9px;background:#fff;padding:12px 13px}.af-phone-top strong{font-size:15px;flex:1}.af-phone-top img{max-width:92px;max-height:24px;object-fit:contain;flex:1}.af-phone-top small{border-radius:20px;background:#f5f3f3;padding:6px;font-size:10px}.af-phone-notice{display:flex;gap:7px;align-items:center;margin:7px 8px;background:#fff;border-radius:17px;padding:7px 10px;font-size:10px;white-space:nowrap;overflow:hidden}.af-phone-notice b{color:var(--af-primary);flex:none}.af-phone-notice span{overflow:hidden;text-overflow:ellipsis}.af-phone-hero{height:190px;background:linear-gradient(115deg,#f3ebe6 25%,#d8c8c0 65%,#f5ede6);background-size:cover;background-position:center;display:flex;align-items:center;padding:18px}.af-phone-hero>div{max-width:65%}.af-phone-hero h2{white-space:pre-line;font-size:22px;line-height:1.22;margin:0 0 8px}.af-phone-hero p{font-size:12px;margin:0 0 10px}.af-phone-hero small{font-size:10px}.af-phone-actions{display:flex;justify-content:space-around;gap:2px;flex-wrap:wrap;background:#fff;border-radius:18px;padding:11px 4px;margin:-6px 3px 0;position:relative}.af-phone-actions span{display:grid;text-align:center;gap:3px;font-size:10px;min-width:42px}.af-phone-actions i{font-size:19px;font-style:normal}.af-phone-metrics{display:flex;background:#fff;padding:10px 6px;gap:3px}.af-phone-metrics>div{display:grid;gap:3px;flex:1;padding-left:5px;border-right:1px solid #eee;min-width:0}.af-phone-metrics small{font-size:9px;white-space:nowrap}.af-phone-metrics strong{font-size:13px}.af-phone-metrics em{color:var(--af-primary);font-size:10px;font-style:normal}.af-phone-composer{display:flex;align-items:center;justify-content:space-between;margin:8px;background:#fff;border:1px solid #ddd;border-radius:20px;padding:9px 12px;font-size:11px;color:#777}.af-phone-composer span{display:grid;place-items:center;border-radius:50%;background:var(--af-primary);color:#fff;width:22px;height:22px}.af-phone-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 8px}.af-phone-cards>div{min-height:72px;border-radius:10px;background:linear-gradient(135deg,#eee9e7,#fdfaf9);background-size:cover;background-position:center;padding:11px;display:grid;align-content:start;gap:4px}.af-phone-cards>div:first-child{grid-row:span 2;min-height:150px}.af-phone-cards strong{font-size:12px}.af-phone-cards small{font-size:9px;line-height:1.35}.af-phone-agents{padding:8px}.af-phone-agents h3{font-size:13px;margin:5px 0 9px}.af-phone-agents>div{display:flex;gap:5px;overflow:hidden}.af-phone-agents span{min-width:61px;background:#fff;border-radius:8px;padding:8px 4px;display:grid;text-align:center;gap:3px}.af-phone-agents i{font-style:normal;font-size:18px;color:var(--af-primary)}.af-phone-agents b{font-size:10px}.af-phone-agents small{font-size:8px;color:#7f7a84;line-height:1.3}.af-phone-banner{display:grid;gap:4px;margin:0 8px 8px;border-radius:10px;padding:11px;background:linear-gradient(110deg,#e6dcd2,#faf7f5)}.af-phone-banner strong{font-size:12px}.af-phone-banner small{font-size:9px}.af-phone-nav{display:flex;justify-content:space-around;background:#fff;padding:9px 3px}.af-phone-nav span{display:grid;text-align:center;color:var(--af-primary);font-size:13px}.af-phone-nav small{font-size:9px;color:#39343f}.af-dialog-backdrop{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#1e183b80;padding:20px}.af-dialog{background:#fff;border-radius:19px;padding:25px;width:min(480px,100%);max-height:90vh;overflow:auto;box-shadow:0 20px 70px #150e3d33}.af-dialog-head{display:flex;align-items:center;justify-content:space-between}.af-dialog-head h2{margin:0}.af-dialog-head button{border:0;background:transparent;font-size:25px}.af-dialog>p{color:#797583;font-size:13px;line-height:1.6}.af-editions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:17px 0}.af-editions button{display:grid;gap:4px;text-align:left;padding:14px;border:1px solid #e6e1ef;border-radius:11px;background:#fff}.af-editions button.active{border-color:#835eff;background:#f6f2ff}.af-editions small{color:#8b8492}.af-dialog>.af-field{margin:12px 0}.af-create{width:100%;margin-top:13px}
@media(max-width:1050px){.af-editor-layout{grid-template-columns:1fr}.af-preview{position:static;max-width:390px;margin:auto;width:100%;max-height:none}.af-panel{max-height:none}}@media(max-width:640px){.af-head{align-items:flex-start}.af-head h2{font-size:26px}.af-head span{display:none}.af-fields-grid,.af-colors,.af-blocks{grid-template-columns:1fr}.af-panel{padding:17px}.af-toolbar span{display:none}.af-preview{padding:9px}.af-domain{flex-wrap:wrap}}
.af-phone-actions button,.af-phone-nav button{display:grid;text-align:center;gap:3px;font:inherit;border:0;background:transparent;color:inherit;min-width:42px;padding:0}.af-phone-actions button i{font-size:19px;font-style:normal}.af-phone-cards>button{min-height:72px;border:0;text-align:left;color:inherit;border-radius:10px;background:linear-gradient(135deg,#eee9e7,#fdfaf9);background-size:cover;background-position:center;padding:11px;display:grid;align-content:start;gap:4px}.af-phone-cards>button:first-child{grid-row:span 2;min-height:150px}.af-phone-cards>button strong{font-size:12px}.af-phone-cards>button small{font-size:9px;line-height:1.35}.af-phone-banner{border:0;width:calc(100% - 16px);text-align:left;color:inherit}.af-phone-nav button{color:var(--af-primary);font-size:13px}.af-phone-nav button small{color:#39343f}.af-runtime{min-height:100dvh;background:var(--af-bg);color:var(--af-text)}.af-runtime .af-phone{width:min(100%,720px);min-height:100dvh;margin:auto;border:0;border-radius:0;box-shadow:none}.af-runtime .af-phone-status{height:34px;font-size:13px;padding:11px 19px 0}.af-runtime .af-phone-top{padding:17px 22px}.af-runtime .af-phone-top strong{font-size:21px}.af-runtime .af-phone-notice{margin:9px 16px;font-size:12px;padding:11px 15px}.af-runtime .af-phone-hero{height:310px;padding:30px}.af-runtime .af-phone-hero h2{font-size:clamp(29px,6vw,42px)}.af-runtime .af-phone-hero p{font-size:16px}.af-runtime .af-phone-hero small{font-size:14px}.af-runtime .af-phone-actions{padding:17px 8px;margin:-10px 10px 0}.af-runtime .af-phone-actions button{font-size:13px;min-width:55px}.af-runtime .af-phone-actions button i{font-size:27px}.af-runtime .af-phone-metrics{padding:15px 12px}.af-runtime .af-phone-metrics small{font-size:11px}.af-runtime .af-phone-metrics strong{font-size:18px}.af-runtime .af-phone-metrics em{font-size:12px}.af-runtime .af-phone-composer{font-size:14px;margin:15px;padding:13px 18px}.af-runtime .af-phone-cards{padding:0 15px;gap:12px}.af-runtime .af-phone-cards>button{min-height:110px;padding:17px}.af-runtime .af-phone-cards>button:first-child{min-height:232px}.af-runtime .af-phone-cards strong{font-size:17px}.af-runtime .af-phone-cards small{font-size:12px}.af-runtime .af-phone-agents{padding:15px}.af-runtime .af-phone-agents h3{font-size:18px}.af-runtime .af-phone-agents>div{overflow:auto}.af-runtime .af-phone-agents span{min-width:92px;padding:14px 8px}.af-runtime .af-phone-agents i{font-size:26px}.af-runtime .af-phone-agents b{font-size:14px}.af-runtime .af-phone-agents small{font-size:10px}.af-runtime .af-phone-banner{margin:0 15px 16px;width:calc(100% - 30px);padding:18px}.af-runtime .af-phone-banner strong{font-size:17px}.af-runtime .af-phone-banner small{font-size:12px}.af-runtime .af-phone-nav{position:sticky;bottom:0;padding:13px 6px;box-shadow:0 -3px 18px #00000012}.af-runtime .af-phone-nav button{font-size:18px}.af-runtime .af-phone-nav button small{font-size:11px}
.af-phone-composer{width:calc(100% - 16px);text-align:left;font-family:inherit;cursor:pointer}.af-phone-agents button{min-width:61px;border:0;color:inherit;background:#fff;border-radius:8px;padding:8px 4px;display:grid;text-align:center;gap:3px;font-family:inherit;cursor:pointer}.af-phone-agents button i{font-style:normal;font-size:18px;color:var(--af-primary)}.af-phone-agents button b{font-size:10px}.af-phone-agents button small{font-size:8px;color:#7f7a84;line-height:1.3}.af-runtime .af-phone-composer{width:calc(100% - 30px)}.af-runtime .af-phone-agents button{min-width:92px;padding:14px 8px}.af-runtime .af-phone-agents button i{font-size:26px}.af-runtime .af-phone-agents button b{font-size:14px}.af-runtime .af-phone-agents button small{font-size:10px}
.optical-home{width:100%;max-width:480px;height:100dvh;margin:auto;display:flex;flex-direction:column;overflow:hidden;position:relative;background:#faf9f7;color:#161619;font-family:"Noto Sans SC",Arial,sans-serif}.optical-home *{box-sizing:border-box}.optical-scroll button{font:inherit;cursor:pointer}.optical-scroll button:active{transform:scale(.97)}.optical-scroll button:focus-visible,.optical-scroll input:focus-visible{outline:2px solid #8750e8;outline-offset:2px}
.optical-status{height:30px;flex:none;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:#fcfaf9;font-family:Arial,sans-serif}.optical-status b{font-size:15px}.optical-status-right{display:flex;align-items:center;gap:6px}.optical-status-right svg{height:18px;width:18px}.optical-signal{height:14px;display:flex;align-items:flex-end;gap:2px}.optical-signal i{width:3px;background:#111;border-radius:1px}.optical-signal i:nth-child(1){height:5px}.optical-signal i:nth-child(2){height:8px}.optical-signal i:nth-child(3){height:11px}.optical-signal i:nth-child(4){height:14px}.optical-battery{width:23px;height:12px;border:1.5px solid #222;border-radius:3px;padding:1px}.optical-battery i{display:block;width:100%;height:100%;background:#111;border-radius:1px}
.optical-header{height:47px;flex:none;display:flex;align-items:center;gap:8px;padding:0 11px;background:#fcfaf9}.optical-header button{border:0;background:transparent;display:grid;place-items:center;padding:0}.optical-menu{width:30px;height:36px;flex:none}.optical-menu svg{width:26px;height:26px;stroke-width:1.2}.optical-logo{display:flex;align-items:center;gap:2px;white-space:nowrap;flex:none}.optical-logo img{width:37px;height:27px;object-fit:contain}.optical-logo span{display:flex;flex-direction:column;line-height:1}.optical-logo strong{font-size:17px;font-weight:900;letter-spacing:-1px}.optical-logo sup{font-size:6px;vertical-align:top}.optical-logo small{font:700 6px Arial,sans-serif;letter-spacing:.4px;margin-top:3px}.optical-industry{border:1px solid #e7e4e7!important;border-radius:16px!important;height:28px;padding:0 8px!important;background:#fff9!important;display:flex!important;gap:5px;font-size:11px!important;font-weight:700!important;white-space:nowrap}.optical-industry svg{width:12px}.optical-header-space{flex:1}.optical-search{width:32px;height:32px;flex:none;border-radius:50%;background:#fff!important;box-shadow:0 2px 9px #40324612}.optical-search svg{width:20px;height:20px}.optical-avatar{width:37px;height:37px;flex:none;border-radius:50%;overflow:hidden;background:#eee!important}.optical-avatar img{width:100%;height:100%;object-fit:cover}
.optical-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}.optical-scroll::-webkit-scrollbar{display:none}
.optical-ticker{height:29px;width:calc(100% - 18px);margin:0 9px;display:flex;align-items:center;justify-content:space-around;gap:4px;padding:0 7px;border:0;border-radius:16px;background:#fff;box-shadow:0 3px 11px #6350701b;white-space:nowrap}.optical-ticker>svg:first-child{width:17px;height:17px;color:#a342ec;animation:optical-ticker-pulse 2.4s infinite}.optical-ticker b{font-size:10px;color:#7543e2}.optical-ticker i{width:1px;height:12px;background:#222}.optical-ticker span{font-size:9px;font-weight:600}.optical-ticker em{font-style:normal;color:#a94de8}.optical-ticker strong{color:#19bb51}.optical-ticker>svg:last-child{width:12px;height:12px}
.optical-hero{height:164px;position:relative;overflow:hidden;background:linear-gradient(110deg,#fbf8f5,#f3ebe5 78%)}.optical-hero>img{position:absolute;right:0;top:0;width:51.4%;height:100%;object-fit:fill}.optical-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 39%,#faf6f327 47%,transparent 55%)}.optical-hero-copy{position:absolute;z-index:1;top:19px;left:26px}.optical-hero h1{font-size:26px;line-height:1.22;letter-spacing:.2px;margin:0;font-weight:800}.optical-hero p{font-size:12px;color:#454044;margin:11px 0 0}.optical-hero-copy i{display:block;width:39px;height:1px;background:#857c78;margin:8px 0 10px}.optical-hero-copy>span{font-size:9px;color:#595256;white-space:nowrap}
.optical-business{height:55px;display:grid;grid-template-columns:repeat(6,1fr);border-radius:27px 27px 0 0;background:#fff;position:relative;margin-top:-1px}.optical-business button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}.optical-business button:not(:last-child):after{content:"";position:absolute;right:0;bottom:7px;width:1px;height:16px;background:#dedbe0}.optical-business svg{width:22px;height:22px}.optical-business span{font-size:10px}
.optical-metrics{height:64px;background:#fff;display:grid;grid-template-columns:repeat(4,1fr);padding:0 9px}.optical-metrics button{border:0;background:none;padding:7px 0 5px 10px;text-align:left;display:flex;flex-direction:column;justify-content:center;position:relative}.optical-metrics button:not(:last-child):after{content:"";position:absolute;right:0;bottom:9px;width:1px;height:33px;background:#e1dce2}.optical-metrics span{font-size:8px;white-space:nowrap}.optical-metrics strong{font:700 17px Arial,sans-serif;margin-top:3px;white-space:nowrap}.optical-metrics em{font:700 10px Arial,sans-serif;font-style:normal;color:#9749df;margin-top:2px}.optical-metrics em.down{color:#18b955}
.optical-composer{height:36px;margin:8px 10px 10px;border:1px solid #d8d5d9;border-radius:20px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 11px}.optical-composer button{border:0;background:none;padding:0;display:grid;place-items:center}.optical-composer button:first-child svg{width:20px;height:20px}.optical-composer input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:12px;color:#222}.optical-composer input::placeholder{color:#625c62}.optical-composer .optical-send{width:31px;height:26px;border-radius:16px;background:linear-gradient(125deg,#d98bef,#6358ef);color:#fff;box-shadow:0 2px 7px #9f6ad453}.optical-send svg{width:18px;height:18px}
.optical-features{height:135px;margin:0 10px;display:grid;grid-template-columns:1fr 1.08fr;gap:8px}.optical-features button{border:0;border-radius:10px;overflow:hidden;position:relative;text-align:left;color:#161619}.optical-tryon{background:#eee9e5;padding:13px 12px;display:flex;flex-direction:column;align-items:flex-start}.optical-tryon strong{font-size:13px;line-height:1.2;z-index:1;white-space:nowrap}.optical-tryon>span{font-size:8px;color:#575054;margin-top:3px;z-index:1;white-space:nowrap}.optical-tryon>svg{position:absolute;top:15px;right:9px;width:13px;height:13px;z-index:1}.optical-tryon>img{position:absolute;left:0;bottom:0;width:100%;height:66%;object-fit:cover;object-position:center bottom}.optical-feature-stack{display:grid;grid-template-rows:repeat(3,1fr);gap:5px;min-width:0}.optical-feature-stack button{background:linear-gradient(100deg,#f8f5f3,#f2ede8);display:flex;align-items:center;gap:7px;padding:5px 9px}.optical-feature-stack button>svg:first-child{width:17px;height:17px;flex:none}.optical-feature-stack button>span{min-width:0;display:flex;flex-direction:column;position:relative;z-index:1}.optical-feature-stack strong{font-size:10px;line-height:1.3;white-space:nowrap}.optical-feature-stack small{font-size:7px;color:#5c565a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.optical-feature-stack button>svg:nth-of-type(2){position:absolute;right:5px;top:5px;width:11px;height:11px;z-index:2}.optical-feature-stack .optical-decoration{position:absolute;right:-2px;bottom:-8px;width:42px;height:42px;opacity:.14;transform:rotate(-15deg);color:#675b54}
.optical-officers{height:142px;margin:0 10px}.optical-section-heading{height:30px;display:flex;align-items:center;justify-content:space-between}.optical-section-heading h2{font-size:13px;line-height:1.1;margin:0;padding-left:10px;position:relative;font-weight:800}.optical-section-heading h2:before{content:"";position:absolute;left:0;top:0;height:15px;width:3px;border-radius:2px;background:#844af0}.optical-section-heading button{display:flex;align-items:center;border:0;background:none;font-size:8px;padding:0}.optical-section-heading svg{width:10px;height:10px}.optical-officer-list{height:109px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.optical-officer-list button{padding:0 0 4px;border:0;border-radius:9px;background:#fff;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 2px 7px #4d3e4b10;min-width:0}.optical-officer-list img{width:100%;height:52px;object-fit:cover;object-position:center top;background:#f1eeed}.optical-officer-list strong{font-size:9px;line-height:1.25;margin:2px 0 1px;white-space:nowrap}.optical-officer-list span{display:flex;flex-direction:column}.optical-officer-list small{font-size:7px;color:#5d565c;line-height:1.2;white-space:nowrap}
.optical-promo{height:72px;width:calc(100% - 20px);margin:0 10px;border:0;border-radius:11px;background:linear-gradient(100deg,#f4f0ec,#e9e1d8);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:9px 15px;text-align:left}.optical-promo>img{position:absolute;right:0;top:0;width:52%;height:100%;object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 25%)}.optical-promo strong{font-size:12px;line-height:1.2;position:relative;z-index:1;white-space:nowrap}.optical-promo>span{font-size:8px;margin-top:3px;position:relative;z-index:1}.optical-promo em{font-size:8px;font-style:normal;color:#fff;background:#2d2b2d;border-radius:12px;padding:2px 10px;margin-top:6px;position:relative;z-index:1}
.optical-bottom-nav{height:61px;flex:none;display:grid;grid-template-columns:repeat(7,1fr);align-items:start;padding:4px 7px 13px;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -4px 12px #66547813;position:relative}.optical-bottom-nav:after{content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:105px;height:4px;background:#111;border-radius:3px}.optical-bottom-nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:44px;padding:0;color:#27252a}.optical-bottom-nav svg{width:21px;height:21px}.optical-bottom-nav button>span:last-child{font-size:9px}.optical-bottom-nav button.active{color:#8042e4}.optical-bottom-nav button.assistant{align-self:start}.optical-ai-orb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-top:-11px;background:linear-gradient(130deg,#d69af4 0%,#954eee 48%,#3295f1 100%);color:white;box-shadow:0 4px 12px #8651e84f;animation:optical-orb-breathe 3s ease-in-out infinite}.optical-ai-orb span{font:bold 13px Arial,sans-serif;letter-spacing:-2px}
.optical-overlay{position:absolute;z-index:10;inset:0;background:#1f152874;display:flex;align-items:center;justify-content:center}.optical-drawer{position:absolute;left:0;top:0;bottom:0;width:70%;padding:25px 18px;background:#fff;box-shadow:8px 0 32px #26172e34;display:flex;flex-direction:column;gap:14px}.optical-drawer h2{font-size:20px}.optical-drawer button{border:0;background:#f8f4fa;text-align:left;padding:12px;border-radius:10px}.optical-search-dialog{width:calc(100% - 34px);padding:20px;border-radius:16px;background:#fff;display:flex;flex-direction:column;gap:13px}.optical-search-dialog label{font-size:17px;font-weight:700}.optical-search-dialog input{height:44px;border:1px solid #ddd5e5;border-radius:10px;padding:0 12px}.optical-search-dialog>div{display:flex;justify-content:flex-end;gap:10px}.optical-search-dialog button{border:0;border-radius:9px;padding:8px 13px;background:#f2edf6}.optical-search-dialog button[type=submit]{background:#8050dc;color:#fff}
.optical-enter{animation:optical-enter .55s ease both}.optical-hero{animation-delay:.06s}.optical-business{animation-delay:.12s}.optical-metrics{animation-delay:.17s}.optical-composer{animation-delay:.21s}.optical-features{animation-delay:.25s}.optical-officers{animation-delay:.31s}.optical-promo{animation-delay:.37s}@keyframes optical-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes optical-orb-breathe{50%{box-shadow:0 4px 17px #8651e89c;filter:saturate(1.2)}}@keyframes optical-ticker-pulse{50%{opacity:.55}}@media(prefers-reduced-motion:reduce){.optical-enter,.optical-ai-orb,.optical-ticker>svg:first-child{animation:none}}
@media(max-width:370px){.optical-header{gap:5px}.optical-logo strong{font-size:15px}.optical-logo img{width:32px}.optical-industry{font-size:10px!important;padding:0 5px!important}.optical-ticker span{font-size:8px}.optical-hero h1{font-size:23px}.optical-metrics button{padding-left:5px}.optical-metrics strong{font-size:14px}.optical-officer-list small{font-size:6px}}
.optical-composer{margin-top:3px;margin-bottom:6px}.optical-feature-stack img.optical-decoration{position:absolute;right:0;bottom:0;width:40px;height:29px;object-fit:cover;opacity:1;transform:none}.optical-promo strong{font-size:13px}
.optical-enter{animation:none}.optical-features button,.optical-officer-list button,.optical-promo,.optical-business button{transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}.optical-features button:hover,.optical-officer-list button:hover,.optical-promo:hover,.optical-business button:hover{transform:translateY(-2px);box-shadow:0 7px 16px #65527322}.optical-hero>img{transition:transform .5s ease}.optical-hero:hover>img{transform:scale(1.025)}
.optical-home{container-type:inline-size}.optical-status{height:7.692cqw}.optical-header{height:12.051cqw}.optical-bottom-nav{height:15.641cqw}.optical-scroll{display:flex;flex-direction:column}.optical-scroll>*{flex-shrink:0}.optical-ticker{height:7.436cqw}.optical-hero{height:42.051cqw;flex-grow:1}.optical-business{height:14.103cqw;flex-grow:1}.optical-metrics{height:16.41cqw;flex-grow:1}.optical-composer{height:9.231cqw;margin-top:.769cqw;margin-bottom:1.538cqw}.optical-features{height:34.615cqw;flex-grow:1}.optical-officers{height:36.41cqw;flex-grow:1;display:flex;flex-direction:column}.optical-section-heading{height:7.692cqw;flex:none}.optical-officer-list{height:auto;flex:1}.optical-promo{height:18.462cqw;flex-grow:1}
.optical-logo strong{font-size:clamp(17px,4.45cqw,19px)}.optical-industry{font-size:clamp(11px,2.9cqw,12px)!important}.optical-ticker b{font-size:clamp(10px,2.7cqw,11px)}.optical-ticker span{font-size:clamp(9px,2.45cqw,10px)}.optical-hero p{font-size:clamp(12px,3.4cqw,14px)}.optical-hero-copy>span{font-size:clamp(9px,2.7cqw,11px)}.optical-business span{font-size:clamp(10px,3.05cqw,12px)}.optical-metrics span{font-size:clamp(8px,2.65cqw,11px)}.optical-metrics strong{font-size:clamp(17px,4.6cqw,19px)}.optical-metrics em{font-size:clamp(10px,2.95cqw,12px)}.optical-composer input{font-size:clamp(12px,3.4cqw,14px)}.optical-tryon strong{font-size:clamp(13px,3.7cqw,15px)}.optical-tryon>span{font-size:clamp(8px,2.6cqw,10px)}.optical-feature-stack strong{font-size:clamp(10px,3cqw,12px)}.optical-feature-stack small{font-size:clamp(7px,2.4cqw,10px)}.optical-section-heading h2{font-size:clamp(13px,3.75cqw,15px)}.optical-section-heading button{font-size:clamp(8px,2.6cqw,11px)}.optical-officer-list strong{font-size:clamp(9px,2.8cqw,11px)}.optical-officer-list small{font-size:clamp(7px,2.35cqw,9px)}.optical-promo strong{font-size:clamp(13px,3.7cqw,15px)}.optical-promo>span{font-size:clamp(8px,2.75cqw,11px)}.optical-promo em{font-size:clamp(8px,2.75cqw,11px)}.optical-bottom-nav button>span:last-child{font-size:clamp(9px,2.8cqw,11px)}
.optical-business span{font-size:12px}.optical-metrics span{font-size:11px}.optical-metrics em{font-size:12px}.optical-tryon>span{font-size:10px}.optical-feature-stack strong{font-size:12px}.optical-feature-stack small{font-size:9px}.optical-section-heading button{font-size:11px}.optical-officer-list strong{font-size:11px}.optical-officer-list small{font-size:10px;line-height:1.2}.optical-promo>span{font-size:10px}.optical-bottom-nav button>span:last-child{font-size:11px}
.optical-hero-copy{left:6.75cqw;top:6.25cqw}.optical-hero h1{font-size:clamp(26px,6.5cqw,29px);font-weight:750}
.optical-business{padding:0 3.72cqw}
.optical-metrics{padding:0 0 0 4.65cqw;grid-template-columns:1.14fr repeat(3,1fr)}.optical-metrics button{padding-left:3.49cqw}
.optical-features{margin-left:4.65cqw;margin-right:2.8cqw;grid-template-columns:184fr 204fr;gap:2.3cqw}.optical-tryon>span{font-size:clamp(8px,2.28cqw,10px)}
.optical-officers{margin-left:4.65cqw;margin-right:2.3cqw;padding-top:1.4cqw;padding-bottom:1.4cqw}.optical-officer-list{gap:1.63cqw}.optical-officer-list img{height:13cqw}
.optical-promo{width:auto;margin-left:4.65cqw;margin-right:2.3cqw;padding-left:2.3cqw}
.beauty-home{background:#fdfbfc;color:#151318}
.beauty-ticker{box-shadow:0 5px 15px #654b831c}.beauty-ticker>svg:first-child{color:#9c3fee}
.beauty-hero{background:linear-gradient(105deg,#fbf9fa 0%,#fffaf8 47%,#f8f2ef 100%)}
.beauty-hero>img{top:4.65cqw;width:61%;height:calc(100% - 4.65cqw);object-fit:fill;mask-image:linear-gradient(to bottom,transparent 0%,#000 17%),linear-gradient(90deg,transparent 0%,#000 8%);mask-composite:intersect}
.beauty-hero:after{background:linear-gradient(90deg,#fff8 0%,transparent 44%)}
.beauty-hero .optical-hero-copy{top:12cqw;left:7.8cqw;animation:beauty-copy-enter .4s ease both}
.beauty-hero h1{font-size:clamp(25px,6.25cqw,28px);line-height:1.24;letter-spacing:.25px;font-weight:760}
.beauty-hero p{font-size:clamp(13px,3.15cqw,14px);margin-top:2.4cqw}
.beauty-hero-copy i{background:linear-gradient(90deg,#9c47ed,transparent);width:9cqw;height:2px;margin-top:2.3cqw}
.beauty-hero-dots{position:absolute;z-index:2;left:7.8cqw;bottom:2cqw;display:flex;align-items:center;gap:1.4cqw}
.beauty-hero-dots button{width:1.3cqw;height:1.3cqw;min-width:5px;min-height:5px;padding:0;border:0;border-radius:99px;background:#ddd9df;transition:width .25s ease,background .25s ease}
.beauty-hero-dots button.active{width:4cqw;background:linear-gradient(90deg,#9939e9,#6738ef)}
.beauty-business{border-radius:7cqw 7cqw 0 0;background:#fffdfef5}.beauty-business svg{width:5.6cqw;height:5.6cqw}
.beauty-metrics{background:#fffdfef5;border-radius:0 0 6cqw 6cqw}.beauty-metrics em.down{color:#7a7b86}
.beauty-composer{margin-top:2.1cqw;margin-bottom:2.7cqw;height:9.8cqw;border-radius:6cqw}.beauty-composer input{font-size:clamp(12px,3.4cqw,15px)}
.beauty-features{height:30.8cqw;flex-grow:1;margin:0 2.8cqw;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:2.1cqw}
.beauty-features button{min-width:0;border:0;border-radius:2.8cqw;position:relative;overflow:hidden;background:linear-gradient(120deg,#f8f6fa,#f4f1f4);text-align:left;color:#151318;transition:transform .22s ease,box-shadow .22s ease}
.beauty-features button:hover{transform:translateY(-2px);box-shadow:0 7px 15px #6d597c24}
.beauty-features button>svg:first-child{position:absolute;z-index:2;top:50%;left:3.7cqw;transform:translateY(-50%);width:6.2cqw;height:6.2cqw;stroke-width:1.5}
.beauty-features button>span{position:absolute;z-index:2;left:13.3cqw;right:2cqw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1.2cqw;white-space:nowrap}
.beauty-features strong{font-size:clamp(13px,3.5cqw,16px);line-height:1.15}
.beauty-features small{font-size:clamp(8px,2.35cqw,10px);color:#625d65;overflow:hidden;text-overflow:ellipsis}
.beauty-features .beauty-feature-arrow{position:absolute;z-index:3;right:2.1cqw;top:2cqw;width:3.2cqw;height:3.2cqw}
.beauty-features img{position:absolute;right:0;bottom:0;width:38%;height:58%;object-fit:cover;object-position:right bottom;mask-image:linear-gradient(90deg,transparent,#000 40%)}
.beauty-officers{height:34cqw;margin-left:2.8cqw;margin-right:2.8cqw}.beauty-officers .optical-section-heading{height:6.3cqw}.beauty-officers .optical-section-heading h2:before{background:#8a3fed}.beauty-officers .optical-officer-list{gap:1cqw}.beauty-officers .optical-officer-list img{height:16.6cqw}
.beauty-officers .optical-officer-list strong{font-size:clamp(10px,2.65cqw,12px)}.beauty-officers .optical-officer-list small{font-size:clamp(9px,2.3cqw,10px)}
.beauty-promo{height:17cqw;flex-grow:0;margin-left:2.8cqw;margin-right:2.8cqw;padding-left:3.7cqw;background:linear-gradient(110deg,#f8f3f7,#f7edf2)}.beauty-promo>img{width:50%;object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 28%)}
.beauty-promo strong{font-size:clamp(13px,3.5cqw,16px)}.beauty-promo>span{font-size:clamp(8px,2.45cqw,11px)}
.beauty-promo em{font-size:clamp(10px,2.55cqw,12px);padding:2px 12px;background:linear-gradient(105deg,#a846e8,#5552ed);box-shadow:0 3px 9px #8554dd47}
@keyframes beauty-copy-enter{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.beauty-hero .optical-hero-copy,.beauty-hero-dots button{animation:none;transition:none}}
.growth-intake{display:flex;flex-direction:column;width:100%;max-width:480px;height:100dvh;margin:auto;overflow:hidden;background:#f5f8ff;color:#17264f;font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.growth-intake-scroll{flex:1;overflow:auto;padding:14px 15px 28px;overscroll-behavior:contain}
.growth-intake-back{display:flex;align-items:center;gap:6px;padding:5px 0 13px;color:#58729d;font-size:12px}.growth-intake-back svg{width:17px;height:17px}
.growth-intake-hero{display:flex;align-items:center;gap:12px;padding:17px;border-radius:19px;background:linear-gradient(110deg,#e9f4ff,#f6edff);box-shadow:0 5px 20px #b9d0ef54}
.growth-intake-hero>span{display:grid;place-items:center;width:53px;height:53px;flex:none;border-radius:15px;background:#fff;color:#5374eb}.growth-intake-hero>span svg{width:29px;height:29px}
.growth-intake-hero small{color:#7257d7;font-size:10px;font-weight:700}.growth-intake-hero h1{margin:3px 0;font-size:20px;line-height:1.2}.growth-intake-hero p{margin:0;color:#6b7d9e;font-size:11px;line-height:1.5}
.growth-intake-form{display:grid;gap:15px;margin-top:14px;padding:18px 15px;border-radius:18px;background:#fff;box-shadow:0 4px 18px #c6d7ef55}
.growth-intake-form label{display:grid;gap:7px;color:#273b67;font-size:12px;font-weight:700}.growth-intake-form label em{display:inline;color:#f0609d;font-style:normal}.growth-intake-form label small{display:inline;color:#92a1bb;font-size:10px;font-weight:400}
.growth-intake-form label>span{display:block}
.growth-intake-form input,.growth-intake-form select,.growth-intake-form textarea{width:100%;border:1px solid #dde7f5;border-radius:11px;background:#f9fbff;color:#1c315e;padding:11px 12px;font:inherit;font-size:12px;font-weight:400;outline:none}.growth-intake-form textarea{resize:vertical;line-height:1.5}.growth-intake-form :is(input,select,textarea):focus{border-color:#7777f0;box-shadow:0 0 0 3px #7777f01c}
.growth-intake-notice{display:flex;align-items:flex-start;gap:5px;margin:0;padding:10px;border-radius:10px;background:#eef5ff;color:#3b67a9;font-size:11px;line-height:1.5}.growth-intake-notice svg{width:16px;height:16px;flex:none}
.growth-intake-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:45px;border-radius:12px;background:linear-gradient(105deg,#478df7,#7554ee);color:white;font-size:14px;font-weight:700}.growth-intake-submit svg{width:17px;height:17px}.growth-intake-submit:disabled{opacity:.6}
.growth-intake-hint{margin:-7px 0 0;color:#9aa7bd;text-align:center;font-size:10px}
.message-center { --mc-accent: #4f8b65; color: #26372d; min-height: 260px; padding: 4px 2px 24px; }
.message-center--xiaoling { --mc-accent: #7854b8; color: #302843; }
.message-center--wobangni { --mc-accent: #7555d6; color: #273056; }
.wobangni-message-page { display: flex; flex-direction: column; height: 100dvh; background: #f7f8ff; }
.wobangni-message-header { display: flex; align-items: center; justify-content: space-between; flex: none; height: 58px; padding: 0 18px; background: #fff; color: #273056; }
.wobangni-message-header button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: inherit; }
.wobangni-message-header button svg { width: 21px; height: 21px; }
.wobangni-message-header strong { font-size: 17px; }
.wobangni-message-header span { width: 34px; }
.wobangni-message-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 32px; }
.message-center-tabs { display: flex; gap: 8px; padding: 4px 0 15px; }
.message-center-tabs button { border: 0; border-radius: 999px; background: #f4f5f3; color: #727b75; padding: 8px 18px; font: inherit; font-size: 13px; }
.message-center--xiaoling .message-center-tabs button { background: #f5f2fa; }
.message-center--wobangni .message-center-tabs button { background: #f0edfa; }
.message-center-tabs button.is-active { background: var(--mc-accent); color: white; }
.message-center-list { display: grid; gap: 9px; }
.message-center-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 13px; border: 1px solid #edf0ec; border-radius: 17px; background: white; color: inherit; text-align: left; font: inherit; }
.message-center--xiaoling .message-center-item { border-color: #efebf5; }
.message-center--wobangni .message-center-item { border-color: #e9eafa; }
.message-center-marker { display: grid; flex: none; place-items: center; width: 39px; height: 39px; border-radius: 13px; background: #e9f3ec; color: #4f8b65; font-weight: 700; }
.message-center--xiaoling .message-center-marker { background: #f0eafa; color: #7854b8; }
.message-center--wobangni .message-center-marker { background: #f0edfa; color: #7555d6; }
.message-center-marker.announcement { background: #f5f0df; color: #987a26; }
.message-center-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.message-center-title { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14px; }
.message-center-title i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mc-accent); }
.message-center-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #77817a; font-size: 12px; }
.message-center-copy time, .message-center-detail time { color: #9aa29c; font-size: 11px; }
.message-center-chevron { color: #b7bdb9; font-size: 22px; }
.message-center-empty, .message-center-state { padding: 42px 8px; text-align: center; color: #849087; font-size: 13px; }
.message-center-state { padding: 12px; }
.message-center-state.is-error { color: #b04a4a; }
.message-center-state button, .message-center-more, .message-center-back { border: 0; background: transparent; color: var(--mc-accent); font: inherit; font-weight: 600; }
.message-center-state button { margin-left: 8px; }
.message-center-more { display: block; margin: 15px auto; padding: 8px; }
.message-center-back { padding: 6px 0 18px; }
.message-center-kind { display: inline-block; padding: 4px 10px; border-radius: 20px; color: var(--mc-accent); background: #f1f6f1; font-size: 12px; }
.message-center--xiaoling .message-center-kind { background: #f4effa; }
.message-center--wobangni .message-center-kind { background: #f0edfa; }
.message-center-detail h2 { margin: 15px 0 8px; font-size: 20px; line-height: 1.4; }
.message-center-body { margin-top: 22px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: 14px; }
:root{font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#13204d;background:#f7faff;font-synthesis:none}*{box-sizing:border-box}html,body,#root{margin:0;min-width:320px;min-height:100%;width:100%}body{overscroll-behavior:none}button,input{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid #74b8ff;outline-offset:2px}svg{flex:none}::-webkit-scrollbar{display:none}*{scrollbar-width:none}.page{min-height:100dvh;max-width:100%;overflow:hidden}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0}.icon-button svg{width:25px;height:25px}.brand{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}.brand-mark{position:relative;display:inline-flex;justify-content:center;align-items:center;width:51px;height:50px;transform:rotate(-10deg);border-radius:41% 39% 44% 43%;background:linear-gradient(135deg,#25c6ff 8%,#0858fa 54%,#2344d7 88%);box-shadow:inset 2px 5px 10px #c6f9ff,0 4px 9px #5db5ff44;color:#fff}.brand-mark>span{font-size:38px;line-height:1;font-weight:900;font-family:Arial,sans-serif;letter-spacing:-8px;margin-left:-9px;text-shadow:0 2px 5px #003c9e}.brand-mark>b{position:absolute;right:-6px;top:-9px;color:#ff4ca6;font-size:18px;transform:rotate(20deg);text-shadow:0 2px 4px #ffb8db}.brand-words{display:grid;line-height:1}.brand-words strong{font-size:27px;font-weight:900;letter-spacing:-2px;color:#0643bc;text-shadow:0 2px 0 #8ab9ff}.brand-words small{font-size:9px;letter-spacing:1.8px;font-weight:900;color:#0643bc;margin-top:5px}.brand-compact .brand-mark{width:42px;height:41px}.brand-compact .brand-mark span{font-size:31px;letter-spacing:-7px}.brand-compact .brand-words strong{font-size:22px}.brand-compact .brand-words small{font-size:7px}.primary-button{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:55px;padding:10px 20px;border-radius:999px;background:linear-gradient(105deg,#b9ddff 0%,#d4dcff 43%,#96cbff 100%);color:#0870ea;font-size:18px;font-weight:800;box-shadow:inset 0 0 0 1px #edf9ff,0 8px 22px #5093ee2b;position:relative}.primary-button::before{content:'';position:absolute;left:8px;top:7px;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9,#bde5ff 45%,#9ed7ff44 75%);box-shadow:inset 0 0 0 1px #fff8,0 3px 10px #fff}.primary-button svg{position:absolute;right:16px;width:22px;height:22px}.eyebrow{color:#1c86ee;font-size:12px;letter-spacing:2px;font-weight:800}
/* Intro */
.onboarding{display:flex;flex-direction:column;background:#f6faff}.onboarding header{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:20px 22px}.onboarding header button{display:flex;align-items:center;color:#58739d;background:#ffffffd9;padding:8px 10px;border-radius:99px}.onboard-hero{min-height:56dvh;background-size:cover;background-position:center 52%;position:relative}.onboard-hero::after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#f6faff)}.onboard-copy{position:absolute;z-index:1;top:23%;left:8%;max-width:55%}.onboard-copy h1{font-size:clamp(32px,9vw,46px);letter-spacing:-2px;line-height:1.2;margin:12px 0;color:#0d2660}.onboard-copy h1 em{font-style:normal;background:linear-gradient(100deg,#fa49ab,#6243e9,#0c97ee);background-clip:text;color:transparent}.onboard-copy p{font-weight:700;color:#566d97;max-width:200px;line-height:1.55}.onboard-panel{position:relative;z-index:1;margin-top:-30px;padding:18px 20px max(18px,env(safe-area-inset-bottom));background:linear-gradient(#fff,#f7faff);border-radius:32px 32px 0 0;box-shadow:0 -14px 40px #fff9;flex:1}.mini-title{font-size:15px;font-weight:800;color:#1a3164}.onboard-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}.onboard-card{min-height:143px;border-radius:17px;padding:13px 8px;display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(135deg,#fff3fa,#fff);box-shadow:0 4px 18px #d8e4f25e}.onboard-card.blue{background:linear-gradient(135deg,#e9f8ff,#fff)}.onboard-card.violet{background:linear-gradient(135deg,#f2eaff,#fff)}.onboard-card>span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;box-shadow:0 2px 12px #d6d8ec88;color:#f34a99}.onboard-card.blue>span{color:#1289ee}.onboard-card.violet>span{color:#8647ed}.onboard-card svg{width:28px;height:28px}.onboard-card strong{font-size:13px;margin-top:8px}.onboard-card small{font-size:10px;color:#7283a1;line-height:1.35;margin-top:3px}.onboard-bottom{display:flex;flex-direction:column;align-items:center;gap:13px;margin-top:18px}.dots{display:flex;gap:6px}.dots i{width:6px;height:6px;background:#d1def2;border-radius:99px}.dots i.active{width:22px;background:#348bfb}.onboard-bottom .primary-button{max-width:420px}
/* SSO screens */
.onboarding{touch-action:pan-y}.onboard-hero{overflow:hidden;touch-action:pan-y}.onboard-track{display:flex;width:100%;height:56dvh;min-height:390px;transition:transform .38s ease;will-change:transform}.onboard-slide{position:relative;flex:0 0 100%;height:100%;background-size:cover;background-position:center 52%}.onboard-slide::after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#f6faff)}.onboard-slide-1{background-position:60% center}.onboard-slide-2{background-position:75% 42%}.onboard-slide-2::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,#e9e4ff6e,transparent 65%)}.onboard-copy{z-index:1}.dots button{width:6px;height:6px;padding:0;background:#d1def2;border-radius:99px;transition:width .25s,background .25s}.dots button.active{width:22px;background:#348bfb}.onboard-next{touch-action:pan-y;user-select:none;overflow:hidden}.onboard-next::before{display:none}.onboard-swipe-knob{position:absolute;left:8px;top:7px;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9,#bde5ff 45%,#9ed7ff44 75%);box-shadow:inset 0 0 0 1px #fff8,0 3px 10px #fff;pointer-events:none;transition:transform .15s ease}
.auth-page{background:#f7faff;display:flex;flex-direction:column}.auth-hero{height:52dvh;min-height:390px;max-height:510px;background-size:cover;background-position:center 55%;position:relative}.auth-hero::after{content:'';position:absolute;inset:80% 0 0;background:linear-gradient(transparent,#f7faff)}.auth-top{position:absolute;z-index:1;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start}.guest-button{background:#ffffffd9;display:flex;align-items:center;padding:8px 9px;border-radius:99px;color:#607397;font-size:12px;box-shadow:0 2px 10px #adc5e733}.guest-button svg{width:16px}.auth-slogan{position:absolute;top:25%;left:8%;z-index:1;text-shadow:0 2px 12px #fffb}.auth-slogan h1{font-size:clamp(29px,8vw,43px);line-height:1.35;letter-spacing:1px;color:#405a83;margin:0;font-weight:700;transform:rotate(-5deg)}.auth-slogan h1 span{color:#fc669d;margin-left:6px}.auth-slogan p{font-size:13px;color:#49617d;line-height:1.7;background:#ffffff99;padding:8px 12px;border-radius:12px;margin-top:20px}.auth-panel{z-index:2;position:relative;background:linear-gradient(#f7fbff,#fff);border-radius:42px 42px 0 0;margin-top:-28px;min-height:calc(48dvh + 28px);padding:15px max(22px,6vw) max(20px,env(safe-area-inset-bottom));box-shadow:0 -10px 30px #ffffffb0}.auth-tabs{display:flex;justify-content:center;gap:30px;margin-bottom:20px}.auth-tabs button{font-size:19px;color:#93a3bd;font-weight:800;padding:8px 24px 12px;position:relative}.auth-tabs button.active{color:#072b72}.auth-tabs button.active:after{content:'';position:absolute;bottom:4px;left:calc(50% - 15px);width:30px;height:3px;background:#168af9;border-radius:99px}.field{min-height:50px;border-radius:22px;background:#fff;box-shadow:0 3px 14px #d2dff066,inset 0 0 0 1px #e5ebf5;display:flex;align-items:center;margin-bottom:10px;padding:0 13px;gap:12px;color:#92a4c4}.field input{border:0;outline:0;background:transparent;min-width:0;flex:1;font-size:15px;color:#13204d}.field input::placeholder{color:#a5b2c9}.field svg{width:21px;height:21px}.phone-field>span{display:flex;align-items:center;gap:3px;font-weight:700;color:#17284f;border-right:1px solid #dce5f1;padding-right:11px}.phone-field>span svg{width:13px;height:13px}.field button{font-size:13px;color:#087ceb;white-space:nowrap;font-weight:700}.code-field button{border-left:1px solid #e7edf7;padding-left:10px}.auth-submit{margin-top:14px}.auth-tip{text-align:center;color:#9aa8bf;font-size:11px;margin:10px 0 15px}.auth-divider{display:flex;align-items:center;gap:12px;color:#98a8c2;font-size:11px}.auth-divider:before,.auth-divider:after{content:'';height:1px;flex:1;background:#e3e9f2}.alternate-auth{display:flex;justify-content:space-around;text-align:center;margin:9px 0 15px}.alternate-auth button{font-size:11px;color:#53678e;display:flex;align-items:center;flex-direction:column;gap:5px}.alternate-auth button span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 2px 12px #d3e0f0;color:#49bf59;font-size:18px;font-weight:900}.alternate-auth button:nth-child(2) span{color:#141a35}.alternate-auth button:nth-child(3) span{color:#087cff}.alternate-auth button svg{width:21px}.auth-links{display:flex;justify-content:space-between;margin:5px 0 11px}.auth-links button{font-size:12px;color:#1387ee;font-weight:700;padding:5px 0}.agreement{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#8494ad;line-height:1.5}.agreement input{appearance:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #99acc9;flex:none}.agreement input:checked{background:#1788f4;box-shadow:inset 0 0 0 3px #fff}.agreement button{font-size:10px;color:#0b85f6;padding:0}.back-link{display:inline-flex;align-items:center;gap:5px;color:#5d7399;font-size:13px;padding:4px 0}.back-link svg{width:17px}.auth-heading{margin:10px 0 18px}.auth-heading h2{font-size:25px;margin:5px 0;color:#102b66}.auth-heading p{color:#8493b1;font-size:12px;margin:0}.step-tag{font-size:11px;color:#2f8de7;font-weight:700}.form-error{color:#d33e66;background:#fff0f4;border-radius:8px;padding:8px 10px;margin:7px 0;font-size:12px}.future-card{background:linear-gradient(125deg,#f2f7ff,#fff);border:1px solid #e4edfc;border-radius:21px;padding:24px 20px;margin:20px 0 23px;display:flex;flex-direction:column;align-items:center;text-align:center}.future-card>svg{width:37px;height:37px;color:#8772f6;margin-bottom:9px}.future-card strong{font-size:18px}.future-card p{font-size:13px;color:#7284a5;line-height:1.6}.modal-backdrop,.sheet-backdrop,.drawer-backdrop{position:fixed;inset:0;z-index:50;background:#15234770;display:flex;align-items:center;justify-content:center}.success-modal{width:min(85vw,340px);background:#fff;border-radius:27px;padding:35px 22px;text-align:center;box-shadow:0 20px 70px #172c5966}.success-modal>svg{width:65px;height:65px;color:#27b98f}.success-modal h2{margin:9px 0;font-size:21px}.success-modal p{color:#7e8fa9;font-size:13px;margin:0 0 25px}.success-modal .primary-button{font-size:15px}
/* Home */
.home-page{background:linear-gradient(180deg,#f1f7ff,#f7faff 60%,#fff);display:flex;flex-direction:column;height:100dvh}.home-header{height:72px;min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:9px 15px 6px;z-index:3;background:#ffffffa8;backdrop-filter:blur(12px)}.home-header>.icon-button{width:32px}.header-actions{display:flex;align-items:center;gap:7px}.header-actions>.icon-button{background:#ffffffcc;border-radius:14px;box-shadow:0 2px 10px #b9d1e260}.header-actions .avatar-button{border-radius:50%;background:linear-gradient(120deg,#cfe1ff,#fff)}.home-scroll{overflow-y:auto;flex:1;padding:0 15px 22px;overscroll-behavior:contain}.live-line{height:35px;border-radius:99px;display:flex;align-items:center;gap:8px;background:#fff;box-shadow:0 2px 11px #bfd1e844;color:#23375f;font-size:11px;padding:0 13px;white-space:nowrap}.live-line span{display:flex;align-items:center;gap:4px;color:#b443eb;font-weight:800}.live-line span svg{width:14px}.live-line i{height:14px;width:1px;background:#c6d1e4}.live-line strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;font-weight:600;flex:1}.live-line>svg{width:14px}.home-hero{height:230px;position:relative;margin:8px -15px -8px;background-size:cover;background-position:center 54%}.home-hero::before{content:'';position:absolute;inset:0 45% 0 0;background:linear-gradient(90deg,#f5faffdf,#f5faff62,transparent)}.hero-copy{position:absolute;left:7%;top:22px}.hero-copy h1{font-size:31px;line-height:1.23;margin:0 0 6px;color:#111;font-weight:900;letter-spacing:-1px}.hero-copy h1 em{font-style:normal;background:linear-gradient(110deg,#f251ad,#7a37ec 45%,#118af2);background-clip:text;color:transparent;font-size:35px}.hero-copy p{font-size:14px;color:#526789;line-height:1.5;margin:0;font-weight:700}.pillar-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;position:relative;z-index:1;margin:0 0 10px}.pillar-row button{height:39px;border-radius:15px;background:#ffffffed;box-shadow:0 3px 13px #b9cde85e;display:flex;align-items:center;justify-content:center;gap:4px;transform:rotate(-2deg)}.pillar-row button:nth-child(even){transform:rotate(2deg)}.pillar-row button.selected{box-shadow:inset 0 0 0 2px #a5caff}.pillar-row svg{width:18px;height:18px;color:#8e45ef}.pillar-row button:nth-child(2) svg{color:#4c65e6}.pillar-row button:nth-child(3) svg{color:#ef3aa6}.pillar-row button:nth-child(4) svg{color:#824be9}.pillar-row b{font-size:12px}.composer{height:53px;border:5px solid #fff;background:#f4f7fc;box-shadow:0 2px 16px #bfd3ee55;border-radius:17px;display:flex;align-items:center;gap:5px}.composer input{border:0;outline:0;background:none;flex:1;width:0;padding:0 7px 0 10px;color:#203961;font-size:12px}.composer input::placeholder{color:#617598}.composer button{width:37px;height:37px;border-radius:50%;display:grid;place-items:center}.composer button svg{width:19px;height:19px}.composer-mic{color:#8c58e7;background:#fff}.composer-send{color:#fff;background:linear-gradient(135deg,#f752d8,#587aff,#22bafa)}.composer-hint{font-size:10px;color:#91a2be;margin:5px 0 11px;padding-left:8px}.inline-notice{background:#eaf4ff;color:#3171b4;font-size:11px;border-radius:8px;padding:6px 10px;margin:0 0 8px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.feature-card{height:77px;border-radius:20px;position:relative;overflow:hidden;background:linear-gradient(110deg,#fff4f7,#fff);border:2px solid #fff;box-shadow:0 3px 14px #d4e1f477;display:flex;text-align:left;align-items:center;padding:8px;gap:8px}.feature-card.chat{background:linear-gradient(110deg,#eaf8ff,#fff)}.feature-card.image{background:linear-gradient(110deg,#e6f8ff,#fff)}.feature-card.traffic{background:linear-gradient(110deg,#fff2f9,#fff)}.feature-icon{height:55px;width:48px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#ffe2ec);border-radius:12px;flex:none;color:#ec4f9d}.feature-card.chat .feature-icon{color:#128ddd;background:linear-gradient(145deg,#fff,#ddf7ff)}.feature-card.image .feature-icon{color:#268bef;background:linear-gradient(145deg,#fff,#dbf1ff)}.feature-card.traffic .feature-icon{color:#e23397}.feature-icon svg{width:27px;height:27px}.feature-text{min-width:0}.feature-text strong{font-size:13px;color:#182748;display:flex;align-items:center;gap:2px;white-space:nowrap}.feature-text strong svg{width:14px;height:14px;color:#425983}.feature-text small{white-space:pre-line;color:#7889a8;line-height:1.35;font-size:10px}.work-card{border-radius:20px;background:#fff;margin-top:10px;padding:13px 14px;box-shadow:0 3px 14px #d4e1f477}.section-head{display:flex;justify-content:space-between;align-items:center}.section-head h2{font-size:15px;margin:0;color:#192242}.section-head button{display:flex;align-items:center;font-size:11px;color:#4b668c}.section-head button svg{width:13px}.work-empty{display:flex;align-items:center;gap:10px;padding:14px 2px 2px;color:#8b9cb4;font-size:11px}.work-empty svg{width:23px;height:23px;color:#7a94c7}.insight-banner{display:flex;align-items:center;text-align:left;width:100%;min-height:55px;border-radius:19px;margin-top:9px;padding:8px 12px;background:linear-gradient(105deg,#fff0fc,#eef6ff);border:2px solid #fff;box-shadow:0 2px 12px #d4e1f477;gap:9px}.insight-banner>span{color:#be4bec}.insight-banner>span svg{width:29px;height:29px}.insight-banner strong{font-size:13px;flex:1}.insight-banner strong small{display:block;color:#7a8ba9;font-size:10px;font-weight:500;margin-top:2px}.insight-banner>svg{width:16px}.bottom-nav{height:66px;min-height:66px;padding:6px 4px max(6px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(7,1fr);align-items:center;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -4px 20px #cbdcf170}.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;color:#4c658e;font-size:11px;padding:0;min-width:0}.bottom-nav button svg{width:24px;height:24px}.bottom-nav button.active{color:#7639f4}.bottom-nav button.orb{align-self:start;width:48px;height:48px;margin:-17px auto 0;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#ff65e7,#714bf0,#27bdff);box-shadow:inset 0 2px 3px #fff8,0 4px 12px #7869eb70}.bottom-nav button.orb svg{width:28px;height:28px}
/* Drawer and dialog */
.drawer-backdrop{align-items:stretch;justify-content:flex-start}.drawer{width:min(82vw,340px);height:100%;background:#f8fbff;box-shadow:10px 0 30px #2236683d;display:flex;flex-direction:column;padding:22px 18px max(22px,env(safe-area-inset-bottom));animation:slide-in .22s ease}.drawer-head{display:flex;align-items:center;justify-content:space-between}.drawer-user{display:flex;align-items:center;gap:11px;padding:22px 4px 18px}.drawer-user>svg{width:43px;height:43px;color:#5085ed}.drawer-user strong,.drawer-user small{display:block}.drawer-user strong{font-size:15px}.drawer-user small{font-size:11px;color:#8b9bb2;margin-top:2px}.drawer-section{display:grid;gap:2px;padding:13px 0;border-top:1px solid #e6edf7}.drawer-section>b{font-size:11px;color:#93a4bf;padding:0 5px 7px}.drawer-section button{height:43px;display:flex;gap:11px;align-items:center;text-align:left;font-size:13px;font-weight:600}.drawer-section button svg:first-child{width:20px;height:20px;color:#5e81c8}.drawer-section button svg:last-child{width:15px;height:15px;margin-left:auto;color:#a2b2ca}.drawer-foot{margin-top:auto;display:grid;gap:15px;text-align:center}.drawer-foot button{background:#e7f2ff;border-radius:99px;padding:12px;color:#1769d9;font-weight:700}.drawer-foot small{font-size:10px;color:#9bacc5}.sheet-backdrop{align-items:flex-end}.bottom-sheet{width:min(100%,520px);background:#fff;border-radius:26px 26px 0 0;padding:12px 25px max(28px,env(safe-area-inset-bottom));position:relative;text-align:center;box-shadow:0 -12px 50px #1a326640}.sheet-grip{width:40px;height:4px;border-radius:99px;background:#d8e1ee;margin:0 auto 20px}.sheet-close{position:absolute;right:14px;top:13px}.sheet-close svg{width:20px}.sheet-symbol{display:grid;place-items:center;width:52px;height:52px;margin:auto;border-radius:17px;color:#8371ef;background:#f0edff}.sheet-symbol svg{width:28px;height:28px}.bottom-sheet h2{font-size:20px;margin:12px 0 5px}.bottom-sheet p{color:#70819c;font-size:13px;line-height:1.7;margin:0 0 22px}.bottom-sheet .primary-button{font-size:15px}
/* Independent admin shell */
.admin-page{background:#f4f8fd;color:#1b2f50}.admin-header{height:68px;padding:9px 20px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e6edf7}.admin-header>button{display:flex;align-items:center;gap:5px;font-size:13px;color:#5274a5}.admin-header>button svg{width:16px}.admin-layout{display:grid;grid-template-columns:215px 1fr;max-width:1100px;margin:25px auto;gap:22px;padding:0 18px}.admin-layout aside{background:#fff;border-radius:20px;padding:20px 15px;box-shadow:0 5px 30px #d9e5f25c}.admin-layout aside h2{font-size:17px;margin:0}.admin-layout aside p{font-size:11px;color:#9aaac1;margin:3px 0 20px}.admin-layout aside button{display:flex;align-items:center;justify-content:space-between;width:100%;border-radius:10px;padding:11px 10px;font-size:13px;text-align:left;color:#627594}.admin-layout aside button.active{background:#eaf3ff;color:#176ed6;font-weight:800}.admin-layout aside button svg{width:13px}.admin-main{background:#fff;border-radius:20px;padding:26px;min-height:450px;box-shadow:0 5px 30px #d9e5f25c}.admin-main h1{margin:5px 0 4px;font-size:28px}.admin-main>p{font-size:13px;color:#7d8da6}.admin-state{margin-top:40px;border:1px dashed #c8d8ed;border-radius:17px;background:#fafcff;padding:34px;text-align:center}.admin-state svg{width:45px;height:45px;color:#7c9cce}.admin-state h2{font-size:18px;margin:8px 0}.admin-state p{color:#71839f;font-size:13px;line-height:1.7;max-width:440px;margin:0 auto 17px}.admin-state span{font-size:11px;color:#a5b2c5}
@keyframes slide-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media(max-width:600px){.admin-layout{grid-template-columns:1fr;margin:13px auto;gap:12px}.admin-layout aside{padding:13px}.admin-layout aside h2{font-size:15px}.admin-layout aside p{margin-bottom:10px}.admin-layout aside button{display:inline-flex;width:auto;margin:2px;font-size:11px;padding:8px}.admin-layout aside button svg{display:none}.admin-main{padding:20px;min-height:350px}.admin-state{margin-top:20px;padding:25px 16px}}
@media(max-width:480px){.auth-hero{height:47dvh;min-height:370px}.auth-tabs{margin-bottom:13px}.auth-tip{margin:8px 0 10px}.alternate-auth{margin:7px 0 10px}.auth-links{margin:2px 0 7px}.onboard-panel{display:flex;flex-direction:column}.onboard-bottom{margin-top:auto;padding-top:12px}}
@media(max-height:740px){.auth-hero{height:46dvh;min-height:310px}.auth-slogan{top:26%}.auth-panel{padding-top:10px}.auth-tabs{margin-bottom:11px}.alternate-auth{margin:6px 0}.field{min-height:46px}.home-hero{height:195px}.feature-card{height:69px}.work-empty{padding:9px 2px 0}}
@media(min-width:650px){.auth-page,.home-page,.onboarding{max-width:480px;margin:auto;box-shadow:0 0 50px #a5bdd133}.auth-hero{height:470px}.home-hero{height:260px}.onboard-hero{min-height:530px}}
.sheet-backdrop .wb-bottom-sheet{width:min(100%,520px);background:#fff;border-radius:26px 26px 0 0;padding:12px 25px max(28px,env(safe-area-inset-bottom));position:relative;text-align:center;box-shadow:0 -12px 50px #1a326640}
.wb-bottom-sheet h2{font-size:20px;margin:12px 0 5px}.wb-bottom-sheet p{color:#70819c;font-size:13px;line-height:1.7;margin:0 0 22px}.wb-bottom-sheet .primary-button{font-size:15px}
.image-choice-sheet>button:not(.sheet-close){display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;border-radius:14px;background:#f5f8ff;margin:8px 0;color:#1b3262;font-weight:700;text-align:left}.image-choice-sheet>button:not(.sheet-close) svg:first-child{width:23px;height:23px;color:#4b8cef}.image-choice-sheet>button:not(.sheet-close) svg:last-child{width:16px;height:16px;margin-left:auto}
.work-list{display:grid;gap:6px;padding-top:10px}.work-list button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:#f8fbff;border-radius:10px;padding:8px}.work-list button>svg{width:20px;height:20px;color:#6b89ca}.work-list span{display:grid;min-width:0;flex:1}.work-list strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.work-list small{font-size:9px;color:#9aabc4}.work-list em{font-style:normal;font-size:10px;color:#4077ca}
.wobangni-core-screen{position:fixed;inset:0;z-index:10;background:#f8f9fd}
.invite-field button{color:#147ee9;font-weight:700;font-size:12px;border-left:1px solid #e7edf7;padding-left:10px}.invite-notice{font-size:11px;color:#8b6c76;margin:-3px 0 9px;padding-left:8px}.invite-notice.matched{color:#24956e}.invite-field svg{color:#8587cf}

.onboarding{height:100dvh;overflow-y:auto}

/* Screenshot-led mobile home. Keep these overrides isolated from the workspace UI. */
.home-page { background: #f4f8ff; }
.avatar-button img { width: 100%; height: 100%; object-fit: cover; }
.home-scroll { padding: 0 15px 14px; background: linear-gradient(#edf5ff 0, #f7faff 46%, #f8faff 100%); }
.live-line { height: 31px; margin-top: 1px; padding: 0 12px; gap: 8px; border-radius: 18px; background: #fffefaee; box-shadow: 0 3px 17px #bdcbe766; }
.live-line span { color: #9b3eed; font-size: 11px; }
.live-line span svg { width: 13px; }
.live-line strong { flex: none; font-size: 10px; color: #202b4d; font-weight: 700; }
.live-line i { height: 12px; background: #5672a1; }
.live-line > svg { margin-left: auto; }
.home-hero { height: 238px; margin: 0 -15px -50px; background-size: 123% auto; background-position: right 52%; }
.home-hero::before { inset: 0 48% 0 0; background: linear-gradient(90deg, #f5f9ffef, #f5f9ffb8 58%, transparent); }
.hero-copy { left: 7%; top: 19px; z-index: 1; }
.hero-copy h1 { font-size: 30px; line-height: 1.12; margin-bottom: 8px; letter-spacing: -1.5px; }
.hero-copy h1 em { font-size: 37px; background: linear-gradient(95deg, #f23fae 5%, #a23ee7 46%, #058de5 85%); background-clip: text; }
.hero-copy p { color: #576888; font-size: 13px; line-height: 1.48; }
.pillar-row { gap: 8px; margin: 0 0 16px; }
.pillar-row button { height: 39px; border-radius: 16px; gap: 5px; background: #ffffffdf; box-shadow: 0 3px 11px #7694c255; }
.pillar-row svg { width: 18px; height: 18px; }
.pillar-row b { font-size: 12px; color: #26375e; }
.composer { height: 58px; margin-bottom: 7px; padding: 4px 5px 4px 8px; border-width: 4px; border-radius: 18px; background: #f4f7fc; }
.composer-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.composer .composer-copy input { width: 100%; padding: 0 5px; font-size: 11px; font-weight: 700; }
.composer-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #98a6bd; font-size: 9px; padding: 2px 5px 0; }
.composer button { width: 36px; height: 36px; flex: none; }
.composer-send { box-shadow: 0 3px 9px #a671dd55; }
.feature-grid { gap: 7px; }
.feature-card { height: 74px; padding: 0; background: #fff !important; border: 2px solid #fff; border-radius: 18px; box-shadow: 0 3px 12px #cbdaf071; }
.feature-card::after { content: ''; position: absolute; inset: 0 0 0 31%; background: linear-gradient(90deg, transparent, #fff 33%, #fff 100%); pointer-events: none; }
.feature-image { position: absolute; inset: 0 auto 0 0; width: 65%; height: 100%; object-fit: cover; object-position: left center; }
.feature-text { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; width: 51%; margin-left: auto; padding: 0 3px 0 0; }
.feature-text strong { display: flex; justify-content: space-between; font-size: 11px; line-height: 1.3; white-space: nowrap; color: #151b2c; }
.feature-text strong svg { width: 13px; height: 13px; }
.feature-text small { font-size: 9px; line-height: 1.44; margin-top: 4px; color: #71819a; }
.work-card { margin-top: 9px; padding: 10px 12px 9px; border-radius: 18px; }
.home-page .work-card .section-head { height: 22px; min-height: 22px; }
.section-head h2 { font-size: 14px; color: #121b31; }
.section-head button { font-size: 10px; color: #526c94; }
.platform-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.platform-row button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-right: 1px solid #eaf0f8; }
.platform-row button:last-child { border-right: 0; }
.platform-icon { width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.platform-icon svg { width: 17px; height: 17px; }
.platform-icon.douyin { background: #11121a; }.platform-icon.kuaishou { background: #ff5b16; }.platform-icon.xiaohongshu { background: #ff2442; }.platform-icon.wechat { background: #15be5d; }
.platform-row b { font-size: 10px; color: #1f2637; }
.platform-row small { color: #8998b0; font-size: 9px; white-space: nowrap; }
.platform-row small i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 4px; background: #b4bfd0; vertical-align: 1px; }
.home-task-summary { margin: 7px 0 0; border-top: 1px solid #eef2f9; padding-top: 5px; display: flex; justify-content: space-between; color: #8090a8; font-size: 9px; }
.home-task-summary button { display: inline-flex; align-items: center; color: #627be0; font-size: 9px; }.home-task-summary svg { width: 11px; }
.home-task-error { display: block; padding-top: 5px; color: #8998b0; font-size: 9px; }
.insight-banner { min-height: 40px; margin-top: 6px; padding: 5px 12px; border-radius: 18px; }
.insight-banner > span svg { width: 23px; height: 23px; }.insight-banner strong { font-size: 11px; }.insight-banner strong small { font-size: 9px; }
@media (min-width: 650px) { .home-page { max-width: 480px; } .home-hero { height: 255px; } }
@media (max-width: 360px) { .live-line { gap: 5px; padding: 0 8px; }.live-line strong { font-size: 9px; }.feature-text strong { font-size: 10px; }.feature-text small { font-size: 8px; } }
.xy-customer-platform-grid button small { display: block; color: #8997ae; font-size: 10px; line-height: 1.2; }
.xy-customer-phone-promo { margin: 12px 16px; padding: 15px; border: 1px solid #dce9ff; border-radius: 18px; background: linear-gradient(110deg, #f4f0ff, #eaf7ff); display: flex; align-items: center; gap: 10px; }
.xy-customer-phone-promo div { display: grid; gap: 4px; flex: 1; min-width: 0; }
.xy-customer-phone-promo strong { color: #244073; font-size: 13px; }.xy-customer-phone-promo small { color: #7184a3; font-size: 10px; line-height: 1.4; }
.xy-customer-phone-promo > button { display: inline-flex; align-items: center; white-space: nowrap; gap: 2px; border-radius: 99px; background: linear-gradient(115deg, #7365f4, #299df1); color: #fff; padding: 9px 10px; font-size: 11px; font-weight: 700; }
.xy-customer-purchase-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: #17233c88; }
.xy-customer-purchase-backdrop > section { position: relative; max-width: 370px; width: 100%; border-radius: 22px; padding: 26px 22px 22px; background: #fff; box-shadow: 0 15px 45px #0d245257; }
.xy-customer-purchase-backdrop > section > button:first-child { position: absolute; right: 14px; top: 12px; padding: 4px; }
.xy-customer-purchase-backdrop h2 { margin: 0 0 10px; color: #20335f; font-size: 19px; }.xy-customer-purchase-backdrop p { color: #617491; font-size: 13px; line-height: 1.65; }
.xy-customer-purchase-backdrop > section > button:last-child { width: 100%; margin-top: 12px; border-radius: 99px; padding: 12px; background: #5468ef; color: #fff; font-weight: 700; }
.member-partner-error { margin: 0 13px 9px; color: #c33855; font-size: 11px; line-height: 1.4; }
/* Auth owns its scrolling because the shared application shell locks body overflow. */
.auth-page.page {
  height: var(--auth-viewport-height, 100dvh);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin !important;
  scrollbar-color: #90a9ce #edf3fb;
}

.auth-page > .auth-hero,
.auth-page > .auth-panel {
  flex-shrink: 0;
}

/* Override the embedded workspace's global hidden-scrollbar rules, for auth only. */
.auth-page.page::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
}
.auth-page.page::-webkit-scrollbar-track { background: #edf3fb; }
.auth-page.page::-webkit-scrollbar-thumb { background: #90a9ce; border-radius: 6px; }
.auth-page .auth-panel { scroll-margin-bottom: env(safe-area-inset-bottom); }