/*
 * Halfread Web / iOS visual parity layer
 * Theme: Pearl Instrument · Amber Halo / 珠光精仪 · 橙曜 (v5.0)
 *
 * Scope contract:
 * - Active only while <body> carries .mpp-v5.
 * - Visual and layout overrides only; no product field or action is hidden here.
 * - Dense chart data remains neutral. #ff4747 is used only as a 10% glaze.
 */

body.mpp-v5 {
  /* Semantic color tokens */
  --mpp-color-canvas: #f0ebe5;
  --mpp-color-canvas-deep: #e1d9d1;
  --mpp-color-surface: #fcf9f5;
  --mpp-color-surface-active: #fffdf9;
  --mpp-color-surface-muted: #ebe5de;
  --mpp-color-text: #12110f;
  --mpp-color-text-secondary: #57504b;
  --mpp-color-text-tertiary: #756c65;
  --mpp-color-border: #ccc2b9;
  --mpp-color-border-strong: #a1978f;
  --mpp-color-action: #d1412d;
  --mpp-color-action-strong: #a83227;
  --mpp-color-action-soft: #fff0eb;
  --mpp-color-action-text: #fff8f2;
  --mpp-color-tomato-glaze: #ff47471a;
  --mpp-color-amber: #e88c55;
  --mpp-color-amber-soft: #f2af70;
  --mpp-color-cool-light: #aabfc7;
  --mpp-color-success: #2c744f;
  --mpp-color-warning: #8a5b10;
  --mpp-color-danger: #a33a32;
  --mpp-color-info: #315f8f;

  /* Five-element display tokens; labels and Ten Gods remain independent. */
  --mpp-color-wood-text: #27754a;
  --mpp-color-wood-fill: #e7f4ea;
  --mpp-color-fire-text: #a83f36;
  --mpp-color-fire-fill: #fae8e4;
  --mpp-color-earth-text: #7d552f;
  --mpp-color-earth-fill: #f3e9db;
  --mpp-color-metal-text: #8c5c0b;
  --mpp-color-metal-fill: #faf0d2;
  --mpp-color-water-text: #2d5f99;
  --mpp-color-water-fill: #e6eff8;

  /* Typography aliases */
  --mpp-font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
  --mpp-font-body: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif;
  --mpp-font-data: "SF Pro Text", "SFMono-Regular", "JetBrains Mono", Menlo, monospace;
  --mpp-type-display: clamp(1.75rem, 7.2vw, 2.125rem);
  --mpp-type-title-1: 1.5rem;
  --mpp-type-title-2: 1.25rem;
  --mpp-type-headline: 1.0625rem;
  --mpp-type-body: 1rem;
  --mpp-type-body-compact: 0.875rem;
  --mpp-type-label: 0.8125rem;
  --mpp-type-caption: 0.75rem;
  --mpp-type-micro: 0.6875rem;

  /* Spacing, shape, size and motion tokens */
  --mpp-space-1: 0.25rem;
  --mpp-space-2: 0.5rem;
  --mpp-space-3: 0.75rem;
  --mpp-space-4: 1rem;
  --mpp-space-5: 1.25rem;
  --mpp-space-6: 1.5rem;
  --mpp-space-8: 2rem;
  --mpp-space-10: 2.5rem;
  --mpp-radius-data: 0.375rem;
  --mpp-radius-control: 0.75rem;
  --mpp-radius-field: 1rem;
  --mpp-radius-card: 1.25rem;
  --mpp-radius-sheet: 1.5rem;
  --mpp-radius-feature: 1.75rem;
  --mpp-radius-dock: 1.875rem;
  --mpp-radius-full: 999px;
  --mpp-touch-min: 44px;
  --mpp-control-height: 48px;
  --mpp-button-height: 52px;
  --mpp-page-gutter: 16px;
  --mpp-content-width: 370px;
  --mpp-bottom-nav-height: 72px;
  --mpp-safe-top: env(safe-area-inset-top, 0px);
  --mpp-safe-right: env(safe-area-inset-right, 0px);
  --mpp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mpp-safe-left: env(safe-area-inset-left, 0px);
  --mpp-duration-press: 80ms;
  --mpp-duration-fast: 160ms;
  --mpp-duration-standard: 240ms;
  --mpp-duration-sheet: 320ms;
  --mpp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mpp-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Material tokens */
  --mpp-surface-gradient:
    radial-gradient(ellipse at 96% 0, rgba(232, 140, 85, 0.055), transparent 36%),
    linear-gradient(145deg, rgba(255, 253, 249, 0.94), rgba(235, 229, 222, 0.88));
  --mpp-canvas-gradient:
    radial-gradient(ellipse at 88% 1%, rgba(232, 140, 85, 0.2), transparent 29%),
    radial-gradient(ellipse at 4% 86%, rgba(242, 175, 112, 0.13), transparent 31%),
    radial-gradient(ellipse at 96% 82%, rgba(170, 191, 199, 0.1), transparent 25%),
    linear-gradient(155deg, #f0ebe5 0%, #f8f4ef 48%, #e3dbd4 100%);
  --mpp-shadow-surface:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 13px 30px rgba(67, 54, 46, 0.1),
    0 2px 7px rgba(67, 54, 46, 0.045);
  --mpp-shadow-float:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 22px 52px rgba(63, 48, 39, 0.15),
    0 5px 15px rgba(63, 48, 39, 0.075);
  --mpp-shadow-action:
    0 14px 28px rgba(176, 53, 40, 0.2),
    0 0 25px rgba(255, 71, 71, 0.1),
    0 1px 0 rgba(255, 197, 178, 0.38) inset,
    0 -2px 0 rgba(178, 49, 36, 0.38) inset;

  /* Compatibility aliases for the existing Web presentation layer. */
  --bg-0: var(--mpp-color-canvas);
  --bg-1: var(--mpp-color-surface);
  --bg-2: var(--mpp-color-surface-muted);
  --bg-3: var(--mpp-color-canvas-deep);
  --paper: var(--mpp-color-surface);
  --line: var(--mpp-color-border);
  --line-2: rgba(161, 151, 143, 0.38);
  --ink: var(--mpp-color-text);
  --ink-dim: var(--mpp-color-text-secondary);
  --ink-dimmer: var(--mpp-color-text-tertiary);
  --cinnabar: var(--mpp-color-action);
  --cinnabar-2: var(--mpp-color-action-strong);
  --gold: var(--mpp-color-amber);
  --gold-2: var(--mpp-color-action-strong);
  --wood: var(--mpp-color-wood-text);
  --fire: var(--mpp-color-fire-text);
  --earth: var(--mpp-color-earth-text);
  --metal: var(--mpp-color-metal-text);
  --water: var(--mpp-color-water-text);
  --serif: var(--mpp-font-display);
  --sans: var(--mpp-font-body);
  --display: var(--mpp-font-display);
  --mono: var(--mpp-font-data);

  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0 !important;
  overflow-x: clip;
  background: var(--mpp-canvas-gradient) fixed;
  color: var(--mpp-color-text);
  font-family: var(--mpp-font-body);
  font-size: 16px;
  line-height: 1.5;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.mpp-v5 *,
body.mpp-v5 *::before,
body.mpp-v5 *::after {
  box-sizing: border-box;
}

body.mpp-v5 :where(button, input, select, textarea) {
  font: inherit;
}

body.mpp-v5 :where(button, [role="button"], a, summary, input, select, textarea) {
  -webkit-tap-highlight-color: rgba(209, 65, 45, 0.12);
}

body.mpp-v5 :where(button, [role="button"], a, summary) {
  touch-action: manipulation;
}

body.mpp-v5 :where(button, [role="button"], a, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(49, 95, 143, 0.78) !important;
  outline-offset: 3px;
}

body.mpp-v5 :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

body.mpp-v5 ::selection {
  background: rgba(209, 65, 45, 0.2);
  color: var(--mpp-color-text);
}

body.mpp-v5 ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

body.mpp-v5 ::-webkit-scrollbar-track {
  background: transparent;
}

body.mpp-v5 ::-webkit-scrollbar-thumb {
  border-radius: var(--mpp-radius-full);
  background: rgba(117, 108, 101, 0.34);
}

/* --------------------------------------------------------------------------
   Application shell and four primary destinations
   -------------------------------------------------------------------------- */

body.mpp-v5 .mpp-shell,
body.mpp-v5 #mpp-app-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--mpp-bottom-nav-height) + var(--mpp-safe-bottom) + 18px);
}

body.mpp-v5 .mpp-page {
  width: min(100%, 1120px);
  min-height: calc(100vh - var(--mpp-bottom-nav-height) - var(--mpp-safe-bottom));
  min-height: calc(100dvh - var(--mpp-bottom-nav-height) - var(--mpp-safe-bottom));
  margin-inline: auto;
  padding-top: var(--mpp-safe-top);
}

body.mpp-v5 .mpp-page.is-route-transition {
  animation: mpp-page-settle var(--mpp-duration-standard) var(--mpp-ease) both;
}

body.mpp-v5 .mpp-page[hidden] {
  display: none !important;
}

body.mpp-v5 .mpp-page:is(.is-active, [aria-hidden="false"]) {
  display: block;
}

body.mpp-v5 .mpp-page[data-mpp-page="chart"] {
  width: min(100%, 1024px);
}

body.mpp-v5 .mpp-page[data-mpp-page="records"],
body.mpp-v5 .mpp-page[data-mpp-page="reading"],
body.mpp-v5 .mpp-page[data-mpp-page="profile"] {
  padding-inline: max(var(--mpp-page-gutter), var(--mpp-safe-left)) max(var(--mpp-page-gutter), var(--mpp-safe-right));
  padding-bottom: var(--mpp-space-8);
}

body.mpp-v5 .mpp-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--mpp-space-4);
  padding: var(--mpp-space-5) 0 var(--mpp-space-4);
}

body.mpp-v5 .mpp-page-header > div {
  min-width: 0;
}

