:root{
  --radius:14px;
  --radius-pill:9999px;
  --brand-a:#667eea;
  --brand-b:#764ba2;
  --panel-bg:rgba(255,255,255,.78);
  --panel-brd:rgba(255,255,255,.28);
  --panel-blur:16px;
  --panel-shadow:0 8px 28px rgba(0,0,0,.08);
  --weak-bg:rgba(0,0,0,.03);
  --thead-bg:rgba(0,0,0,.04);
  --auth-card-max:560px;
  --container-max:1200px;
}

html[data-bs-theme="dark"]{
  --panel-bg:rgba(32,32,36,.86);
  --panel-brd:rgba(255,255,255,.10);
  --panel-blur:18px;
  --panel-shadow:0 14px 40px rgba(0,0,0,.45);
  --weak-bg:rgba(255,255,255,.06);
  --thead-bg:rgba(255,255,255,.08);
}

html,body{height:100%}
body{
  background-color:var(--tblr-bg-surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    radial-gradient(60% 50% at 12% 8%, rgba(102,126,234,.18), transparent 60%),
    radial-gradient(55% 45% at 88% 12%, rgba(118,75,162,.18), transparent 65%),
    radial-gradient(70% 55% at 80% 105%, rgba(102,126,234,.12), transparent 65%),
    linear-gradient(180deg, rgba(102,126,234,.06), rgba(118,75,162,.06));
}
html[data-bs-theme="dark"] body::before{
  background-image:
    radial-gradient(60% 50% at 12% 8%, rgba(102,126,234,.28), transparent 60%),
    radial-gradient(55% 45% at 88% 12%, rgba(118,75,162,.28), transparent 65%),
    radial-gradient(70% 55% at 80% 105%, rgba(102,126,234,.22), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
}

.auth-wrap{
  min-height:100vh;
  padding:1.25rem;
  display:grid;
  place-items:center;
  padding-bottom:calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
@supports(min-height:100svh){ .auth-wrap{min-height:100svh} }
@supports(min-height:100dvh){ .auth-wrap{min-height:100dvh} }
.auth-card{
  width:min(var(--auth-card-max), calc(100% - 2rem));
  border-radius:var(--radius);
  border:1px solid var(--panel-brd);
  background:var(--panel-bg);
  backdrop-filter:blur(var(--panel-blur));
  -webkit-backdrop-filter:blur(var(--panel-blur));
  box-shadow:var(--panel-shadow);
  overflow:hidden;
}
.auth-top{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.6rem .75rem;
  border-bottom:1px solid var(--tblr-border-color);
}
.brand-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
  padding:.35rem .65rem;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(102,126,234,.35);
}
.tabs{margin-left:auto}
.tabs .nav-link{
  border:none;
  border-radius:10px;
  font-weight:700;
  color:var(--tblr-secondary);
  padding:.4rem .7rem;
}
.tabs .nav-link.active{
  color:#fff;
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
  box-shadow:0 4px 12px rgba(102,126,234,.3);
}
.view{
  padding:18px;
  background:var(--weak-bg);
  border:1px solid var(--tblr-border-color);
  border-radius:calc(var(--radius) - 6px);
  margin:.9rem;
}
.view h3{
  font-weight:800;
  margin:0 0 .35rem;
  text-align:center;
}
.view .sub{
  color:var(--tblr-secondary);
  text-align:center;
  margin-bottom:.6rem;
}

.container-xl{
  max-width:var(--container-max);
  padding:1.25rem;
  background:var(--panel-bg);
  backdrop-filter:blur(var(--panel-blur));
  -webkit-backdrop-filter:blur(var(--panel-blur));
  border-radius:var(--radius);
  border:1px solid var(--panel-brd);
  box-shadow:var(--panel-shadow);
  margin:1rem auto 2rem;
  width:calc(100% - 2rem);
}

.page-title{
  display:flex;
  align-items:center;
  gap:1rem;
  width:100%;
}
.page-title .avatar{
  width:48px;
  height:48px;
  border-radius:50% !important;
  flex-shrink:0;
}
.page-title h2{
  margin:0;
  display:flex;
  align-items:center;
  gap:.75rem;
}

.nav-tabs{
  border-bottom:0 !important;
  padding:.5rem;
  background:transparent;
}
.nav-tabs .nav-link{
  border:none;
  border-radius:calc(var(--radius) - 4px);
  padding:.6rem 1rem;
  font-weight:600;
  color:var(--tblr-secondary);
  transition:all .25s;
  margin:0 2px;
}
.nav-tabs .nav-link:hover{
  background:rgba(102,126,234,.12);
  color:#667eea;
  transform:translateY(-1px);
}
.nav-tabs .nav-link.active{
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
  color:#fff;
  box-shadow:0 4px 12px rgba(102,126,234,.3);
}

.card{
  border:1px solid var(--tblr-border-color);
  border-radius:var(--radius) !important;
  box-shadow:0 3px 12px rgba(0,0,0,.05);
  transition:all .25s ease;
  background:var(--panel-bg);
  backdrop-filter:blur(10px);
}
.card:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
.card-header{
  border-radius:var(--radius) var(--radius) 0 0 !important;
  border-bottom:1px solid var(--tblr-border-color);
  background:transparent;
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}
.card-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  font-weight:800;
  letter-spacing:.2px;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-title::before{
  content:"";
  width:6px;
  height:18px;
  border-radius:6px;
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
  opacity:.85;
  flex:0 0 auto;
}
.card-header .meta-muted{
  margin-left:auto;
  color:var(--tblr-secondary);
  flex:0 0 auto;
}
@media (max-width:576px){
  .card-header .meta-muted{
    width:100%;
    order:3;
    margin-left:0;
    margin-top:.25rem;
  }
}

.table thead th{
  font-size:1.05rem;
  font-weight:800;
  color:var(--tblr-body-color);
  border-bottom:2px solid var(--tblr-border-color);
  background:var(--thead-bg);
}
.meta-muted{
  font-size:.95rem;
  color:var(--tblr-secondary);
}

.btn{
  border-radius:var(--radius) !important;
  font-weight:600;
  border:none;
  transition:all .25s;
  padding:.55rem 1.1rem;
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
  box-shadow:0 3px 10px rgba(102,126,234,.3);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(102,126,234,.4);
}
.btn-outline-primary{
  border:1px solid #8d9bf3 !important;
  color:#667eea;
  background:transparent;
}
.btn-outline-primary:hover{background:rgba(102,126,234,.12)}
.btn-outline-info{
  border:1px solid rgba(0,184,217,.4) !important;
  color:#0aa2c0;
}
.btn-outline-info:hover{background:rgba(0,184,217,.12)}
.btn-sm{
  border-radius:calc(var(--radius) - 6px) !important;
  padding:.45rem .8rem;
}

.form-control,.form-select{
  border-radius:var(--radius) !important;
  border:1px solid var(--tblr-border-color);
  background:var(--weak-bg);
  backdrop-filter:blur(6px);
}

.fancy-select{position:relative; min-width:200px}
.fancy-select .select-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  width:100%;
  padding:.52rem .875rem;
  border-radius:var(--radius);
  border:1px solid var(--tblr-border-color);
  background:var(--weak-bg);
  cursor:pointer;
  font-weight:700;
  color:var(--tblr-secondary);
  backdrop-filter:blur(6px);
}
.fancy-select .chev{width:18px; height:18px; opacity:.7; transition:transform .2s}
.fancy-select.open .chev{transform:rotate(180deg)}
.fancy-select .select-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:220px;
  max-height:260px;
  overflow:auto;
  padding:.35rem;
  background:var(--panel-bg);
  border:1px solid var(--panel-brd);
  border-radius:var(--radius);
  box-shadow:var(--panel-shadow);
  z-index:1000;
}
.fancy-select .opt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.55rem .65rem;
  border-radius:calc(var(--radius) - 6px);
  cursor:pointer;
  color:var(--tblr-body-color);
}
.fancy-select .opt:hover{background:var(--weak-bg)}
.fancy-select .opt.active{
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
  color:#fff;
}
@media (max-width:576px){
  .fancy-select{min-width:0; width:100%}
}

