/* 登录态 / 模态框 / 我的预约 —— 弄弄好品牌商城 */
.auth-box{ display:inline-flex; align-items:center; gap:10px; margin-left:14px; }
.auth-box .auth-name{ font-size:14px; color:var(--ink); font-weight:600; }
.btn-mini{
  border:1px solid var(--gold); background:var(--gold); color:#1a120a;
  font-size:13px; padding:7px 14px; border-radius:8px; cursor:pointer; font-family:var(--sans);
  transition:.2s;
}
.btn-mini:hover{ filter:brightness(1.06); }
.btn-mini.ghost{ background:transparent; color:var(--gold); }
.btn-mini.ghost:hover{ background:rgba(180,140,70,.1); }

.modal-mask{
  position:fixed; inset:0; background:rgba(20,14,8,.55);
  display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px;
}
.modal-mask[hidden]{ display:none; }
.modal{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  width:380px; max-width:100%; padding:30px 28px 26px; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.3); font-family:var(--sans);
}
.modal.wide{ width:560px; }
.modal-x{
  position:absolute; top:12px; right:14px; border:none; background:none; font-size:22px;
  color:var(--muted); cursor:pointer; line-height:1;
}
.modal h3{ font-family:var(--serif); font-size:20px; color:var(--ink); margin-bottom:18px; }
.tabs{ display:flex; gap:0; margin-bottom:22px; border-bottom:1px solid var(--line); }
.tabs .tab{
  font-size:16px; padding:8px 16px; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:.2s;
}
.tabs .tab.active{ color:var(--ink); border-color:var(--gold); font-weight:600; }
.modal form{ display:flex; flex-direction:column; gap:12px; }
.modal form[hidden]{ display:none; }
.modal input, .modal textarea{
  width:100%; box-sizing:border-box; padding:11px 13px; border:1px solid var(--line);
  border-radius:9px; font-size:14px; font-family:var(--sans); color:var(--ink); background:var(--paper-2);
}
.modal input:focus, .modal textarea:focus{ outline:none; border-color:var(--gold); }
.modal label{ font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:6px; }
.btn-submit{
  margin-top:4px; background:var(--gold); color:#1a120a; border:none; padding:12px;
  border-radius:9px; font-size:15px; font-weight:600; cursor:pointer; font-family:var(--sans);
}
.btn-submit:hover{ filter:brightness(1.06); }
.err{ color:#b4452f; font-size:13px; min-height:16px; }
.bk-info{
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  font-size:14px; line-height:1.9; color:var(--ink); margin-bottom:6px;
}
.bk-info b{ color:var(--muted); font-weight:400; display:inline-block; min-width:64px; }
.my-list{ display:flex; flex-direction:column; gap:12px; max-height:60vh; overflow:auto; }
.my-item{
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--paper-2);
}
.my-item .top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.my-item .svc{ font-size:15px; font-weight:600; color:var(--ink); font-family:var(--serif); }
.my-item .st{ font-size:12px; color:#fff; background:var(--gold); padding:2px 10px; border-radius:20px; white-space:nowrap; }
.my-item .meta{ font-size:13px; color:var(--muted); line-height:1.8; margin-top:8px; }
.my-item .meta b{ color:var(--ink); font-weight:500; }
.my-empty{ color:var(--muted); font-size:14px; text-align:center; padding:26px 0; }

/* 扫码支付弹窗 */
.pay-modal{ text-align:center; }
.pay-modal .bk-info{ text-align:left; }
.pay-qr-wrap{
  width:240px; height:240px; margin:16px auto 12px; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.pay-qr-wrap img{ width:100%; height:100%; object-fit:contain; display:block; }
.pay-tip{ font-size:15px; font-weight:600; color:var(--ink); margin-bottom:14px; }
.pay-tip span{ display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:4px; }