body.mpp-v5 .mpp-page-eyebrow,
body.mpp-v5 .mpp-eyebrow {
  margin: 0 0 4px;
  color: var(--mpp-color-action-strong);
  font: 650 var(--mpp-type-micro) / 1.4 var(--mpp-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.mpp-v5 .mpp-page-title,
body.mpp-v5 .mpp-page-header h1,
body.mpp-v5 .mpp-page-header h2 {
  margin: 0;
  color: var(--mpp-color-text);
  font: 700 var(--mpp-type-title-1) / 1.34 var(--mpp-font-display);
  letter-spacing: -0.01em;
}

body.mpp-v5 .mpp-page-subtitle {
  margin: 5px 0 0;
  color: var(--mpp-color-text-secondary);
  font-size: var(--mpp-type-caption);
  line-height: 1.65;
}

body.mpp-v5 .mpp-section-card,
body.mpp-v5 .mpp-empty-card,
body.mpp-v5 .mpp-account-card,
body.mpp-v5 .mpp-reading-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-card);
  background: var(--mpp-surface-gradient);
  box-shadow: var(--mpp-shadow-surface);
  -webkit-backdrop-filter: blur(18px) saturate(0.88);
  backdrop-filter: blur(18px) saturate(0.88);
}

body.mpp-v5 .mpp-section-card::before,
body.mpp-v5 .mpp-account-card::before,
body.mpp-v5 .mpp-reading-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d1412d, #e37d42, #f1c794, #bad0d3, transparent);
  opacity: 0.58;
  pointer-events: none;
}

body.mpp-v5 .mpp-empty-card {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: var(--mpp-space-6);
  color: var(--mpp-color-text-secondary);
  text-align: center;
}

/* Fixed four-item navigation. */
body.mpp-v5 .mpp-bottom-nav,
body.mpp-v5 #mpp-bottom-nav {
  position: fixed;
  z-index: 9000;
  right: max(12px, var(--mpp-safe-right));
  bottom: max(8px, var(--mpp-safe-bottom));
  left: max(12px, var(--mpp-safe-left));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(calc(100% - 24px - var(--mpp-safe-left) - var(--mpp-safe-right)), 540px);
  min-height: var(--mpp-bottom-nav-height);
  margin-inline: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-dock);
  background:
    radial-gradient(ellipse at 18% 0, rgba(237, 151, 99, 0.08), transparent 38%),
    linear-gradient(145deg, rgba(255, 253, 249, 0.88), rgba(238, 231, 224, 0.82));
  box-shadow: var(--mpp-shadow-float);
  -webkit-backdrop-filter: blur(22px) saturate(0.92);
  backdrop-filter: blur(22px) saturate(0.92);
}

body.mpp-v5 .mpp-nav-item {
  position: relative;
  display: grid;
  grid-template-rows: 24px auto;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-width: var(--mpp-touch-min);
  min-height: 58px;
  padding: 5px 4px 4px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: transparent;
  color: var(--mpp-color-text-tertiary);
  font: 550 10px / 14px var(--mpp-font-body);
  cursor: pointer;
  transition:
    color var(--mpp-duration-fast) var(--mpp-ease),
    background var(--mpp-duration-fast) var(--mpp-ease),
    box-shadow var(--mpp-duration-fast) var(--mpp-ease);
}

body.mpp-v5 .mpp-nav-item :where(svg, .mpp-nav-icon) {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.mpp-v5 .mpp-nav-item :where(.mpp-nav-label, span:last-child) {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mpp-v5 .mpp-nav-item:is(.is-active, .active, [aria-current="page"], [aria-selected="true"]) {
  border-color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.97), rgba(239, 222, 211, 0.9));
  color: var(--mpp-color-action-strong);
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.64),
    4px 5px 11px rgba(111, 75, 56, 0.1),
    0 1px 0 #fff inset;
}

body.mpp-v5 .mpp-nav-item:is(.is-active, .active, [aria-current="page"], [aria-selected="true"])::before {
  content: "";
  position: absolute;
  top: 4px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--mpp-color-action);
  box-shadow: 0 0 0 4px var(--mpp-color-tomato-glaze);
}

/* --------------------------------------------------------------------------
   Chart destination: compact app bar, input form and primary action
   -------------------------------------------------------------------------- */

body.mpp-v5 #bx-old-header {
  position: relative;
  z-index: 5;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 600px);
  min-height: 54px;
  margin: 0 auto;
  padding: 10px max(var(--mpp-page-gutter), var(--mpp-safe-right)) 6px max(var(--mpp-page-gutter), var(--mpp-safe-left));
  border: 0;
  background: transparent;
}

body.mpp-v5:not([data-mpp-destination="chart"]) #bx-old-header {
  display: none !important;
}

body.mpp-v5 #bx-old-header .brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

body.mpp-v5 #bx-old-header .brand-mark,
body.mpp-v5 #bx-old-header .brand-cn {
  order: initial;
  margin: 0;
  color: var(--mpp-color-text);
  font-family: var(--mpp-font-display);
  font-style: normal;
  line-height: 1.2;
}

body.mpp-v5 #bx-old-header .brand-mark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.mpp-v5 #bx-old-header .brand-cn {
  color: var(--mpp-color-text-tertiary);
  font-family: var(--mpp-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

body.mpp-v5 #bx-old-header .brand-sub {
  display: none;
}

body.mpp-v5 #btn-header-login {
  min-width: var(--mpp-touch-min);
  min-height: var(--mpp-touch-min);
  padding: 8px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: var(--mpp-surface-gradient) !important;
  color: var(--mpp-color-action-strong) !important;
  box-shadow: var(--mpp-shadow-surface);
  letter-spacing: 0 !important;
}

body.mpp-v5 #ver-badge,
body.mpp-v5 #btn-header-login-icon {
  color: var(--mpp-color-text-tertiary) !important;
}

body.mpp-v5 #bx-form-panel {
  position: relative;
  width: min(calc(100% - 24px), 560px);
  max-width: 560px;
  margin: 4px auto var(--mpp-space-6);
  padding: var(--mpp-space-5) var(--mpp-space-4) var(--mpp-space-5);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-feature) !important;
  background:
    radial-gradient(ellipse at 92% 2%, rgba(238, 126, 64, 0.23), transparent 35%),
    radial-gradient(ellipse at 5% 96%, rgba(246, 181, 112, 0.15), transparent 40%),
    linear-gradient(142deg, rgba(254, 251, 247, 0.91), rgba(232, 223, 214, 0.82)) !important;
  box-shadow: var(--mpp-shadow-surface) !important;
  -webkit-backdrop-filter: blur(18px) saturate(0.88);
  backdrop-filter: blur(18px) saturate(0.88);
}

body.mpp-v5 #bx-form-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: calc(var(--mpp-radius-feature) - 1px);
  background:
    linear-gradient(116deg, transparent 5% 30%, rgba(255, 255, 255, 0.52) 38%, rgba(240, 151, 94, 0.1) 44%, transparent 54%),
    radial-gradient(ellipse at 78% 14%, rgba(255, 215, 178, 0.13), transparent 39%);
  opacity: 0.9;
  pointer-events: none;
}

body.mpp-v5 #bx-form-panel > * {
  position: relative;
  z-index: 1;
}

body.mpp-v5 #bx-form-panel .me-hero {
  margin: 0 0 var(--mpp-space-5);
  text-align: left;
}

body.mpp-v5 #bx-form-panel .me-hero-tag {
  margin: 0 0 7px;
  color: var(--mpp-color-action-strong);
  font: 650 var(--mpp-type-micro) / 1.45 var(--mpp-font-body);
  letter-spacing: 0.14em;
}

body.mpp-v5 #bx-form-panel .me-hero-title {
  margin: 0;
  color: var(--mpp-color-text);
  font: 700 var(--mpp-type-display) / 1.28 var(--mpp-font-display);
  letter-spacing: -0.02em;
}

body.mpp-v5 #bx-form-panel .me-hero-sub {
  max-width: 31em;
  margin: 7px 0 0;
  color: var(--mpp-color-text-secondary);
  font: 400 var(--mpp-type-label) / 1.62 var(--mpp-font-body);
}

body.mpp-v5 #bx-form-panel .me-hero-rule {
  display: block;
  width: 56px;
  height: 3px;
  margin: 14px 0 0;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #d1412d, #e37d42, #f1c794, #bad0d3);
}

body.mpp-v5 #bx-from-sample-banner {
  padding: 11px 13px !important;
  border: 1px solid rgba(209, 65, 45, 0.2) !important;
  border-left: 3px solid var(--mpp-color-action) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: rgba(255, 253, 249, 0.8) !important;
  color: var(--mpp-color-text-secondary) !important;
  font-family: var(--mpp-font-body) !important;
}

body.mpp-v5 #bx-form-panel .mpp-editing-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: 0 0 var(--mpp-space-4);
  padding: 4px 4px 4px 13px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-left: 3px solid var(--mpp-color-action);
  border-radius: var(--mpp-radius-control);
  background:
    radial-gradient(ellipse at 96% 0, rgba(232, 140, 85, 0.09), transparent 42%),
    linear-gradient(145deg, rgba(255, 253, 249, 0.86), rgba(238, 229, 220, 0.68));
  color: var(--mpp-color-text);
  box-shadow: 0 1px 0 #fff inset, 0 5px 14px rgba(67, 54, 46, 0.055);
}

body.mpp-v5 #bx-form-panel .mpp-editing-banner[hidden] {
  display: none !important;
}

body.mpp-v5 #bx-form-panel .mpp-editing-banner-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--mpp-color-text-secondary);
  font: 650 var(--mpp-type-label) / 1.5 var(--mpp-font-body);
  overflow-wrap: anywhere;
}

body.mpp-v5 #bx-form-panel .mpp-editing-banner-label::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--mpp-color-action);
  box-shadow: 0 0 0 4px var(--mpp-color-tomato-glaze);
  vertical-align: 1px;
}

body.mpp-v5 #bx-form-panel .mpp-editing-cancel {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: var(--mpp-touch-min);
  min-height: var(--mpp-touch-min);
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.78);
  color: var(--mpp-color-action-strong);
  box-shadow: 0 1px 0 #fff inset;
  font: 650 var(--mpp-type-caption) / 1.2 var(--mpp-font-body);
  cursor: pointer;
}

body.mpp-v5 #bx-form-panel .mpp-editing-cancel:is(:disabled, [aria-disabled="true"]) {
  border-color: rgba(161, 151, 143, 0.28);
  background: rgba(244, 239, 233, 0.7);
  color: var(--mpp-color-text-tertiary);
  box-shadow: none;
  opacity: 0.62;
  cursor: not-allowed;
}

body.mpp-v5.mpp-editing-active #bx-form-panel {
  display: block !important;
}

body.mpp-v5.mpp-editing-active #bx-form-panel .mpp-editing-banner:not([hidden]) {
  display: flex !important;
}