.badge,.status-pill{
  border-radius:var(--radius-pill) !important;
  font-weight:700;
  padding:.35rem .75rem;
  font-size:.82rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:26px;
}
.status-pill{white-space:nowrap}
.status-pending{
  background:rgba(255,193,7,.18);
  color:#8b6b00;
  border:1px solid rgba(255,193,7,.38);
}
.status-shipped{
  background:rgba(40,167,69,.18);
  color:#0f6b3a;
  border:1px solid rgba(40,167,69,.36);
}
.status-canceled{
  background:rgba(108,117,125,.18);
  color:#475057;
  border:1px solid rgba(108,117,125,.36);
}

.redeem-notice{
  background:linear-gradient(135deg, rgba(102,126,234,.1), rgba(118,75,162,.1));
  border:1px solid rgba(102,126,234,.22);
  border-radius:var(--radius);
  padding:.75rem 1rem;
  text-align:left;
}
.addr-item{
  border:1px solid var(--tblr-border-color);
  border-radius:calc(var(--radius) - 4px);
  padding:.6rem .75rem;
  margin-bottom:.5rem;
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  background:var(--weak-bg);
  text-align:left;
}
.addr-item.selected{
  border-color:#667eea;
  background:rgba(102,126,234,.12);
}
.address-card{
  transition:all .25s;
  border:2px solid transparent;
  border-radius:var(--radius) !important;
}
.address-card:hover{
  border-color:#667eea;
  transform:translateY(-2px);
}
.address-card[data-default="1"]{
  border-color:#667eea;
  background:linear-gradient(135deg,rgba(102,126,234,.06),rgba(118,75,162,.06));
}
.address-add{
  border:1px dashed var(--tblr-border-color);
  background:var(--weak-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
  cursor:pointer;
  border-radius:var(--radius) !important;
}

.fab-theme{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:1100;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--panel-brd);
  background:var(--panel-bg);
  backdrop-filter:blur(12px);
  box-shadow:var(--panel-shadow);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);
}
.fab-theme svg{width:26px; height:26px}
.fab-theme .icon-sun{display:block}
.fab-theme .icon-moon{display:none}
html[data-bs-theme="dark"] .fab-theme .icon-sun{display:none}
html[data-bs-theme="dark"] .fab-theme .icon-moon{display:block}
@media (max-width:576px){
  .fab-theme{
    width:48px;
    height:48px;
    right:calc(12px + env(safe-area-inset-right));
    bottom:calc(12px + env(safe-area-inset-bottom));
  }
}

