.pay-modal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 1rem; }
    .pay-modal.is-open { display: flex; }
    .pay-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 18, 16, 0.55); backdrop-filter: blur(4px); }
    .pay-modal__panel {
      position: relative; max-width: 420px; width: 100%; border-radius: 14px;
      background: linear-gradient(165deg, #fffef8 0%, #f5f0e6 48%, #ebe4d8 100%);
      border: 1px solid #c4b8a0; box-shadow: 0 24px 60px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.85);
      padding: 1.35rem 1.5rem 1.25rem; text-align: center;
    }
    .pay-modal__panel h3 { margin: 0 0 0.65rem; font-size: 1.05rem; letter-spacing: 0.28em; text-indent: 0.28em; color: #3a3228; font-weight: 700; }
    .pay-modal__lead { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.75; color: #5c5044; }
    .pay-modal__lead strong { color: #8b4513; font-weight: 700; }
    .pay-qr-row { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
    .pay-qr-card {
      flex: 1 1 140px; max-width: 168px; border-radius: 10px; background: #fff; border: 1px solid #d8cfc0;
      padding: 0.65rem 0.5rem 0.55rem; box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }
    .pay-qr-img-wrap {
      width: 140px; height: 140px; margin: 0 auto 0.45rem; border-radius: 8px;
      background: #fafafa; border: 1px solid #e0dcd4;
      display: flex; align-items: center; justify-content: center; overflow: hidden;
      box-sizing: border-box;
    }
    .pay-qr-img-wrap img.pay-qr-img {
      max-width: 100%; max-height: 100%; width: auto; height: auto;
      object-fit: contain; object-position: center; display: block;
    }
    .pay-qr-card span { font-size: 0.78rem; color: #5a5046; letter-spacing: 0.12em; }
    .pay-order-meta { font-size: 0.72rem; color: #6a5f54; line-height: 1.55; margin-bottom: 0.85rem; word-break: break-all; }
    .pay-order-meta code { font-size: 0.68rem; background: rgba(0,0,0,0.06); padding: 0.12rem 0.35rem; border-radius: 4px; }
    .pay-callback-hint {
      font-size: 0.65rem; color: #7a6e62; line-height: 1.5; text-align: left; margin-bottom: 1rem;
      padding: 0.55rem 0.65rem; border-radius: 8px; background: rgba(90, 70, 40, 0.06); border: 1px solid rgba(139, 115, 85, 0.2);
    }
    .pay-callback-hint code { font-size: 0.62rem; word-break: break-all; }
    .pay-modal__actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
    .pay-modal__actions button {
      height: 2.1rem; padding: 0 1rem; border-radius: 8px; font: inherit; font-size: 0.82rem; cursor: pointer; border: 1px solid #8b7355;
      background: linear-gradient(180deg, #6b5344, #4e3d32); color: #fffef8; font-weight: 600;
    }
    .pay-modal__actions button.secondary { background: #fff; color: #4a4036; border-color: #c4b8a0; font-weight: 500; }
    .auth-modal,
    .reading-detail-modal { position: fixed; inset: 0; z-index: 2800; display: none; align-items: center; justify-content: center; padding: 1rem; }
    .auth-modal.is-open,
    .reading-detail-modal.is-open { display: flex; }
    .auth-modal__backdrop,
    .reading-detail-modal__backdrop { position: absolute; inset: 0; background: rgba(12, 10, 8, 0.64); backdrop-filter: blur(4px); }
    .auth-modal__panel,
    .reading-detail-modal__panel {
      position: relative; z-index: 1; width: min(92vw, 420px); border-radius: 8px;
      border: 1px solid rgba(196, 165, 118, 0.32); background: #17130f; color: #efe4d0;
      box-shadow: 0 18px 50px rgba(0,0,0,.34); padding: 1rem;
    }
    .reading-detail-modal__panel { width: min(94vw, 760px); max-height: min(84vh, 820px); display: flex; flex-direction: column; }
    .auth-modal__title,
    .reading-detail-modal__title { margin: 0 0 .8rem; color: #d7b36a; font-size: 1.05rem; letter-spacing: .12em; }
    .auth-modal__tabs { display: flex; gap: .45rem; margin-bottom: .75rem; }
    .auth-modal__tabs button,
    .auth-modal__actions button,
    .me-action-btn,
    .mock-pay-btn,
    .reading-detail-modal__close {
      border: 1px solid rgba(196, 165, 118, 0.38); border-radius: 999px; min-height: 38px; padding: 0 .9rem;
      background: rgba(55, 44, 34, 0.82); color: rgba(245, 234, 218, 0.95); cursor: pointer;
    }
    .auth-modal__tabs button.is-active,
    .auth-modal__actions button.primary,
    .me-action-btn.primary,
    .mock-pay-btn { background: linear-gradient(180deg, #d8b568, #9e7430); color: #21160c; font-weight: 700; }
    .auth-modal__field { display: block; margin-bottom: .7rem; }
    .auth-modal__field span { display: block; margin-bottom: .28rem; font-size: .78rem; color: rgba(220, 204, 176, .78); }
    .auth-modal__field input {
      width: 100%; min-height: 42px; border-radius: 8px; border: 1px solid rgba(196, 165, 118, 0.28);
      background: rgba(255,255,255,.055); color: #f6ecdc; padding: 0 .72rem;
    }
    .auth-modal__msg,
    .mobile-me-pane__msg { min-height: 1.4em; color: #e6b46a; font-size: .86rem; line-height: 1.5; }
    .auth-modal__actions,
    .mobile-me-pane__actions { display: flex; gap: .48rem; flex-wrap: wrap; margin-top: .65rem; }
    .auth-modal__backdrop { background: rgba(15, 23, 42, 0.38); backdrop-filter: blur(6px); }
    .auth-modal__panel {
      width: min(92vw, 400px);
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 8px;
      background: #fff;
      color: #111827;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
      padding: 1.15rem;
    }
    .auth-modal__title {
      color: #111827;
      font-size: 1.12rem;
      letter-spacing: 0;
      margin-bottom: 0.95rem;
      text-indent: 0;
    }
    .auth-modal__tabs {
      gap: 0.5rem;
      padding: 0.2rem;
      border-radius: 8px;
      background: #f3f4f6;
    }
    .auth-modal__tabs button {
      flex: 1;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #4b5563;
      min-height: 36px;
      padding: 0 0.75rem;
    }
    .auth-modal__tabs button.is-active {
      background: #fff;
      color: #111827;
      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
      font-weight: 700;
    }
    .auth-modal__field span {
      color: #374151;
      font-size: 0.82rem;
    }
    .auth-modal__field input {
      min-height: 44px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: #fff;
      color: #111827;
    }
    .auth-modal__field input:focus {
      outline: none;
      border-color: #111827;
      box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
    }
    .auth-modal__msg {
      color: #b45309;
      font-size: 0.84rem;
    }
    .auth-modal__actions {
      gap: 0.6rem;
      margin-top: 0.8rem;
    }
    .auth-modal__actions button {
      min-height: 42px;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      background: #fff;
      color: #111827;
      padding: 0 1rem;
    }
    .auth-modal__actions button.primary {
      border-color: #111827;
      background: #111827;
      color: #fff;
      font-weight: 700;
    }
    .mobile-me-pane__section { margin-top: .9rem; border-top: 1px solid rgba(196, 165, 118, 0.14); padding-top: .8rem; }
    .mobile-me-pane__section h4 { margin: 0 0 .55rem; color: #d7b36a; font-size: .92rem; letter-spacing: .08em; }
    .me-list { display: grid; gap: .55rem; }
    .me-list__item { border: 1px solid rgba(196, 165, 118, 0.18); border-radius: 8px; padding: .65rem; background: rgba(255,255,255,.035); }
    .me-list__title { margin: 0 0 .25rem; color: #f0dfbf; font-size: .9rem; }
    .me-list__meta { margin: 0; color: rgba(206, 194, 176, .82); font-size: .78rem; line-height: 1.55; }
    .profile-role-modal { position: fixed; inset: 0; z-index: 2820; display: none; align-items: center; justify-content: center; padding: 1rem; }
    .profile-role-modal.is-open { display: flex; }
    .profile-role-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 9, 8, 0.66); backdrop-filter: blur(4px); }
    .profile-role-modal__panel {
      position: relative;
      z-index: 1;
      width: min(92vw, 360px);
      border: 1px solid rgba(196, 165, 118, 0.28);
      border-radius: 10px;
      background: rgba(22, 18, 14, 0.97);
      color: rgba(244, 236, 224, 0.97);
      padding: 1rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34);
    }
    .profile-role-modal__title { margin: 0; color: rgba(226, 196, 144, 0.95); font-size: 1.02rem; letter-spacing: 0.08em; }
    .profile-role-modal__desc { margin: 0.52rem 0 0; color: rgba(213, 202, 186, 0.88); font-size: 0.86rem; line-height: 1.72; }
    .profile-role-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 0.88rem; }
    .profile-role-modal__btn {
      min-height: 40px;
      border: 1px solid rgba(196, 165, 118, 0.3);
      border-radius: 8px;
      background: rgba(54, 43, 33, 0.86);
      color: rgba(246, 237, 225, 0.96);
      font: inherit;
      cursor: pointer;
    }
    .profile-role-modal__btn.primary {
      background: linear-gradient(180deg, rgba(113, 89, 58, 0.97) 0%, rgba(71, 55, 39, 0.99) 100%);
      border-color: rgba(209, 176, 124, 0.46);
      color: rgba(255, 246, 231, 0.98);
      font-weight: 700;
    }
    .profile-role-modal__cancel {
      margin-top: 0.6rem;
      width: 100%;
      min-height: 36px;
      border: none;
      background: transparent;
      color: rgba(188, 174, 154, 0.82);
      cursor: pointer;
      font: inherit;
    }
    .reading-detail-modal__body { overflow: auto; white-space: pre-wrap; line-height: 1.86; font-size: .95rem; color: #f1e6d6; padding-right: .25rem; }
    .page-switch__account { border-style: dashed; }
    .luck-avatar-host { margin-top: 0.9rem; }
    .luck-avatar-card {
      --luck-accent: #d7b36a;
      --luck-soft: rgba(215, 179, 106, 0.14);
      border: 1px solid rgba(196, 165, 118, 0.24);
      border-radius: 8px;
      background:
        radial-gradient(circle at 18% 12%, var(--luck-soft), transparent 38%),
        rgba(19, 16, 13, 0.9);
      color: rgba(244, 235, 220, 0.96);
      padding: 0.86rem;
      overflow: hidden;
    }
    .luck-avatar-card--mobile { margin-top: 0.78rem; }
    .luck-avatar-card__head { display: flex; gap: 0.72rem; align-items: center; margin-bottom: 0.66rem; }
    .luck-avatar-card__figure {
      width: 3.05rem; height: 3.05rem; border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--luck-accent), transparent 24%);
      background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.12)),
        var(--luck-soft);
      position: relative; flex: 0 0 auto;
    }
    .luck-avatar-card__figure::before {
      content: ""; position: absolute; left: 50%; top: 0.58rem; width: 0.9rem; height: 0.9rem;
      transform: translateX(-50%); border-radius: 50%; background: var(--luck-accent); opacity: 0.88;
      box-shadow: 0 1.15rem 0 0 color-mix(in srgb, var(--luck-accent), transparent 18%);
    }
    .luck-avatar-card__figure::after {
      content: ""; position: absolute; left: 50%; bottom: 0.45rem; width: 1.58rem; height: 0.76rem;
      transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--luck-accent), transparent 16%);
      border-top: none; border-radius: 0 0 999px 999px; opacity: 0.9;
    }
    .luck-avatar-card__name { margin: 0; font-size: 0.95rem; color: #f6e6c3; font-weight: 700; }
    .luck-avatar-card__sub { margin: 0.16rem 0 0; font-size: 0.76rem; line-height: 1.45; color: rgba(210, 197, 176, 0.82); }
    .luck-avatar-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .luck-avatar-card__item {
      border: 1px solid rgba(196, 165, 118, 0.14); border-radius: 7px;
      padding: 0.5rem; background: rgba(255,255,255,.035);
    }
    .luck-avatar-card__label { display: block; margin-bottom: 0.22rem; font-size: 0.7rem; color: rgba(210, 197, 176, 0.68); }
    .luck-avatar-card__value { font-size: 0.82rem; line-height: 1.55; }
    .luck-avatar-card__state { margin-top: 0.62rem; border-top: 1px solid rgba(196, 165, 118, 0.16); padding-top: 0.62rem; }
    .luck-avatar-card__state-title { margin: 0 0 0.25rem; color: var(--luck-accent); font-size: 0.9rem; font-weight: 700; }
    .luck-avatar-card__advice { margin: 0; color: rgba(230, 219, 202, 0.9); font-size: 0.8rem; line-height: 1.65; }
    .luck-element--metal { --luck-accent: #d6d1c4; --luck-soft: rgba(214, 209, 196, 0.16); }
    .luck-element--wood { --luck-accent: #7eb889; --luck-soft: rgba(126, 184, 137, 0.16); }
    .luck-element--water { --luck-accent: #78a7c8; --luck-soft: rgba(120, 167, 200, 0.16); }
    .luck-element--fire { --luck-accent: #d89264; --luck-soft: rgba(216, 146, 100, 0.16); }
    .luck-element--earth { --luck-accent: #c7aa72; --luck-soft: rgba(199, 170, 114, 0.16); }
    @supports not (color: color-mix(in srgb, #fff, transparent)) {
      .luck-avatar-card__figure { border-color: rgba(215, 179, 106, 0.55); }
      .luck-avatar-card__figure::after { border-color: rgba(215, 179, 106, 0.72); }
    }

    .ming-shu-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: flex-start; justify-content: center; padding: 1.2rem; overflow-y: auto; }
    .ming-shu-modal.is-open { display: flex; }
    .ming-shu-modal__backdrop { position: fixed; inset: 0; background: rgba(30, 26, 22, 0.5); }
    .ming-shu-modal__inner {
      position: relative; margin: 0.5rem auto 2rem; max-width: 520px; width: 100%;
      border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    }
    .ming-shu-modal__x {
      position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; width: 2rem; height: 2rem; border: none; border-radius: 50%;
      background: rgba(60, 48, 36, 0.12); color: #4a3a2a; font-size: 1.35rem; line-height: 1; cursor: pointer;
    }
    .ming-shu-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; padding: 0.75rem; background: #2a241c; }
    .ming-shu-actions button {
      height: 2rem; padding: 0 0.9rem; border-radius: 6px; font-size: 0.8rem; cursor: pointer; border: 1px solid #c9a227;
      background: linear-gradient(180deg, #b8860b, #8b6914); color: #fffef5; font-weight: 600;
    }
    .ming-shu-actions button.secondary { background: #3d352c; border-color: #6a5a4a; color: #e8dcc8; font-weight: 500; }

    .ming-anc-wrap {
      font-family: "Songti SC", "SimSun", "Noto Serif SC", "Source Han Serif SC", serif;
      background: #f7f0e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
      color: #2c241c; padding: 2.2rem 1.85rem 2rem; border: 12px double #5c4a32; box-sizing: border-box;
      min-height: 280px; box-shadow: inset 0 0 80px rgba(90, 60, 20, 0.08);
    }
    .ming-anc-wrap .ming-anc-title {
      text-align: center; font-size: 1.35rem; letter-spacing: 0.55em; text-indent: 0.55em; margin: 0 0 0.15rem;
      border-bottom: 2px solid #5c4a32; padding-bottom: 0.65rem; font-weight: 800; color: #1a1410;
    }
    .ming-anc-wrap .ming-anc-sub { text-align: center; font-size: 0.78rem; color: #5a4a38; margin: 0.5rem 0 1.25rem; letter-spacing: 0.15em; }
    .ming-anc-wrap .ming-anc-seal {
      float: right; width: 3.2rem; height: 3.2rem; margin: 0 0 0.5rem 0.75rem; border: 3px solid #8b2e2e; color: #8b2e2e;
      font-size: 0.62rem; line-height: 1.15; display: flex; align-items: center; justify-content: center; text-align: center;
      transform: rotate(-8deg); opacity: 0.88; font-weight: 700; letter-spacing: 0.08em;
    }
    .ming-anc-p { margin: 0 0 1em; font-size: 0.95rem; line-height: 2.05; text-align: justify; text-indent: 2em; }

    .master-intro {
      max-width: 1200px; margin: 0 auto 2.5rem; padding: 0 1.25rem 2rem;
    }
    .master-intro__inner {
      border: 1px solid rgba(212, 175, 118, 0.12);
      background: rgba(26, 24, 22, 0.48);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 1.35rem 1.5rem 1.5rem; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    }
    .master-intro h2 { margin: 0 0 0.9rem; font-size: 1.02rem; letter-spacing: 0.12em; text-indent: 0; color: rgba(238, 230, 218, 0.94); font-weight: 700; }
    .master-intro p { margin: 0 0 0.75rem; font-size: 0.88rem; line-height: 1.85; color: rgba(188, 180, 168, 0.88); text-align: justify; }
    .master-intro .master-intro-lead { margin-bottom: 0.5rem; }
    .master-intro .master-intro-second { margin-top: 0.55rem; margin-bottom: 0.35rem; font-weight: 500; }
    .master-intro .tagline { font-size: 0.8rem; color: var(--ink-muted); letter-spacing: 0.12em; margin: 1rem 0 0; text-align: center; }

    /* —— 现代东方玄学 · 深色克制 —— */
    :root {
      --bg: #0f0e0c;
      --bg-panel: rgba(34, 30, 26, 0.75);
      --border: rgba(212, 175, 118, 0.16);
      --ink: rgba(245, 238, 228, 0.92);
      --ink-muted: rgba(188, 180, 168, 0.78);
      --btn: rgba(200, 175, 140, 0.92);
      --paper-line: rgba(120, 100, 78, 0.22);
      --seal: #c08080;
      --ink-soft: rgba(210, 200, 188, 0.82);
      --gold-dim: #8a7348;
      --gold-bright: #a68b5c;
      --rice: rgba(248, 242, 232, 0.94);
      --rice-deep: rgba(32, 28, 24, 0.9);
      --mist: rgba(8, 6, 4, 0.5);
    }

body:not(.mobile-ui-enabled) .mobile-me-pane {
      padding-top: 0.8rem;
    }

body:not(.mobile-ui-enabled) .mobile-me-links {
      margin-top: 0.8rem;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.7rem;
    }

body:not(.mobile-ui-enabled) .mobile-me-link-btn {
      min-height: 52px;
      border-radius: 16px;
      text-align: left;
      padding: 0 0.95rem;
      border: 1px solid #d6eeee;
      background: #ffffff;
      color: #222222;
      box-shadow: 0 8px 20px rgba(84, 70, 45, 0.06);
    }

@media (max-width: 720px) {
      body.mobile-ui-enabled .auth-modal__panel,
      body.mobile-ui-enabled .reading-detail-modal__panel,
      body.mobile-ui-enabled .pay-modal__panel {
        border-color: var(--moss-line);
        box-shadow: 0 18px 36px rgba(75, 99, 73, 0.12);
      }
}