body.mpp-v5.mpp-editing-active :is(#main, #btn-history),
body.mpp-v5.mpp-editing-active :is(.mpp-result-dock, #mpp-result-dock, [data-web-ios-command-dock]),
body.mpp-v5.mpp-editing-active :is(.mpp-bottom-nav, #mpp-bottom-nav, [data-web-ios-nav]),
body.mpp-v5.mpp-editing-active :is(.mpp-chart-tools, #mpp-chart-tools) {
  display: none !important;
}

body.mpp-v5 #bx-form-panel .form-mode-content {
  gap: var(--mpp-space-3);
  margin-bottom: var(--mpp-space-3);
}

body.mpp-v5 #bx-form-panel .form-mode-switch-row {
  order: -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-height: 40px;
  margin: 0 0 var(--mpp-space-2);
  padding: 3px;
  border: 0 !important;
  border-radius: var(--mpp-radius-control);
  background: rgba(225, 217, 209, 0.78) !important;
}

body.mpp-v5 #bx-form-panel :is(.form-mode-switch-link, .me-mode-current) {
  display: inline-flex;
  min-width: var(--mpp-touch-min);
  min-height: 34px;
  margin: 0 !important;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent !important;
  border-radius: 9px;
  background: transparent !important;
  color: var(--mpp-color-text-secondary);
  font: 550 var(--mpp-type-label) / 1.2 var(--mpp-font-body);
  letter-spacing: 0;
  text-decoration: none;
}

body.mpp-v5 #bx-form-panel .me-mode-current {
  border-color: rgba(255, 255, 255, 0.92) !important;
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.97), rgba(239, 222, 211, 0.9)) !important;
  color: var(--mpp-color-action-strong);
  box-shadow: 0 1px 4px rgba(67, 54, 46, 0.08), 0 1px 0 #fff inset;
}

body.mpp-v5 #bx-form-panel .form-row-v7 {
  gap: 6px;
}

body.mpp-v5 #bx-form-panel .form-row-v7 > label,
body.mpp-v5 #bx-form-panel .late-zi-policy-field > span {
  color: var(--mpp-color-text-secondary);
  font: 600 var(--mpp-type-label) / 1.45 var(--mpp-font-body);
  letter-spacing: 0;
  text-transform: none;
}

body.mpp-v5 #bx-form-panel .form-input-v7,
body.mpp-v5 :is(.v7u-login-input, .v7u-custom-input, .v7u-custom-textarea),
body.mpp-v5 .hr-v2-field :is(input, select),
body.mpp-v5 .hr-v2-followup textarea {
  width: 100%;
  min-height: var(--mpp-control-height);
  padding: 11px 13px;
  border: 1px solid rgba(161, 151, 143, 0.52) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: rgba(255, 253, 249, 0.86) !important;
  color: var(--mpp-color-text) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  font-family: var(--mpp-font-body);
  font-size: 16px;
  line-height: 1.4;
  transition:
    border-color var(--mpp-duration-fast) var(--mpp-ease),
    box-shadow var(--mpp-duration-fast) var(--mpp-ease),
    background var(--mpp-duration-fast) var(--mpp-ease);
}

body.mpp-v5 #bx-form-panel .form-input-v7:focus,
body.mpp-v5 :is(.v7u-login-input, .v7u-custom-input, .v7u-custom-textarea):focus,
body.mpp-v5 .hr-v2-field :is(input, select):focus,
body.mpp-v5 .hr-v2-followup textarea:focus {
  outline: 0;
  border-color: var(--mpp-color-action) !important;
  background: var(--mpp-color-surface-active) !important;
  box-shadow: 0 0 0 3px rgba(209, 65, 45, 0.12) !important;
}

body.mpp-v5 #bx-form-panel select.form-input-v7 {
  appearance: auto;
  background-image: none;
  padding-right: 13px;
}

body.mpp-v5 #bx-form-panel .lunar-date-grid {
  gap: var(--mpp-space-2);
}

body.mpp-v5 #bx-form-panel .checkbox-inline-v7 {
  min-height: var(--mpp-touch-min);
  color: var(--mpp-color-text-secondary);
  font: 400 var(--mpp-type-body-compact) / 1.5 var(--mpp-font-body);
}

body.mpp-v5 #bx-form-panel .checkbox-inline-v7 input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--mpp-color-action);
}

body.mpp-v5 #bx-form-panel .help-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(161, 151, 143, 0.46);
  border-radius: 8px;
  background: var(--mpp-color-surface-muted);
  color: var(--mpp-color-text-tertiary);
}

body.mpp-v5 #bx-form-panel .form-advanced-v7 {
  margin-top: var(--mpp-space-3);
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--mpp-radius-field);
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.78), rgba(238, 229, 220, 0.62));
  box-shadow: 0 1px 0 #fff inset, 0 4px 12px rgba(67, 54, 46, 0.045);
}

body.mpp-v5 #bx-form-panel .form-advanced-v7 > summary {
  display: flex;
  min-height: var(--mpp-touch-min);
  align-items: center;
  color: var(--mpp-color-text-secondary);
  font: 550 var(--mpp-type-label) / 1.4 var(--mpp-font-body);
}

body.mpp-v5 #bx-form-panel .form-advanced-v7 > summary::before {
  color: var(--mpp-color-action);
}

body.mpp-v5 #bx-form-panel .late-zi-policy-field {
  border-color: rgba(161, 151, 143, 0.35);
}

body.mpp-v5 #bx-form-panel .late-zi-policy-field small {
  color: var(--mpp-color-text-tertiary);
  font-size: var(--mpp-type-caption);
}

body.mpp-v5 #bx-form-panel .correction-info {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-left: 3px solid var(--mpp-color-action);
  border-radius: var(--mpp-radius-control);
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.78), rgba(238, 229, 220, 0.62));
  color: var(--mpp-color-text-secondary);
  font: 500 var(--mpp-type-caption) / 1.55 var(--mpp-font-data);
  box-shadow: 0 1px 0 #fff inset;
}

body.mpp-v5 #bx-form-panel .correction-info span strong {
  color: var(--mpp-color-action-strong);
}

body.mpp-v5 #bx-form-panel .compute-row-v7 {
  gap: 10px;
  margin-top: var(--mpp-space-4);
}

body.mpp-v5 :is(.btn-compute-v7, .btn-primary, .btn-accent, .p0-btn-primary, .fp-entry-btn),
body.mpp-v5 :is(.v7u-btn:not(.outline):not(.secondary), .v6-btn:not(.v6-btn-ghost), .hr-v2-primary, .v7u-custom-submit, .v7u-rd-detail-copy),
body.mpp-v5 .v6-rd-actions button.primary {
  min-height: var(--mpp-button-height);
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(118deg, var(--mpp-color-tomato-glaze), transparent 42%),
    linear-gradient(180deg, #cf4934, var(--mpp-color-action)) !important;
  color: var(--mpp-color-action-text) !important;
  box-shadow: var(--mpp-shadow-action) !important;
  font-family: var(--mpp-font-body) !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em !important;
  text-indent: 0 !important;
  cursor: pointer;
  transition:
    filter var(--mpp-duration-press) var(--mpp-ease),
    transform var(--mpp-duration-press) var(--mpp-ease),
    box-shadow var(--mpp-duration-fast) var(--mpp-ease);
}

body.mpp-v5 :is(.btn-compute-v7, .btn-primary, .btn-accent, .p0-btn-primary, .fp-entry-btn):active,
body.mpp-v5 :is(.v7u-btn:not(.outline):not(.secondary), .v6-btn:not(.v6-btn-ghost), .hr-v2-primary, .v7u-custom-submit, .v7u-rd-detail-copy):active,
body.mpp-v5 .v6-rd-actions button.primary:active {
  transform: scale(0.985) !important;
  filter: brightness(0.96);
  box-shadow: 0 7px 16px rgba(176, 53, 40, 0.18), 0 1px 0 rgba(255, 197, 178, 0.3) inset !important;
}

body.mpp-v5 :is(.btn-history-v7, .btn:not(.btn-primary):not(.btn-accent), .v7u-btn.outline, .v7u-btn.secondary, .v6-btn-ghost, .hr-v2-secondary),
body.mpp-v5 .v6-rd-actions button:not(.primary) {
  min-height: var(--mpp-control-height);
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: var(--mpp-surface-gradient) !important;
  color: var(--mpp-color-text) !important;
  box-shadow: var(--mpp-shadow-surface) !important;
  font-family: var(--mpp-font-body) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0 !important;
  cursor: pointer;
}

body.mpp-v5 #bx-form-panel .btn-compute-v7,
body.mpp-v5 #bx-form-panel .btn-history-v7 {
  width: 100%;
  flex: 1 1 100%;
  margin: 0;
}

body.mpp-v5 #bx-form-panel .btn-compute-v7 {
  order: 2;
}

body.mpp-v5 #bx-form-panel .btn-history-v7 {
  order: 3;
}