.swal2-popup.modal-compact{
  border-radius:var(--radius) !important;
  padding:1rem !important;
  background:var(--tblr-bg-surface) !important;
  color:var(--tblr-body-color) !important;
  width:min(600px, 92vw) !important;
}
.announcement-modal{
  background:var(--panel-bg) !important;
  color:var(--tblr-body-color) !important;
  border-radius:var(--radius) !important;
  border:1px solid var(--panel-brd);
  backdrop-filter:blur(var(--panel-blur));
}
.announcement-modal .swal2-title{color:var(--tblr-body-color) !important; font-weight:700}
.announcement-modal .swal2-html-container{color:var(--tblr-body-color) !important; text-align:left; line-height:1.6}

@media (max-width:768px){
  .container-xl{margin:.75rem auto 1.25rem; width:calc(100% - 1.5rem); padding:1rem}
  .card-header{padding:.65rem .9rem}
  .card-body{padding:.75rem}
  .table-responsive{font-size:.92rem; border-radius:var(--radius)}
  .btn{padding:.5rem 1rem; font-size:.9rem}
  .page-title .avatar{width:42px; height:42px}
}
@media (max-width:576px){
  .container-xl{margin:.5rem auto 1rem; width:calc(100% - 1rem); padding:.75rem}
  .btn{padding:.42rem .8rem; font-size:.84rem}
  .page-title h2{font-size:1.25rem}
  .page-title .avatar{width:40px; height:40px}
}

.page-title--centered{
  display:grid;
  justify-items:center;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:8px 0 14px;
}
.page-title--centered .avatar{
  width:96px;
  height:96px;
  border-radius:50% !important;
  background-size:cover;
  background-position:center;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  border:3px solid rgba(255,255,255,.6);
}
html[data-bs-theme="dark"] .page-title--centered .avatar{
  border-color:rgba(255,255,255,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.page-title--centered .ptc-name{
  font-weight:800;
  font-size:1.45rem;
  letter-spacing:.2px;
  line-height:1.25;
  margin:0;
  word-break:break-word;
}
.page-title--centered .ptc-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.page-title--centered .ptc-meta .badge{
  font-size:.88rem;
  padding:.4rem .85rem;
  border-radius:var(--radius-pill) !important;
}
@media (max-width:576px){
  .page-title--centered .avatar{width:84px; height:84px}
  .page-title--centered .ptc-name{font-size:1.25rem}
}

.nav-tabs.nav-tabs--centered{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.nav-tabs.nav-tabs--centered .nav-item{flex:0 0 auto}
@media (max-width:576px){
  .nav-tabs.nav-tabs--centered{
    flex-wrap:wrap;
    row-gap:6px;
    padding-inline:.25rem;
  }
  .nav-tabs.nav-tabs--centered .nav-link{padding:.5rem .85rem}
}

.swal2-container,
.swal2-popup,
.swal2-actions,
.swal2-icon,
.swal2-title,
.swal2-html-container{
  transition:none !important;
}
.swal2-container .swal2-show{
  animation:swal2-show .3s cubic-bezier(.2,.8,.2,1) both !important;
}
.swal2-container .swal2-hide{
  animation:swal2-hide .18s ease both !important;
}
.swal2-container,
.swal2-popup{
  will-change:transform,opacity;
  backface-visibility:hidden;
  transform:translateZ(0);
}
@media (prefers-reduced-motion: reduce){
  .swal2-container,
  .swal2-popup,
  .swal2-actions,
  .swal2-icon,
  .swal2-title,
  .swal2-html-container,
  .swal2-timer-progress-bar{
    animation-duration:.25s !important;
    transition-duration:.25s !important;
  }
}

#tab-exchange .table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#exchangeTable{
  width:max-content !important;
  table-layout:auto;
}
#exchangeTable thead th,
#exchangeTable tbody td{
  white-space:nowrap !important;
  vertical-align:middle;
}
#exchangeTable td *{
  white-space:inherit;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
#exchangeTable .cell-gift,
#exchangeTable .cell-remark{
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  width:auto !important;
}
#exchangeTable .cell-time{width:1% !important}
#exchangeTable .cell-status{width:1% !important}
#exchangeTable .cell-actions{
  width:1% !important;
  text-align:left !important;
}
#exchangeTable .table-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:nowrap !important;
  justify-content:flex-start;
  align-items:center;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  white-space:nowrap;
}

