/* 喵喵宠物店 · “我的”会员面板 */
.my-entry-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 2px solid var(--ink, #493c58); border-radius: 12px;
  background: linear-gradient(135deg, #ffe5f0, #eef2ff); color: var(--ink, #493c58);
  font: 900 11px/1.1 "Microsoft YaHei", "PingFang SC", sans-serif; white-space: nowrap;
  box-shadow: 0 4px 0 rgba(73,60,88,.13); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.my-entry-btn:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 6px 0 rgba(73,60,88,.13); }
.my-entry-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(73,60,88,.13); }

.my-modal {
  position: fixed; inset: 0; z-index: 700; display: grid; place-items: center; padding: 18px;
  background: rgba(63,46,70,.64); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
.my-modal[hidden] { display: none; }
.my-modal.show { opacity: 1; visibility: visible; }
body.my-open { overflow: hidden; }

.my-shell {
  width: min(980px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 22px;
  border: 4px solid var(--ink, #493c58); border-radius: 28px;
  background:
    radial-gradient(circle at 6% 4%, rgba(255,216,116,.22) 0 70px, transparent 71px),
    radial-gradient(circle at 96% 4%, rgba(135,217,255,.20) 0 90px, transparent 91px),
    linear-gradient(155deg, #fffdf8, #fff3f7 58%, #eefcf8);
  box-shadow: 0 16px 0 rgba(73,60,88,.16), 0 34px 90px rgba(0,0,0,.32);
  transform: translateY(16px) scale(.975); transition: transform .22s ease; overscroll-behavior: contain;
}
.my-modal.show .my-shell { transform: none; }
.my-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.my-kicker { margin: 0; color: #a05a75; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.my-head h2 { margin: 4px 0; font-size: 28px; }
.my-head p { margin: 0; color: var(--muted, #806f89); font-size: 11px; }
.my-close { width: 40px; height: 40px; flex: 0 0 40px; border: 3px solid var(--ink, #493c58); border-radius: 50%; background: #ffd2dc; color: var(--ink, #493c58); font-size: 22px; font-weight: 900; cursor: pointer; }

.my-welcome { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 15px; padding: 17px 18px; border: 3px solid var(--ink, #493c58); border-radius: 22px; background: linear-gradient(135deg,#ffe7f1,#fff7dd 56%,#e8f9ff); box-shadow: 0 7px 0 rgba(73,60,88,.12); }
.my-welcome p { margin: 0 0 2px; color: #a05a75; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.my-welcome h3 { margin: 0 0 5px; font-size: 24px; }
.my-welcome h3 b { color: #a05a75; }
.my-welcome span { color: var(--muted, #806f89); font-size: 10px; font-weight: 800; }
.my-avatar { display: grid; place-items: center; width: 70px; height: 70px; flex: 0 0 70px; border: 3px solid var(--ink, #493c58); border-radius: 24px; background: #fff; font-size: 38px; transform: rotate(4deg); box-shadow: 5px 6px 0 rgba(73,60,88,.12); }

.my-section, .my-bind { margin-top: 14px; padding: 14px; border: 2px dashed rgba(73,60,88,.18); border-radius: 18px; background: rgba(255,255,255,.76); }
.my-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.my-section-head h3 { margin: 0; font-size: 16px; }
.my-section-head span { color: var(--muted, #806f89); font-size: 9px; font-weight: 900; text-align: right; }
.my-bind-row { display: flex; gap: 8px; }
.my-bind-row input, .my-owner-grid input { min-width: 0; width: 100%; padding: 10px 11px; border: 2px solid #ddd0e2; border-radius: 12px; background: #fffaf6; color: var(--ink, #493c58); font: 800 13px "Microsoft YaHei", sans-serif; outline: none; }
.my-bind-row input:focus, .my-owner-grid input:focus { border-color: #b9a4c6; background: #fff; }
.my-bind-row button, .my-owner-actions button { flex: 0 0 auto; padding: 10px 15px; border: 2px solid var(--ink, #493c58); border-radius: 12px; background: #ffd874; color: var(--ink, #493c58); font: 900 12px "Microsoft YaHei", sans-serif; box-shadow: 0 4px 0 rgba(73,60,88,.13); cursor: pointer; }
.my-status { margin: 8px 2px 0; color: var(--muted, #806f89); font-size: 10px; font-weight: 900; line-height: 1.5; }
.my-status.ok { color: #3b8b73; }
.my-status.err { color: #c25d7c; }

.my-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.my-summary > div { min-width: 0; padding: 12px; border: 2px solid var(--ink, #493c58); border-radius: 16px; background: linear-gradient(145deg,#fff7dc,#ffe8f2); }
.my-summary > div:nth-child(2) { background: linear-gradient(145deg,#eaf9ff,#f0ecff); }
.my-summary > div:nth-child(3) { background: linear-gradient(145deg,#e9fff7,#f3f8ff); }
.my-summary > div:nth-child(4) { background: linear-gradient(145deg,#fff1f8,#fff8e8); }
.my-summary span { display: block; color: var(--muted, #806f89); font-size: 9px; font-weight: 900; margin-bottom: 4px; }
.my-summary b { display: block; color: var(--ink, #493c58); font-size: 17px; line-height: 1.1; }
.my-summary em { font-style: normal; font-size: 23px; }

.my-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.my-quick-actions button { padding: 9px 13px; border: 2px solid var(--ink, #493c58); border-radius: 12px; background: #fff; color: var(--ink, #493c58); font: 900 11px "Microsoft YaHei", sans-serif; box-shadow: 0 4px 0 rgba(73,60,88,.11); cursor: pointer; }
.my-quick-actions button:first-child { background: #dff8ef; }
.my-quick-actions button:last-child { background: #efe7ff; }

.my-empty { padding: 17px; border: 2px dashed rgba(73,60,88,.18); border-radius: 14px; color: var(--muted, #806f89); font-size: 10px; font-weight: 900; line-height: 1.6; text-align: center; }
.my-order { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(150px,.8fr); gap: 10px; align-items: center; padding: 10px 12px; border: 2px solid rgba(73,60,88,.15); border-radius: 14px; background: #fff; }
.my-order + .my-order { margin-top: 7px; }
.my-order.cancelled { opacity: .58; }
.my-order > div:first-child { min-width: 0; }
.my-order b, .my-order span, .my-order small, .my-order em { display: block; }
.my-order b { margin-bottom: 3px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-order span, .my-order small { color: var(--muted, #806f89); font-size: 9px; font-weight: 800; }
.my-order > div:last-child { text-align: right; }
.my-order em { color: #3b8b73; font-size: 10px; font-style: normal; font-weight: 900; margin-bottom: 2px; }
.my-order small { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.my-affinity-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.my-aff-pet { padding: 12px; border: 3px solid var(--ink, #493c58); border-radius: 17px; background: linear-gradient(160deg,#fff,#fff0f6); box-shadow: 0 5px 0 rgba(73,60,88,.10); }
.my-aff-pet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.my-aff-pet-head b { font-size: 15px; }
.my-aff-pet-head span { color: #a05a75; font-size: 9px; font-weight: 900; }
.my-aff-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted, #806f89); font-size: 9px; font-weight: 900; }
.my-aff-next { margin-top: 9px; padding: 8px 9px; border: 2px dashed rgba(73,60,88,.17); border-radius: 11px; background: #fff; color: var(--muted, #806f89); font-size: 9px; font-weight: 900; }
.my-aff-reward { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin-top: 7px; padding: 8px 9px; border: 2px solid rgba(73,60,88,.13); border-radius: 11px; background: #fffaf6; }
.my-aff-reward b { font-size: 10px; }
.my-aff-reward span { grid-column: 1; color: var(--muted, #806f89); font-size: 9px; }
.my-aff-reward em { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #3b8b73; font-size: 9px; font-style: normal; font-weight: 900; }
.my-aff-reward em.ready { color: #c25d7c; }

.my-owner-panel { background: linear-gradient(150deg,rgba(255,255,255,.9),rgba(239,231,255,.72)); }
.my-owner-note { margin: 0 0 10px; color: var(--muted, #806f89); font-size: 10px; font-weight: 800; line-height: 1.6; }
.my-owner-grid { display: grid; grid-template-columns: 1.25fr 1fr .8fr; gap: 9px; }
.my-owner-grid label { display: flex; flex-direction: column; gap: 5px; color: #8f7a9c; font-size: 10px; font-weight: 900; }
.my-owner-actions { margin-top: 10px; }
.my-customer-list { display: grid; gap: 7px; margin-top: 11px; }
.my-customer-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 10px; border: 2px solid rgba(73,60,88,.14); border-radius: 13px; background: #fff; }
.my-customer-row > div { min-width: 0; }
.my-customer-row b, .my-customer-row span, .my-customer-row em { display: block; }
.my-customer-row b { margin-bottom: 2px; font-size: 12px; }
.my-customer-row span { color: var(--muted, #806f89); font-size: 9px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-customer-row em { color: #a05a75; font-size: 10px; font-style: normal; font-weight: 900; text-align: right; }
.my-customer-row button { padding: 7px 10px; border: 2px solid var(--ink, #493c58); border-radius: 10px; background: #ffd874; color: var(--ink, #493c58); font: 900 10px "Microsoft YaHei", sans-serif; cursor: pointer; }

@media (max-width: 720px) {
  .my-entry-btn { padding: 7px 8px; font-size: 9px; gap: 4px; }
  .my-modal { padding: 6px; align-items: stretch; }
  .my-shell { max-height: calc(100dvh - 12px); padding: 13px; border-width: 3px; border-radius: 21px; }
  .my-head h2 { font-size: 21px; }
  .my-head p { font-size: 10px; }
  .my-close { width: 36px; height: 36px; border-width: 2px; font-size: 20px; }
  .my-welcome { padding: 14px; border-width: 2px; border-radius: 18px; }
  .my-welcome h3 { font-size: 20px; }
  .my-avatar { width: 56px; height: 56px; flex-basis: 56px; border-width: 2px; border-radius: 18px; font-size: 30px; }
  .my-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .my-summary > div { padding: 10px; border-width: 2px; border-radius: 14px; }
  .my-summary em { font-size: 20px; }
  .my-bind-row input, .my-owner-grid input { font-size: 16px; }
  .my-bind-row button, .my-owner-actions button { padding: 10px 11px; font-size: 11px; }
  .my-section, .my-bind { padding: 11px; border-radius: 15px; }
  .my-section-head { display: block; }
  .my-section-head span { display: block; margin-top: 3px; text-align: left; }
  .my-affinity-list { grid-template-columns: 1fr; }
  .my-owner-grid { grid-template-columns: 1fr; }
  .my-customer-row { grid-template-columns: 1fr auto; }
  .my-customer-row button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 420px) {
  .my-entry-btn span:last-child { display: none; }
  .my-entry-btn { width: 35px; height: 35px; justify-content: center; padding: 4px; }
  .my-bind-row { display: block; }
  .my-bind-row button { width: 100%; margin-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .my-entry-btn, .my-modal, .my-shell { transition: none; }
}

/* 店长端订单与顾客编辑 */
.my-order-editor {
  margin-bottom: 11px;
  padding: 11px;
  border: 2px dashed rgba(73,60,88,.18);
  border-radius: 15px;
  background: linear-gradient(145deg,#fff8e7,#f4edff);
}
.my-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.my-editor-head b { font-size: 13px; }
.my-editor-head button { padding: 6px 9px; border: 2px solid var(--ink,#493c58); border-radius: 10px; background: #fff; color: var(--ink,#493c58); font: 900 9px "Microsoft YaHei",sans-serif; cursor: pointer; }
.my-order-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.my-order-grid label, .my-owner-grid label { display: flex; flex-direction: column; gap: 4px; color: #8f7a9c; font-size: 9px; font-weight: 900; }
.my-order-grid input, .my-order-grid select { width: 100%; min-width: 0; padding: 9px 10px; border: 2px solid #ddd0e2; border-radius: 11px; background: #fff; color: var(--ink,#493c58); font: 800 11px "Microsoft YaHei",sans-serif; outline: none; }
.my-order-note-field { grid-column: 1 / -1; }
.my-editor-actions, .my-owner-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.my-editor-actions button, .my-owner-actions button { padding: 9px 12px; border: 2px solid var(--ink,#493c58); border-radius: 11px; background: #ffd874; color: var(--ink,#493c58); font: 900 11px "Microsoft YaHei",sans-serif; box-shadow: 0 3px 0 rgba(73,60,88,.11); cursor: pointer; }
.my-editor-actions button + button, .my-owner-actions button + button { background: #fff; }
.my-order-actions, .my-customer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.my-order-actions button, .my-customer-actions button { padding: 6px 9px; border: 2px solid var(--ink,#493c58); border-radius: 9px; background: #fff; color: var(--ink,#493c58); font: 900 9px "Microsoft YaHei",sans-serif; cursor: pointer; }
.my-order-actions button.danger, .my-customer-actions button.danger { background: #ffd2dc; }
.my-customer-row { grid-template-columns: minmax(0,1fr) auto minmax(150px,auto); }
.my-customer-actions { justify-content: flex-end; }

@media (max-width: 720px) {
  .my-order-grid { grid-template-columns: 1fr 1fr; }
  .my-order-grid label:nth-child(4) { grid-column: 1 / -1; }
  .my-order { grid-template-columns: 1fr; }
  .my-order > div:last-child { text-align: left; }
  .my-order-actions { justify-content: flex-start; }
  .my-customer-row { grid-template-columns: 1fr auto; }
  .my-customer-actions { grid-column: 1 / -1; justify-content: flex-start; }
}



/* 店长查看顾客与陪玩好感度 */
.my-inline-close {
  padding: 6px 10px; border: 2px solid var(--ink,#493c58); border-radius: 10px;
  background: #fff; color: var(--ink,#493c58); font: 900 9px "Microsoft YaHei",sans-serif; cursor: pointer;
}
.my-customer-actions button.wide { background: #efe7ff; }
.my-manager-affinity { background: linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,229,240,.72)); }
.my-manager-affinity .my-affinity-list { margin-top: 3px; }
.my-summary.customer-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 微信账单式余额明细 */
.my-bill {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 2px solid rgba(73,60,88,.14);
  border-radius: 15px;
  background: #fff;
}
.my-bill + .my-bill { margin-top: 8px; }
.my-bill-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--ink,#493c58);
  border-radius: 14px;
  background: #fff4d3;
  font-size: 20px;
}
.my-bill-main { min-width: 0; }
.my-bill-main b, .my-bill-main span, .my-bill-money b, .my-bill-money span { display: block; }
.my-bill-main b { margin-bottom: 4px; font-size: 13px; }
.my-bill-main span { color: var(--muted,#806f89); font-size: 9px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-bill-money { min-width: 118px; text-align: right; }
.my-bill-money b { font-size: 20px; line-height: 1; margin-bottom: 5px; }
.my-bill-money span { color: var(--muted,#806f89); font-size: 9px; font-weight: 900; }
.my-bill.income .my-bill-money b { color: #2f9d78; }
.my-bill.expense .my-bill-money b { color: #d85f84; }
.my-bill-actions { display: flex; justify-content: flex-end; gap: 5px; margin-top: 7px; }
.my-bill-actions button { padding: 5px 8px; border: 2px solid var(--ink,#493c58); border-radius: 9px; background: #fff; color: var(--ink,#493c58); font: 900 9px "Microsoft YaHei",sans-serif; cursor: pointer; }
.my-bill-actions button.danger { background: #ffd2dc; }

@media (max-width: 720px) {
  .my-bill { grid-template-columns: 36px minmax(0,1fr) auto; gap: 7px; padding: 10px; }
  .my-bill-icon { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; }
  .my-bill-main b { font-size: 11px; }
  .my-bill-money { min-width: 92px; }
  .my-bill-money b { font-size: 17px; }
  .my-bill-actions { flex-direction: column; }
}