body.mpp-v5 .fp-overlay {
  background: rgba(18, 17, 15, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.mpp-v5 .fp-modal,
body.mpp-v5 .fp-options-area,
body.mpp-v5 .fp-candidates-area,
body.mpp-v5 .fp-entry-card,
body.mpp-v5 .fp-pillars-row {
  border-color: rgba(255, 255, 255, 0.84) !important;
  background: var(--mpp-surface-gradient) !important;
  color: var(--mpp-color-text) !important;
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .fp-modal {
  border-radius: var(--mpp-radius-sheet);
  box-shadow: var(--mpp-shadow-float);
}

body.mpp-v5 :is(.fp-option, .fp-candidate, .fp-unknown-btn, .fp-reset, .fp-range-extend) {
  min-height: var(--mpp-touch-min);
  border-color: rgba(161, 151, 143, 0.48);
  border-radius: var(--mpp-radius-control);
  background: rgba(255, 253, 249, 0.76);
  color: var(--mpp-color-text);
}

/* --------------------------------------------------------------------------
   Result shell, five chart tabs and the glass command dock
   -------------------------------------------------------------------------- */

body.mpp-v5 .main {
  display: block;
  width: min(100%, 1024px);
  margin: 0 auto;
  padding: 0 max(12px, var(--mpp-safe-right)) calc(var(--mpp-bottom-nav-height) + var(--mpp-safe-bottom) + 104px) max(12px, var(--mpp-safe-left));
  overflow: visible;
}

body.mpp-v5 .empty-state {
  min-height: 180px;
  padding: var(--mpp-space-8) var(--mpp-space-4);
  color: var(--mpp-color-text-tertiary);
  font-family: var(--mpp-font-body);
  font-style: normal;
  font-size: var(--mpp-type-body-compact);
  letter-spacing: 0;
}

body.mpp-v5 .tabs-bar {
  position: sticky;
  z-index: 60;
  top: var(--mpp-safe-top);
  display: flex;
  width: calc(100% + 24px);
  height: 48px;
  margin: 0 -12px var(--mpp-space-3);
  padding: 5px 10px;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-width: 1px 0 !important;
  border-radius: 0 !important;
  background: rgba(252, 249, 245, 0.9) !important;
  box-shadow: 0 8px 20px rgba(67, 54, 46, 0.07) !important;
  -webkit-backdrop-filter: blur(20px) saturate(0.9);
  backdrop-filter: blur(20px) saturate(0.9);
  scrollbar-width: none;
}

body.mpp-v5 .tabs-bar::-webkit-scrollbar {
  display: none;
}

body.mpp-v5 .tab-btn {
  position: relative;
  flex: 0 0 auto;
  min-width: max(84px, var(--mpp-touch-min));
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--mpp-color-text-secondary);
  font: 550 12px / 1.2 var(--mpp-font-body);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--mpp-duration-fast) var(--mpp-ease),
    background var(--mpp-duration-fast) var(--mpp-ease),
    box-shadow var(--mpp-duration-fast) var(--mpp-ease);
}

body.mpp-v5 .tab-btn.active {
  border-color: rgba(255, 255, 255, 0.44) !important;
  background:
    linear-gradient(118deg, var(--mpp-color-tomato-glaze), transparent 44%),
    linear-gradient(180deg, #cf4934, var(--mpp-color-action)) !important;
  color: var(--mpp-color-action-text) !important;
  box-shadow: 0 8px 18px rgba(176, 53, 40, 0.17), 0 1px 0 rgba(255, 197, 178, 0.34) inset !important;
  font-weight: 700;
}

body.mpp-v5 .tab-btn.active::after {
  display: none;
}

body.mpp-v5 .tab-panel.active {
  animation: mpp-content-in var(--mpp-duration-standard) var(--mpp-ease) both;
}

body.mpp-v5 .mpp-result-dock,
body.mpp-v5 #mpp-result-dock {
  position: fixed;
  z-index: 8990;
  right: max(12px, var(--mpp-safe-right));
  bottom: calc(var(--mpp-bottom-nav-height) + var(--mpp-safe-bottom) + 14px);
  left: max(12px, var(--mpp-safe-left));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(calc(100% - 24px - var(--mpp-safe-left) - var(--mpp-safe-right)), 560px);
  min-height: 58px;
  margin-inline: auto;
  padding: 6px;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-dock);
  background:
    radial-gradient(ellipse at 18% 0, rgba(237, 151, 99, 0.08), transparent 38%),
    linear-gradient(145deg, rgba(255, 253, 249, 0.88), rgba(238, 231, 224, 0.82));
  box-shadow: var(--mpp-shadow-float);
  -webkit-backdrop-filter: blur(22px) saturate(0.92);
  backdrop-filter: blur(22px) saturate(0.92);
  animation: mpp-dock-in var(--mpp-duration-standard) var(--mpp-ease) both;
}

body.mpp-v5 :is(.mpp-result-dock, #mpp-result-dock)[hidden] {
  display: none !important;
}

body.mpp-v5 :is(.mpp-result-dock, #mpp-result-dock) :where(button, .mpp-dock-action) {
  display: grid;
  grid-template-columns: 20px minmax(0, auto);
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 46px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 20px;
  background: rgba(255, 253, 249, 0.72);
  color: var(--mpp-color-text-secondary);
  box-shadow: 0 1px 0 #fff inset;
  font: 650 11px / 1.25 var(--mpp-font-body);
  cursor: pointer;
}

body.mpp-v5 :is(.mpp-result-dock, #mpp-result-dock) :where(button, .mpp-dock-action):first-child,
body.mpp-v5 :is(.mpp-result-dock, #mpp-result-dock) :where([data-action="ai"], [data-mpp-action="ai"]) {
  border-color: rgba(255, 255, 255, 0.44);
  background:
    linear-gradient(118deg, var(--mpp-color-tomato-glaze), transparent 44%),
    linear-gradient(180deg, #cf4934, var(--mpp-color-action));
  color: var(--mpp-color-action-text);
  box-shadow: 0 8px 18px rgba(176, 53, 40, 0.17), 0 1px 0 rgba(255, 197, 178, 0.34) inset;
}

body.mpp-v5 :is(.mpp-result-dock, #mpp-result-dock) :where(svg, .mpp-dock-icon) {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.mpp-v5 :is(.mpp-result-dock, #mpp-result-dock) :where(.mpp-dock-label, strong, span:last-child) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Neutral pearl content surfaces. These override the previous flat book-page layer. */
body.mpp-v5 :is(.bazi-card, .p0-result-panel, .info-card, .wenzhen-card, .pro-six-card, .dayun-card, .liunian-card, .ganzhi-rel-card, .pro-rel-section, .cross-card, .hg-info-card, .hg-rich-panel) {
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-card) !important;
  background: var(--mpp-surface-gradient) !important;
  box-shadow: var(--mpp-shadow-surface) !important;
  color: var(--mpp-color-text-secondary);
  font-family: var(--mpp-font-body) !important;
}

body.mpp-v5 :is(.bazi-card, .p0-result-panel) {
  padding: var(--mpp-space-4) !important;
  margin-bottom: var(--mpp-space-3) !important;
}

body.mpp-v5 .p0-panel-head {
  align-items: start;
  padding-bottom: 10px;
  border-color: rgba(161, 151, 143, 0.35);
}

body.mpp-v5 .p0-panel-head :is(h2, h3),
body.mpp-v5 .section-title h2 {
  color: var(--mpp-color-text) !important;
  font-family: var(--mpp-font-display) !important;
  font-size: var(--mpp-type-title-2) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.4;
}

body.mpp-v5 .section-title {
  gap: 9px;
  margin: var(--mpp-space-5) 2px var(--mpp-space-3) !important;
  padding: 0 0 9px !important;
  border-bottom: 0 !important;
}

body.mpp-v5 .section-title::after {
  height: 3px !important;
  border-radius: 3px;
  background: linear-gradient(90deg, #d1412d, #e37d42, #f1c794, #bad0d3, transparent 64%) !important;
  opacity: 0.72;
}

body.mpp-v5 .section-title .ord {
  color: var(--mpp-color-action-strong) !important;
  font-family: var(--mpp-font-data) !important;
  font-size: var(--mpp-type-micro) !important;
  font-weight: 700 !important;
}

body.mpp-v5 :is(.p0-kv, .summary-card, .formula-panel, .cross-card .cc-verdict) {
  border: 1px solid rgba(161, 151, 143, 0.34) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: rgba(255, 253, 249, 0.72) !important;
  box-shadow: 0 1px 0 #fff inset !important;
}

body.mpp-v5 .p0-kv .k,
body.mpp-v5 :is(.p0-panel-head .meta, .section-title .meta) {
  color: var(--mpp-color-text-tertiary) !important;
}

body.mpp-v5 .p0-kv .v {
  color: var(--mpp-color-text) !important;
}

body.mpp-v5 .info-hero {
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-card);
  background:
    radial-gradient(ellipse at 92% 2%, rgba(238, 126, 64, 0.29), transparent 37%),
    radial-gradient(ellipse at 8% 100%, rgba(170, 191, 199, 0.16), transparent 42%),
    linear-gradient(142deg, rgba(254, 251, 247, 0.94), rgba(232, 223, 214, 0.84));
  color: var(--mpp-color-text);
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .info-hero-title {
  color: var(--mpp-color-text);
  font-family: var(--mpp-font-display);
  letter-spacing: 0.08em;
}

body.mpp-v5 .info-hero-sub {
  color: var(--mpp-color-text-secondary);
}

body.mpp-v5 :is(.info-row, .info-row-pair, .cc-row) {
  border-color: rgba(161, 151, 143, 0.28) !important;
}

body.mpp-v5 :is(.info-row .lbl, .info-row-label, .cc-label) {
  color: var(--mpp-color-text-tertiary) !important;
  letter-spacing: 0 !important;
}

/* Basic and professional grids: warm neutral porcelain with a coral day focus. */
body.mpp-v5 :is(.pillars, .pillars-6, .ziwei-board) {
  overflow: clip;
  border: 1px solid rgba(117, 108, 101, 0.52) !important;
  border-radius: 10px !important;
  background: #f8f5f1 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
}

body.mpp-v5 :is(.pillar-label-col, .pillar-col) {
  border-color: rgba(117, 108, 101, 0.32);
  background: rgba(251, 249, 246, 0.96);
}

body.mpp-v5 .pillar-label-col {
  background: rgba(225, 219, 213, 0.91) !important;
}

body.mpp-v5 .p-row {
  border-color: rgba(117, 108, 101, 0.3);
  color: var(--mpp-color-text-secondary);
}

body.mpp-v5 .pillar-label-col .p-row {
  color: var(--mpp-color-text-tertiary);
  font-family: var(--mpp-font-body);
  text-transform: none;
}

body.mpp-v5 :is(.pillar-col.day, .pillar-col.col-current) {
  background:
    radial-gradient(circle at 87% 7%, rgba(229, 139, 83, 0.08), transparent 37%),
    linear-gradient(180deg, rgba(243, 225, 216, 0.82), rgba(250, 247, 243, 0.97)) !important;
  box-shadow: inset 1px 0 rgba(37, 33, 30, 0.24), inset -1px 0 rgba(37, 33, 30, 0.24);
}

body.mpp-v5 .pillar-col.day .head-row,
body.mpp-v5 .pillar-col.col-current .head-row {
  box-shadow: inset 0 3px var(--mpp-color-action);
}

body.mpp-v5 .term {
  border-bottom-color: rgba(209, 65, 45, 0.34);
}

body.mpp-v5 .term:is(:hover, .tapped) {
  color: var(--mpp-color-action-strong);
  border-bottom-color: var(--mpp-color-action);
}

body.mpp-v5 .c-wood { color: var(--mpp-color-wood-text) !important; }
body.mpp-v5 .c-fire { color: var(--mpp-color-fire-text) !important; }
body.mpp-v5 .c-earth { color: var(--mpp-color-earth-text) !important; }
body.mpp-v5 .c-metal { color: var(--mpp-color-metal-text) !important; }
body.mpp-v5 .c-water { color: var(--mpp-color-water-text) !important; }

body.mpp-v5 .ziwei-board {
  --zv-grid-line: rgba(117, 108, 101, 0.48);
}

body.mpp-v5 .ziwei-board > .palace {
  border-color: rgba(117, 108, 101, 0.46) !important;
  background: linear-gradient(145deg, #fcfaf7, #eae4de) !important;
  color: var(--mpp-color-text);
}

body.mpp-v5 .ziwei-board > .palace.center {
  background:
    radial-gradient(circle at 88% 4%, rgba(235, 132, 72, 0.08), transparent 43%),
    linear-gradient(145deg, #faf7f3, #e7dfd8) !important;
}

body.mpp-v5 .ziwei-board > .palace.is-related {
  background: rgba(170, 191, 199, 0.18) !important;
}

body.mpp-v5 .ziwei-board > .palace.is-selected {
  background:
    radial-gradient(circle at 87% 7%, rgba(229, 139, 83, 0.08), transparent 37%),
    linear-gradient(180deg, rgba(243, 225, 216, 0.84), rgba(250, 247, 243, 0.98)) !important;
  box-shadow: inset 0 0 0 2px var(--mpp-color-action) !important;
}

body.mpp-v5 :is(.ziwei-view-toolbar button, .zw-dc-cell, .zw-ly-cell, .zw-cand-cell) {
  min-height: var(--mpp-touch-min);
  border-color: rgba(161, 151, 143, 0.38) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: rgba(255, 253, 249, 0.76) !important;
  color: var(--mpp-color-text-secondary) !important;
}

body.mpp-v5 .cross-grid {
  gap: var(--mpp-space-3);
}

body.mpp-v5 .cross-card {
  position: relative;
  overflow: hidden;
}

body.mpp-v5 .cross-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(#d1412d, #e37d42, #d9c5a5, #b9d0d1);
}

/* --------------------------------------------------------------------------
   Records destination and legacy history sheet
   -------------------------------------------------------------------------- */

body.mpp-v5 .mpp-records-toolbar,
body.mpp-v5 .mpp-record-search {
  display: flex;
  align-items: center;
  gap: var(--mpp-space-2);
}

body.mpp-v5 .mpp-record-search {
  min-height: var(--mpp-touch-min);
  width: 100%;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.82), rgba(238, 229, 220, 0.68));
  color: var(--mpp-color-text-tertiary);
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .mpp-record-search input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--mpp-color-text);
  font-size: 16px;
}

body.mpp-v5 #mpp-records-list,
body.mpp-v5 .mpp-records-list {
  display: grid;
  gap: 10px;
  margin-top: var(--mpp-space-3);
}

body.mpp-v5 .mpp-record-card,
body.mpp-v5 .history-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 104px;
  margin: 0;
  padding: 13px 12px 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: 15px !important;
  background: var(--mpp-surface-gradient) !important;
  color: var(--mpp-color-text);
  box-shadow: var(--mpp-shadow-surface);
  cursor: pointer;
  transition:
    border-color var(--mpp-duration-fast) var(--mpp-ease),
    box-shadow var(--mpp-duration-fast) var(--mpp-ease),
    opacity var(--mpp-duration-fast) var(--mpp-ease);
}

body.mpp-v5 .mpp-record-card::after,
body.mpp-v5 .history-item::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d1412d, #e37d42, #f1c794, #bad0d3, transparent);
  opacity: 0.5;
  pointer-events: none;
}