/* 让 table 一定在滚动容器里按内容宽度展示；滚动容器本身不留左右空白 */
#exTableWrap,
#tab-exchange .table-responsive{
  display:block;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-left:0 !important;
  border-right:0 !important;
}

/* 保障容器为空时不占位（避免误放置时出现“空白条”） */
#exTableWrap:empty,
#tab-exchange .table-responsive:empty{
  display:none;
}

/* 表格按内容撑开，超出走横向滚动；去除表格默认外边距与间距引起的“视觉左边距” */
#exTableWrap > table,
#tab-exchange .table-responsive > table,
#exchangeTable{
  width:max-content !important;
  min-width:960px;               /* 可按需调大/调小 */
  table-layout:auto;
  margin:0 !important;
  border-collapse:separate;
  border-spacing:0;              /* 避免左侧看起来像有内间距 */
}

/* 整行不换行（含按钮/徽章） */
#exchangeTable thead th,
#exchangeTable tbody td{
  white-space:nowrap !important;
  vertical-align:middle;
}
#exchangeTable td *{
  white-space:inherit;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* 列宽最小化：时间/状态/操作按内容收缩；操作区靠左不留大空白 */
#exchangeTable .cell-time{width:1% !important}
#exchangeTable .cell-status{width:1% !important}
#exchangeTable .cell-actions{width:1% !important; text-align:left !important}
#exchangeTable .table-actions{display:flex; gap:.5rem; flex-wrap:nowrap !important; justify-content:flex-start; align-items:center}

/* 备注/单号按内容展示，避免被旧样式限宽造成视觉空档 */
#exchangeTable .cell-gift,
#exchangeTable .cell-remark{
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  width:auto !important;
}

/* 徽章始终一行 */
.status-pill{display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap}

/* 表格必须放在 .table-responsive 里面：
   <div class="table-responsive"><table id="exchangeTable">…</table></div> */

#tab-exchange .table-responsive{
  display:block;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}

#exchangeTable{
  width:max-content !important;   /* 内容多时按内容宽度 */
  min-width:100% !important;      /* 内容少时至少铺满容器，消除右侧空白 */
  table-layout:auto;
  margin:0 !important;
  border-collapse:separate;
  border-spacing:0;
}

#exchangeTable thead th,
#exchangeTable tbody td{
  white-space:nowrap !important;  /* 全部不换行 */
  vertical-align:middle;
}

#exchangeTable td *{
  white-space:inherit;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* 按内容收缩的列，避免产生大空档 */
#exchangeTable .cell-time{width:1% !important}
#exchangeTable .cell-status{width:1% !important}
#exchangeTable .cell-actions{width:1% !important; text-align:left !important}

/* 操作按钮一行排，靠左更紧凑（如需靠右改成 flex-end） */
#exchangeTable .table-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:nowrap !important;
  justify-content:flex-start;
  align-items:center;
}

/* 备注/单号按内容展示，不做限制 */
#exchangeTable .cell-gift,
#exchangeTable .cell-remark{
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  width:auto !important;
}

/* 徽章绝不折行 */
.status-pill{display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap}

/* 修复头像尺寸 - 添加到你的 CSS 中 */
.page-title .avatar-container {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.page-title .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 如果是页面标题居中的情况 */
.page-title--centered .avatar-container {
    width: 96px !important;
    height: 96px !important;
}

.page-title--centered .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.6);
}

html[data-bs-theme="dark"] .page-title--centered .avatar-img {
    border-color: rgba(255,255,255,.18);
}