body.mpp-v5 .mpp-record-card:is(:hover, :focus-within),
body.mpp-v5 .history-item:is(:hover, :focus-within) {
  border-color: rgba(209, 65, 45, 0.28) !important;
  box-shadow: var(--mpp-shadow-float);
}

body.mpp-v5 :is(.mpp-record-name, .history-item-title) {
  overflow: hidden;
  color: var(--mpp-color-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mpp-v5 :is(.mpp-record-meta, .history-item-meta) {
  margin-top: 5px;
  color: var(--mpp-color-text-secondary);
  font: 500 11px / 1.55 var(--mpp-font-data);
  letter-spacing: 0;
}

body.mpp-v5 .mpp-record-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

body.mpp-v5 .mpp-record-pillar {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--mpp-color-surface-muted);
  color: var(--mpp-color-text-secondary);
  font: 550 10px / 14px var(--mpp-font-data);
}

body.mpp-v5 :is(.mpp-record-menu, .history-item-del) {
  display: grid;
  place-items: center;
  min-width: var(--mpp-touch-min);
  min-height: var(--mpp-touch-min);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--mpp-radius-control);
  background: rgba(255, 253, 249, 0.62);
  color: var(--mpp-color-text-tertiary);
}

body.mpp-v5 .history-modal-overlay {
  align-items: end;
  padding: 0;
  background: rgba(18, 17, 15, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.mpp-v5 .history-modal {
  width: min(100%, 560px);
  max-width: 560px;
  max-height: min(88vh, 760px);
  padding-bottom: var(--mpp-safe-bottom);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-sheet) var(--mpp-radius-sheet) 0 0;
  background: var(--mpp-canvas-gradient);
  box-shadow: 0 -6px 24px rgba(18, 17, 15, 0.14);
  animation: mpp-sheet-in var(--mpp-duration-sheet) var(--mpp-ease) both;
}

body.mpp-v5 .history-head {
  min-height: 58px;
  padding: 9px 12px 9px 16px;
  border-color: rgba(161, 151, 143, 0.34);
  background: rgba(252, 249, 245, 0.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.mpp-v5 .history-head .title {
  color: var(--mpp-color-text);
  font: 700 var(--mpp-type-headline) / 1.4 var(--mpp-font-display);
  letter-spacing: 0;
}

body.mpp-v5 .history-head :is(.btn-clear, .btn-close) {
  min-width: var(--mpp-touch-min);
  min-height: var(--mpp-touch-min);
  padding: 0 10px;
  border: 1px solid rgba(161, 151, 143, 0.4);
  border-radius: var(--mpp-radius-control);
  background: rgba(255, 253, 249, 0.62);
  color: var(--mpp-color-text-secondary);
  font-size: var(--mpp-type-caption);
  letter-spacing: 0;
}

body.mpp-v5 .history-body {
  display: grid;
  gap: 9px;
  padding: 10px 12px 16px;
}

/* --------------------------------------------------------------------------
   Reading and profile destinations
   -------------------------------------------------------------------------- */

body.mpp-v5 .mpp-page[data-mpp-page="reading"] .hr-v2-hub {
  width: 100%;
  max-width: 960px;
  margin: 0 auto var(--mpp-space-6);
  padding: 0;
  color: var(--mpp-color-text);
}

body.mpp-v5 .hr-v2-hub-head {
  align-items: start;
}

body.mpp-v5 .hr-v2-eyebrow {
  color: var(--mpp-color-action-strong) !important;
}

body.mpp-v5 .hr-v2-hub h2 {
  color: var(--mpp-color-text);
  font-family: var(--mpp-font-display);
  font-size: var(--mpp-type-title-1);
}

body.mpp-v5 .hr-v2-hub-note,
body.mpp-v5 .hr-v2-policy {
  color: var(--mpp-color-text-secondary);
}

body.mpp-v5 .hr-v2-grid {
  gap: var(--mpp-space-3);
}

body.mpp-v5 .hr-v2-entry {
  min-height: 164px;
  padding: var(--mpp-space-4);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-card);
  background: var(--mpp-surface-gradient) !important;
  color: var(--mpp-color-text) !important;
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .hr-v2-entry::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d1412d, #e37d42, #f1c794, #bad0d3, transparent);
  opacity: 0.54;
}

body.mpp-v5 .hr-v2-entry.free {
  border-color: rgba(255, 255, 255, 0.48) !important;
  background:
    linear-gradient(118deg, var(--mpp-color-tomato-glaze), transparent 44%),
    linear-gradient(180deg, #cf4934, var(--mpp-color-action)) !important;
  color: var(--mpp-color-action-text) !important;
  box-shadow: var(--mpp-shadow-action);
}

body.mpp-v5 .hr-v2-entry.life {
  border-color: rgba(209, 65, 45, 0.26) !important;
  background:
    radial-gradient(ellipse at 92% 2%, rgba(238, 126, 64, 0.16), transparent 38%),
    var(--mpp-surface-gradient) !important;
}

body.mpp-v5 .hr-v2-entry-kicker,
body.mpp-v5 .hr-v2-arrow,
body.mpp-v5 .hr-v2-price {
  color: var(--mpp-color-action-strong);
}

body.mpp-v5 .hr-v2-entry-detail {
  color: var(--mpp-color-text-secondary);
}

body.mpp-v5 .hr-v2-entry.free :is(.hr-v2-entry-kicker, .hr-v2-entry-detail, .hr-v2-price, .hr-v2-arrow) {
  color: var(--mpp-color-action-text);
}

body.mpp-v5 .mpp-profile-hero,
body.mpp-v5 .mpp-account-summary {
  position: relative;
  padding: var(--mpp-space-5);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-feature);
  background:
    radial-gradient(ellipse at 92% 2%, rgba(238, 126, 64, 0.25), transparent 37%),
    radial-gradient(ellipse at 8% 100%, rgba(170, 191, 199, 0.15), transparent 42%),
    var(--mpp-surface-gradient);
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .mpp-account-list {
  display: grid;
  gap: 1px;
  margin-top: var(--mpp-space-3);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-card);
  background: rgba(161, 151, 143, 0.24);
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .mpp-account-action {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 13px;
  border: 0;
  background: rgba(255, 253, 249, 0.9);
  color: var(--mpp-color-text);
  text-align: left;
  cursor: pointer;
}

body.mpp-v5 .mpp-account-action::after {
  content: "›";
  margin-left: auto;
  color: var(--mpp-color-action);
  font-size: 22px;
  font-weight: 300;
}

/* Concrete shell controls created by web-ios-parity-v5.js. */
body.mpp-v5 .mpp-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.mpp-v5 :is(.mpp-page-summary, .mpp-chart-tools-heading > p) {
  margin: 5px 0 0;
  color: var(--mpp-color-text-secondary);
  font-size: var(--mpp-type-caption);
  line-height: 1.65;
}

body.mpp-v5 :is(.mpp-readings-header, .mpp-account-header) {
  display: block;
}

body.mpp-v5 .mpp-records-header {
  display: flex;
}

body.mpp-v5 .mpp-icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 var(--mpp-touch-min);
  width: var(--mpp-touch-min);
  height: var(--mpp-touch-min);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-control);
  background: var(--mpp-surface-gradient);
  color: var(--mpp-color-action-strong);
  box-shadow: var(--mpp-shadow-surface);
  font-size: 20px;
  cursor: pointer;
}

body.mpp-v5 .mpp-search-field {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--mpp-touch-min);
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 253, 249, 0.82), rgba(238, 229, 220, 0.68));
  color: var(--mpp-color-text-tertiary);
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .mpp-search-field svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.mpp-v5 .mpp-search-field input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--mpp-color-text);
  font-size: 16px;
}

body.mpp-v5 .mpp-text-danger {
  min-width: var(--mpp-touch-min);
  min-height: var(--mpp-touch-min);
  padding: 0 10px;
  border: 1px solid rgba(163, 58, 50, 0.24);
  border-radius: var(--mpp-radius-control);
  background: rgba(255, 253, 249, 0.62);
  color: var(--mpp-color-danger);
  font-size: var(--mpp-type-caption);
  font-weight: 650;
  cursor: pointer;
}

body.mpp-v5 .mpp-chart-tools {
  width: min(calc(100% - 24px), 560px);
  margin: 4px auto 12px;
  padding: var(--mpp-space-4);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-card);
  background: var(--mpp-surface-gradient);
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .mpp-chart-tools-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body.mpp-v5 .mpp-chart-tools-heading h2 {
  margin: 0;
  color: var(--mpp-color-text);
  font: 700 var(--mpp-type-headline) / 1.35 var(--mpp-font-display);
}

body.mpp-v5 .mpp-chart-tools-heading > p {
  max-width: 15em;
  margin: 0;
  text-align: right;
}

body.mpp-v5 .mpp-chart-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.mpp-v5 .mpp-chart-tool {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 68px;
  padding: 10px;
  border: 1px solid rgba(161, 151, 143, 0.34);
  border-radius: var(--mpp-radius-control);
  background: rgba(255, 253, 249, 0.72);
  color: var(--mpp-color-text);
  text-align: left;
  cursor: pointer;
}

body.mpp-v5 .mpp-chart-tool-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--mpp-color-action-soft);
  color: var(--mpp-color-action-strong);
  font-weight: 700;
}

body.mpp-v5 .mpp-chart-tool strong,
body.mpp-v5 .mpp-chart-tool small {
  display: block;
}

body.mpp-v5 .mpp-chart-tool strong {
  font-size: var(--mpp-type-label);
}

body.mpp-v5 .mpp-chart-tool small {
  margin-top: 2px;
  color: var(--mpp-color-text-tertiary);
  font-size: 10px;
  line-height: 1.45;
}

body.mpp-v5 .mpp-platform-note {
  margin: 9px 0 0;
  color: var(--mpp-color-text-tertiary);
  font-size: 10px;
  text-align: center;
}

body.mpp-v5 .mpp-record-open {
  display: block;
  min-width: 0;
  min-height: var(--mpp-touch-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body.mpp-v5 .mpp-record-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

body.mpp-v5 .mpp-record-title {
  overflow: hidden;
  color: var(--mpp-color-text);
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mpp-v5 .mpp-record-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--mpp-color-action-soft);
  color: var(--mpp-color-action-strong);
  font-size: 10px;
  font-weight: 650;
}

body.mpp-v5 .mpp-record-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

body.mpp-v5 .mpp-record-actions button {
  min-height: var(--mpp-touch-min);
  padding: 4px 7px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.72);
  color: var(--mpp-color-text-secondary);
  font-size: 11px;
  font-weight: 550;
  cursor: pointer;
}

body.mpp-v5 .mpp-record-actions button::before {
  display: none;
}

body.mpp-v5 .mpp-record-card {
  grid-template-columns: minmax(0, 1fr);
}

body.mpp-v5 .mpp-record-actions .mpp-text-danger {
  color: var(--mpp-color-danger);
}

body.mpp-v5 :is(.mpp-empty-state, .mpp-loading-state, .mpp-reading-placeholder) {
  display: grid;
  place-items: center;
  min-height: 184px;
  padding: var(--mpp-space-6);
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-card);
  background: var(--mpp-surface-gradient);
  color: var(--mpp-color-text-secondary);
  box-shadow: var(--mpp-shadow-surface);
  text-align: center;
}

body.mpp-v5 .mpp-empty-state > * {
  margin: 0;
}

body.mpp-v5 .mpp-empty-state h2 {
  margin-top: 8px;
  color: var(--mpp-color-text);
  font: 700 var(--mpp-type-headline) / 1.4 var(--mpp-font-display);
}

body.mpp-v5 .mpp-empty-state p {
  max-width: 30em;
  margin-top: 5px;
  font-size: var(--mpp-type-caption);
  line-height: 1.65;
}

body.mpp-v5 .mpp-empty-symbol {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: linear-gradient(145deg, #fffdf9, #efd9ca);
  color: var(--mpp-color-action-strong);
  box-shadow: var(--mpp-shadow-surface);
  font-size: 22px;
}

body.mpp-v5 :is(.mpp-primary-action, .mpp-secondary-action, .mpp-danger-action) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--mpp-touch-min);
  min-height: var(--mpp-control-height);
  padding: 10px 16px;
  border-radius: var(--mpp-radius-control);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

body.mpp-v5 .mpp-primary-action {
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background:
    linear-gradient(118deg, var(--mpp-color-tomato-glaze), transparent 42%),
    linear-gradient(180deg, #cf4934, var(--mpp-color-action));
  color: var(--mpp-color-action-text);
  box-shadow: var(--mpp-shadow-action);
}

body.mpp-v5 .mpp-secondary-action {
  border: 1px solid rgba(255, 255, 255, 0.84);
  background: var(--mpp-surface-gradient);
  color: var(--mpp-color-text);
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .mpp-danger-action {
  border: 1px solid rgba(163, 58, 50, 0.28);
  background: rgba(163, 58, 50, 0.09);
  color: var(--mpp-color-danger);
}

body.mpp-v5 .mpp-reading-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

body.mpp-v5 .mpp-reading-hub-mount {
  width: 100%;
  min-width: 0;
}

body.mpp-v5 .mpp-reading-placeholder[hidden] {
  display: none !important;
}

body.mpp-v5 .mpp-account-content {
  display: grid;
  gap: 12px;
}

body.mpp-v5 .mpp-account-signed-out {
  background:
    radial-gradient(ellipse at 92% 2%, rgba(238, 126, 64, 0.16), transparent 38%),
    var(--mpp-surface-gradient);
}

body.mpp-v5 .mpp-account-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: var(--mpp-space-4);
}

body.mpp-v5 .mpp-account-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background:
    linear-gradient(118deg, var(--mpp-color-tomato-glaze), transparent 44%),
    linear-gradient(180deg, #cf4934, var(--mpp-color-action));
  color: var(--mpp-color-action-text);
  box-shadow: var(--mpp-shadow-action);
  font-family: var(--mpp-font-display);
  font-size: 21px;
  font-weight: 700;
}

body.mpp-v5 .mpp-account-identity {
  min-width: 0;
}

body.mpp-v5 .mpp-account-identity h2 {
  overflow: hidden;
  margin: 0;
  color: var(--mpp-color-text);
  font: 700 var(--mpp-type-headline) / 1.4 var(--mpp-font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mpp-v5 .mpp-account-identity p {
  overflow: hidden;
  margin: 3px 0 0;
  color: var(--mpp-color-text-secondary);
  font-size: var(--mpp-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mpp-v5 .mpp-account-quota {
  color: var(--mpp-color-action-strong) !important;
  font-weight: 650;
}

body.mpp-v5 .mpp-account-status {
  display: inline-flex;
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: var(--mpp-radius-full);
  background: var(--mpp-color-action-soft);
  color: var(--mpp-color-action-strong);
  font-size: 10px;
  font-weight: 650;
}

body.mpp-v5 .mpp-account-menu {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-card);
  background: rgba(161, 151, 143, 0.22);
  box-shadow: var(--mpp-shadow-surface);
}

body.mpp-v5 .mpp-account-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 13px;
  border: 0;
  background: rgba(255, 253, 249, 0.9);
  color: var(--mpp-color-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

body.mpp-v5 .mpp-account-menu-item > span:first-child {
  min-width: 0;
}

body.mpp-v5 .mpp-account-menu-item strong,
body.mpp-v5 .mpp-account-menu-item small {
  display: block;
}

body.mpp-v5 .mpp-account-menu-item strong {
  font-size: var(--mpp-type-label);
}

body.mpp-v5 .mpp-account-menu-item small {
  margin-top: 3px;
  color: var(--mpp-color-text-tertiary);
  font-size: 10px;
  line-height: 1.45;
}

body.mpp-v5 .mpp-account-menu-item > span:last-child {
  margin-left: auto;
  color: var(--mpp-color-action);
  font-size: 22px;
  font-weight: 300;
}

body.mpp-v5.mpp-dialog-open {
  overflow: hidden;
}

body.mpp-v5 .mpp-dialog-overlay {
  position: fixed;
  z-index: 12040;
  inset: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 0;
  background: rgba(18, 17, 15, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: mpp-page-settle var(--mpp-duration-fast) var(--mpp-ease) both;
}

body.mpp-v5 .mpp-dialog {
  width: min(100%, 480px);
  max-height: min(90vh, 720px);
  padding: 20px 16px calc(20px + var(--mpp-safe-bottom));
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-sheet) var(--mpp-radius-sheet) 0 0;
  background: var(--mpp-canvas-gradient);
  color: var(--mpp-color-text);
  box-shadow: 0 -6px 24px rgba(18, 17, 15, 0.14);
  animation: mpp-sheet-in var(--mpp-duration-sheet) var(--mpp-ease) both;
}

body.mpp-v5 .mpp-dialog-form {
  display: block;
  margin: 0;
}

body.mpp-v5 .mpp-login-gate {
  border-color: rgba(209, 65, 45, 0.18);
}

body.mpp-v5 .mpp-dialog h2 {
  margin: 0 0 14px;
  color: var(--mpp-color-text);
  font: 700 var(--mpp-type-title-2) / 1.4 var(--mpp-font-display);
}

body.mpp-v5 .mpp-dialog label {
  display: block;
  margin-bottom: 6px;
  color: var(--mpp-color-text-secondary);
  font-size: var(--mpp-type-label);
  font-weight: 650;
}

body.mpp-v5 .mpp-dialog input {
  width: 100%;
  min-height: var(--mpp-control-height);
  padding: 11px 13px;
  border: 1px solid rgba(161, 151, 143, 0.52);
  border-radius: var(--mpp-radius-control);
  background: rgba(255, 253, 249, 0.86);
  color: var(--mpp-color-text);
  font-size: 16px;
}

body.mpp-v5 :is(.mpp-dialog-help, .mpp-alert-dialog > p:not(.mpp-eyebrow):not(.mpp-dialog-error)) {
  margin: 8px 0 0;
  color: var(--mpp-color-text-secondary);
  font-size: var(--mpp-type-caption);
  line-height: 1.65;
}

body.mpp-v5 .mpp-dialog-error {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--mpp-color-danger);
  font-size: var(--mpp-type-caption);
}

body.mpp-v5 .mpp-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

/* FAQ belongs to the chart destination; the profile destination owns footer links. */
body.mpp-v5:not([data-mpp-destination="chart"]) .p0-faq {
  display: none !important;
}

body.mpp-v5 .mpp-page[data-mpp-page="profile"] #site-footer {
  position: relative;
  width: 100%;
  max-width: 720px !important;
  margin: var(--mpp-space-4) auto 0 !important;
  padding: var(--mpp-space-5) var(--mpp-space-4) var(--mpp-space-6) !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-card);
  background: var(--mpp-surface-gradient);
  color: var(--mpp-color-text-secondary);
  box-shadow: var(--mpp-shadow-surface);
  font-family: var(--mpp-font-body) !important;
  text-align: center;
}

body.mpp-v5 .mpp-page[data-mpp-page="profile"] #site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d1412d, #e37d42, #f1c794, #bad0d3, transparent);
  opacity: 0.48;
}

body.mpp-v5 .mpp-page[data-mpp-page="profile"] #site-footer-actions {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

body.mpp-v5 .mpp-page[data-mpp-page="profile"] #site-footer-actions:empty {
  display: none !important;
  margin: 0 !important;
}

body.mpp-v5 .mpp-page[data-mpp-page="profile"] #site-footer-actions .v7u-fab {
  display: none !important;
}

body.mpp-v5 .mpp-page[data-mpp-page="profile"] #site-footer > div:not(#site-footer-actions) {
  color: var(--mpp-color-text-tertiary) !important;
  font: 400 11px / 1.8 var(--mpp-font-body) !important;
  letter-spacing: 0.01em !important;
}

body.mpp-v5 .mpp-page[data-mpp-page="profile"] #site-footer a {
  display: inline-flex;
  min-height: var(--mpp-touch-min);
  padding: 0 3px;
  align-items: center;
  color: var(--mpp-color-action-strong) !important;
  text-decoration-color: rgba(209, 65, 45, 0.34) !important;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Commerce, reading, login and account overlays injected after page load
   -------------------------------------------------------------------------- */

body.mpp-v5 :is(.hr-v2-overlay, .v6-pw-overlay, .v6-rd-overlay, .v7u-login-overlay, .v7u-drawer-overlay, .v7u-rd-detail-overlay, .v7u-custom-overlay, .v-vip-overlay, .ai-dialog-overlay, .hg-modal-bg) {
  background: rgba(18, 17, 15, 0.4) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

body.mpp-v5 :is(.hr-v2-modal, .v6-pw-modal, .v6-rd-modal, .v7u-login-dialog, .v7u-rd-detail-modal, .v7u-custom-modal, .v-vip-dialog, .ai-dialog, .hg-modal) {
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-sheet) !important;
  background: var(--mpp-canvas-gradient) !important;
  color: var(--mpp-color-text) !important;
  box-shadow: var(--mpp-shadow-float) !important;
  font-family: var(--mpp-font-body) !important;
}

body.mpp-v5 :is(.hr-v2-close, .v6-close, .v7u-login-close, .v7u-rd-detail-close, .v7u-custom-close, .ai-close) {
  display: grid !important;
  place-items: center;
  min-width: var(--mpp-touch-min) !important;
  min-height: var(--mpp-touch-min) !important;
  border: 0 !important;
  border-radius: var(--mpp-radius-control) !important;
  background: transparent !important;
  color: var(--mpp-color-text-secondary) !important;
}

body.mpp-v5 :is(.hr-v2-modal h3, .v6-pw-title, .v6-rd-title, .v7u-login-dialog h3, .v7u-rd-detail-title, .v7u-custom-title, .v-vip-dialog .vd-title, .ai-dialog-header .title, .hg-modal h3) {
  color: var(--mpp-color-text) !important;
  font-family: var(--mpp-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body.mpp-v5 :is(.hr-v2-sub, .v6-pw-sub, .v6-rd-sub, .v7u-login-dialog .sub, .v7u-custom-desc, .v-vip-dialog .vd-sub) {
  color: var(--mpp-color-text-secondary) !important;
}

body.mpp-v5 :is(.hr-v2-choice, .hr-v2-preview, .hr-v2-invite, .hr-v2-result-section, .v6-pw-card, .v6-confirm-card, .v6-pay-step, .v6-pay-qr, .v6-rd-kind, .v6-rd-progress, .v6-rd-result, .v7u-rd-detail-body, .v7u-custom-entry) {
  border-color: rgba(161, 151, 143, 0.42) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: rgba(255, 253, 249, 0.82) !important;
  color: var(--mpp-color-text) !important;
  box-shadow: 0 1px 0 #fff inset;
}

body.mpp-v5 .v6-pw-card:is(.hot, .best) {
  border-color: rgba(209, 65, 45, 0.54) !important;
  background:
    radial-gradient(circle at 91% 4%, rgba(229, 139, 83, 0.08), transparent 37%),
    rgba(255, 253, 249, 0.9) !important;
}

body.mpp-v5 .v6-pw-card:is(.hot, .best)::before {
  background: var(--mpp-color-action) !important;
  color: var(--mpp-color-action-text) !important;
}

body.mpp-v5 :is(.hr-v2-choice-price, .v6-pw-card .r-price, .v6-pw-card .r-promo-tag, .v6-rd-result strong, .hr-v2-result-section h4, .hr-v2-result-section h5) {
  color: var(--mpp-color-action-strong) !important;
}

body.mpp-v5 .v6-pay-step .num {
  background: var(--mpp-color-action) !important;
  color: var(--mpp-color-action-text) !important;
}

body.mpp-v5 .v6-quota-badge,
body.mpp-v5 .v7u-fab,
body.mpp-v5 .v-vip-card,
body.mpp-v5 .v-vip-badge-active {
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-full) !important;
  background: var(--mpp-surface-gradient) !important;
  color: var(--mpp-color-action-strong) !important;
  box-shadow: var(--mpp-shadow-surface) !important;
}

body.mpp-v5 .v-vip-card {
  border-radius: var(--mpp-radius-card) !important;
}

body.mpp-v5 .v-vip-card :is(.vv-title, .vv-price) {
  color: var(--mpp-color-text) !important;
}

body.mpp-v5 .v-vip-card :is(.vv-desc, .vv-hint) {
  color: var(--mpp-color-text-secondary) !important;
}

body.mpp-v5 .v7u-fab .avatar,
body.mpp-v5 .v7u-user-avatar-big {
  background:
    linear-gradient(118deg, var(--mpp-color-tomato-glaze), transparent 44%),
    linear-gradient(180deg, #cf4934, var(--mpp-color-action)) !important;
  color: var(--mpp-color-action-text) !important;
}

body.mpp-v5 .v7u-fab .vip-dot {
  background: var(--mpp-color-action) !important;
  border-color: var(--mpp-color-surface) !important;
}

body.mpp-v5 .v7u-drawer {
  width: min(100%, 420px) !important;
  max-width: 100vw !important;
  padding-bottom: var(--mpp-safe-bottom) !important;
  background: var(--mpp-canvas-gradient) !important;
  color: var(--mpp-color-text) !important;
  box-shadow: -10px 0 36px rgba(63, 48, 39, 0.18) !important;
  animation: mpp-drawer-in var(--mpp-duration-standard) var(--mpp-ease) both !important;
}

body.mpp-v5 .v7u-drawer-head {
  min-height: 176px;
  padding: calc(var(--mpp-safe-top) + 54px) 22px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(ellipse at 92% 2%, rgba(238, 126, 64, 0.3), transparent 38%),
    radial-gradient(ellipse at 8% 100%, rgba(170, 191, 199, 0.16), transparent 42%),
    linear-gradient(142deg, rgba(254, 251, 247, 0.94), rgba(232, 223, 214, 0.86)) !important;
  color: var(--mpp-color-text) !important;
}

body.mpp-v5 .v7u-drawer-head :is(.home, .close) {
  top: calc(var(--mpp-safe-top) + 10px) !important;
  display: grid;
  place-items: center;
  min-width: var(--mpp-touch-min);
  min-height: var(--mpp-touch-min);
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: rgba(255, 253, 249, 0.66) !important;
  color: var(--mpp-color-action-strong) !important;
  box-shadow: 0 1px 0 #fff inset;
}

body.mpp-v5 .v7u-drawer-head .close {
  width: var(--mpp-touch-min) !important;
  height: var(--mpp-touch-min) !important;
}

body.mpp-v5 .v7u-user-role {
  background: var(--mpp-color-action-soft) !important;
  color: var(--mpp-color-action-strong) !important;
}

body.mpp-v5 .v7u-user-progress,
body.mpp-v5 .v7u-list-meta,
body.mpp-v5 .v7u-stat-label,
body.mpp-v5 .v7u-section-title {
  color: var(--mpp-color-text-tertiary) !important;
}

body.mpp-v5 .v7u-progress-bar {
  background: rgba(209, 65, 45, 0.12) !important;
}

body.mpp-v5 .v7u-progress-bar > div {
  background: linear-gradient(90deg, var(--mpp-color-action), var(--mpp-color-amber-soft), var(--mpp-color-cool-light)) !important;
}

body.mpp-v5 .v7u-section {
  border-color: rgba(161, 151, 143, 0.28) !important;
}

body.mpp-v5 .v7u-stat-card {
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: rgba(255, 253, 249, 0.72) !important;
  box-shadow: 0 1px 0 #fff inset;
}

body.mpp-v5 .v7u-stat-num,
body.mpp-v5 .v7u-list-title {
  color: var(--mpp-color-text) !important;
}

body.mpp-v5 .v7u-list-item {
  min-height: var(--mpp-touch-min);
  border-color: rgba(161, 151, 143, 0.26) !important;
}

body.mpp-v5 .v7u-list-arrow,
body.mpp-v5 .v7u-custom-entry-arrow {
  color: var(--mpp-color-action) !important;
}

body.mpp-v5 .v-vip-dialog input {
  min-height: var(--mpp-control-height);
  border: 1px solid rgba(161, 151, 143, 0.5) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: rgba(255, 253, 249, 0.82) !important;
  color: var(--mpp-color-text) !important;
}

body.mpp-v5 .v-vip-dialog button {
  min-height: var(--mpp-touch-min);
  border: 1px solid rgba(161, 151, 143, 0.44) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: rgba(255, 253, 249, 0.76) !important;
  color: var(--mpp-color-text) !important;
}

body.mpp-v5 .v-vip-dialog button.primary {
  border-color: rgba(255, 255, 255, 0.48) !important;
  background:
    linear-gradient(118deg, var(--mpp-color-tomato-glaze), transparent 42%),
    linear-gradient(180deg, #cf4934, var(--mpp-color-action)) !important;
  color: var(--mpp-color-action-text) !important;
}

body.mpp-v5 .ai-textarea {
  border: 1px solid rgba(161, 151, 143, 0.42);
  border-radius: var(--mpp-radius-control);
  background: rgba(255, 253, 249, 0.76);
  color: var(--mpp-color-text);
}

body.mpp-v5 #tooltip {
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: var(--mpp-radius-control) !important;
  background: var(--mpp-surface-gradient) !important;
  color: var(--mpp-color-text) !important;
  box-shadow: var(--mpp-shadow-float) !important;
}

body.mpp-v5 #tooltip .tip-name,
body.mpp-v5 #tooltip .tip-title {
  color: var(--mpp-color-action-strong);
}

body.mpp-v5 .status-bar {
  z-index: 13050;
  right: max(12px, var(--mpp-safe-right));
  bottom: calc(var(--mpp-bottom-nav-height) + var(--mpp-safe-bottom) + 84px);
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: var(--mpp-radius-control);
  background: rgba(252, 249, 245, 0.94);
  color: var(--mpp-color-action-strong);
  box-shadow: var(--mpp-shadow-float);
}

/* --------------------------------------------------------------------------
   Responsive behavior: 402 x 874 primary, 320–430, 768 and 1024+
   -------------------------------------------------------------------------- */

@media (max-width: 430px) {
  body.mpp-v5 {
    --mpp-page-gutter: 14px;
  }

  body.mpp-v5 #bx-old-header {
    width: 100%;
  }

  body.mpp-v5 #bx-form-panel {
    width: calc(100% - 24px);
    margin-top: 2px;
  }

  body.mpp-v5 .main {
    width: 100%;
  }

  body.mpp-v5 .p0-grid {
    grid-template-columns: 1fr;
  }

  body.mpp-v5 .history-modal {
    width: 100%;
  }

  body.mpp-v5 :is(.hr-v2-overlay, .v6-pw-overlay, .v6-rd-overlay, .v7u-login-overlay, .v7u-rd-detail-overlay, .v7u-custom-overlay, .v-vip-overlay, .ai-dialog-overlay) {
    align-items: end !important;
    padding: 0 !important;
  }

  body.mpp-v5 :is(.hr-v2-modal, .v6-pw-modal, .v6-rd-modal, .v7u-login-dialog, .v7u-rd-detail-modal, .v7u-custom-modal, .v-vip-dialog, .ai-dialog) {
    width: 100% !important;
    max-width: none !important;
    max-height: min(90vh, 800px) !important;
    margin: 0 !important;
    padding: 20px 16px calc(20px + var(--mpp-safe-bottom)) !important;
    border-radius: var(--mpp-radius-sheet) var(--mpp-radius-sheet) 0 0 !important;
    animation: mpp-sheet-in var(--mpp-duration-sheet) var(--mpp-ease) both;
  }
}

@media (max-width: 359px) {
  body.mpp-v5 {
    --mpp-page-gutter: 12px;
    --mpp-type-display: 1.65rem;
  }

  body.mpp-v5 #bx-form-panel {
    width: calc(100% - 16px);
    padding-inline: 12px;
  }

  body.mpp-v5 #bx-form-panel :is(.form-mode-switch-link, .me-mode-current) {
    padding-inline: 4px;
    font-size: 12px;
  }

  body.mpp-v5 .mpp-bottom-nav,
  body.mpp-v5 #mpp-bottom-nav,
  body.mpp-v5 .mpp-result-dock,
  body.mpp-v5 #mpp-result-dock {
    right: max(6px, var(--mpp-safe-right));
    left: max(6px, var(--mpp-safe-left));
    width: calc(100% - 12px - var(--mpp-safe-left) - var(--mpp-safe-right));
  }

  body.mpp-v5 .mpp-nav-item {
    padding-inline: 1px;
    font-size: 9px;
  }

  body.mpp-v5 :is(.mpp-result-dock, #mpp-result-dock) :where(button, .mpp-dock-action) {
    grid-template-columns: 17px minmax(0, auto);
    gap: 3px;
    padding-inline: 4px;
    font-size: 10px;
  }

  body.mpp-v5 .pillars {
    grid-template-columns: 38px repeat(4, minmax(0, 1fr));
  }

  body.mpp-v5 .pillars-6 {
    grid-template-columns: 31px repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 431px) and (max-width: 767px) {
  body.mpp-v5 #bx-form-panel {
    width: min(calc(100% - 32px), 560px);
  }
}

@media (min-width: 768px) {
  body.mpp-v5 {
    --mpp-page-gutter: 24px;
  }

  body.mpp-v5 .mpp-page[data-mpp-page="records"],
  body.mpp-v5 .mpp-page[data-mpp-page="reading"],
  body.mpp-v5 .mpp-page[data-mpp-page="profile"] {
    padding-top: calc(var(--mpp-safe-top) + 12px);
  }

  body.mpp-v5 .mpp-page-header {
    padding-top: var(--mpp-space-6);
  }

  body.mpp-v5 #bx-form-panel {
    margin-top: var(--mpp-space-3);
    padding: var(--mpp-space-6);
  }

  body.mpp-v5 .main {
    padding-inline: 24px;
  }

  body.mpp-v5 .tabs-bar {
    width: 100%;
    margin-inline: 0;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: var(--mpp-radius-field) !important;
  }

  body.mpp-v5 .tab-btn {
    flex: 1 1 0;
  }

  body.mpp-v5 .history-modal-overlay {
    align-items: center;
    padding: 24px;
  }

  body.mpp-v5 .history-modal {
    border-radius: var(--mpp-radius-sheet);
    animation: mpp-modal-in var(--mpp-duration-standard) var(--mpp-ease) both;
  }

  body.mpp-v5 .mpp-records-list,
  body.mpp-v5 #mpp-records-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body.mpp-v5 {
    --mpp-page-gutter: 32px;
  }

  body.mpp-v5 .mpp-shell,
  body.mpp-v5 #mpp-app-shell {
    width: min(100%, 1180px);
    margin-inline: auto;
  }

  body.mpp-v5 .mpp-page[data-mpp-page="chart"] {
    width: min(100%, 1040px);
  }

  body.mpp-v5 .main {
    width: min(100%, 1040px);
    padding-inline: 32px;
  }

  body.mpp-v5 .tab-panel.active {
    max-width: 960px;
    margin-inline: auto;
  }

  body.mpp-v5 .mpp-bottom-nav,
  body.mpp-v5 #mpp-bottom-nav {
    width: 600px;
  }

  body.mpp-v5 .mpp-result-dock,
  body.mpp-v5 #mpp-result-dock {
    width: 600px;
  }

  body.mpp-v5 .mpp-records-list,
  body.mpp-v5 #mpp-records-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.mpp-v5 .hr-v2-entry {
    border-radius: var(--mpp-radius-feature);
  }
}

/* Pointer-only feedback. Touch feedback remains the 80 ms press state. */
@media (hover: hover) and (pointer: fine) {
  body.mpp-v5 :is(.mpp-nav-item, .mpp-account-action, .mpp-record-card, .history-item, .hr-v2-entry, .hr-v2-choice, .v6-pw-card, .v6-rd-kind):hover {
    border-color: rgba(209, 65, 45, 0.26);
    filter: brightness(1.012);
  }

  body.mpp-v5 :is(.btn-compute-v7, .btn-primary, .btn-accent, .p0-btn-primary, .fp-entry-btn, .hr-v2-primary, .v7u-custom-submit):hover {
    filter: brightness(1.035);
    transform: translateY(-1px);
  }
}

/* Motion contract */
@keyframes mpp-page-settle {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

@keyframes mpp-content-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mpp-dock-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mpp-sheet-in {
  from { opacity: 0.6; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mpp-modal-in {
  from { opacity: 0.6; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mpp-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.mpp-v5 *,
  body.mpp-v5 *::before,
  body.mpp-v5 *::after {
    scroll-behavior: auto !important;
    animation-duration: 120ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    transition-property: opacity, color, background-color, border-color !important;
  }

  body.mpp-v5 :is(.mpp-page, .tab-panel.active, .mpp-result-dock, #mpp-result-dock, .history-modal, .hr-v2-modal, .v6-pw-modal, .v6-rd-modal, .v7u-login-dialog, .v7u-rd-detail-modal, .v7u-custom-modal, .v-vip-dialog, .v7u-drawer) {
    transform: none !important;
  }

  body.mpp-v5 :is(.btn-compute-v7, .btn-primary, .btn-accent, .p0-btn-primary, .fp-entry-btn, .hr-v2-primary, .v7u-custom-submit):active {
    transform: none !important;
  }

  body.mpp-v5 .v6-rd-progress .spinner {
    animation: none !important;
    border-top-color: currentColor !important;
  }
}

@media print {
  body.mpp-v5 {
    background: #fff !important;
    color: #000 !important;
  }

  body.mpp-v5 :is(.mpp-bottom-nav, #mpp-bottom-nav, .mpp-result-dock, #mpp-result-dock) {
    display: none !important;
  }

  body.mpp-v5 :is(.mpp-shell, #mpp-app-shell, .main) {
    padding-bottom: 0 !important;
  }

  body.mpp-v5 :is(.bazi-card, .p0-result-panel, .pillars, .pillars-6, .ziwei-board, .ziwei-board > .palace, .cross-card) {
    background: #fff !important;
    box-shadow: none !important;
  }
}