/* admin.css (pretty version) */

/* ===== Page ===== */
body{
  background:#f6f7fb;
}

.wrap{
  max-width:1180px;
  margin:90px auto 40px;
  padding:0 16px;
}

/* ===== Topbar ===== */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* ===== Layout helpers ===== */
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center
}
.row > *{flex:0 0 auto}

/* ===== Buttons ===== */
.btn{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:8px 12px;
  background:#fff;
  cursor:pointer;
  transition: box-shadow .15s ease, transform .05s ease, background .15s ease;
}
.btn:hover{
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}

.btn.primary{background:#111;color:#fff;border-color:#111}
.btn.danger{background:#c62828;color:#fff;border-color:#c62828}

/* 小一點的按鈕（如果你之後想用） */
.btn.sm{
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
}

/* ===== Pills ===== */
.pill{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(0,0,0,.03);
}
.pill.bad{border-color:rgba(198,40,40,.35);background:rgba(198,40,40,.08);color:#8b1c1c}
.pill.ok{border-color:rgba(25,135,84,.35);background:rgba(25,135,84,.08);color:#0f5132}

/* ===== Messages ===== */
.msg{
  margin-top:10px;
  font-size:13px;
  padding:10px 12px;
  border-radius:12px;
  display:none;
  white-space:pre-line
}
.msg.err{display:block;background:rgba(220,53,69,.10);border:1px solid rgba(220,53,69,.25);color:#7a1c1c}
.msg.ok{display:block;background:rgba(25,135,84,.10);border:1px solid rgba(25,135,84,.25);color:#135b2c}

/* ===== Mono ===== */
.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px
}

/* ===== Tabs ===== */
.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 0;
}
.tab{
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  transition: box-shadow .15s ease, background .15s ease;
}
.tab:hover{ box-shadow:0 6px 16px rgba(0,0,0,.08); }
.tab.is-active{
  background:rgba(76,111,191,.12);
  border-color:rgba(76,111,191,.35);
  color:#2f4fa8;
  font-weight:800;
}

.panel{display:none;margin-top:12px}
.panel.is-active{display:block}

/* ===== Forms ===== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 900px){ .grid2{grid-template-columns:1fr;} }

.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:13px;color:rgba(0,0,0,.65)}

.input, .select, .textarea{
  height:42px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  padding:0 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.textarea{height:auto;min-height:90px;padding:10px 12px;resize:vertical}
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(76,111,191,.55);
  box-shadow: 0 0 0 4px rgba(76,111,191,.12);
}

.checks{display:flex;gap:10px;flex-wrap:wrap}
.check{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:rgba(0,0,0,.75);
  padding:6px 10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  background:#fff;
}

.hr{height:1px;background:rgba(0,0,0,.08);margin:14px 0}

.preview{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.preview img{width:86px;height:86px;object-fit:cover;border-radius:12px;border:1px solid rgba(0,0,0,.08)}
.small{font-size:12px;color:rgba(0,0,0,.55)}

/* ===== Actions ===== */
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ===== Pretty Tables ===== */
/* 你的 HTML 要用 <table class="data-table"> 才會套這些 */
.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:hidden;
}

.data-table thead th{
  background:#fafafa;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:12px 12px;
  text-align:left;
  font-size:12.5px;
  letter-spacing:.3px;
  color:rgba(0,0,0,.60);
  white-space:nowrap;
}

.data-table td{
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:14px 12px;
  text-align:left;
  font-size:14px;
  vertical-align:middle;
  max-width:360px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.data-table tbody tr:nth-child(even){ background:rgba(0,0,0,.015); }
.data-table tbody tr:hover{ background:rgba(76,111,191,.06); }

/* 最後一列不要多一條線 */
.data-table tbody tr:last-child td{ border-bottom:0; }

/* 手機版：表格可橫向捲動 */
@media (max-width: 980px){
  .data-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .data-table thead th,
  .data-table td{
    white-space:nowrap;
  }
}
  @media (max-width: 980px){
  .panel{ overflow-x:auto; }          /* 讓整個面板可以橫向捲動 */
  .data-table{ min-width: 980px; }    /* 表格維持 table 排版，不要爆掉 */
}

/* ===== Order status pills ===== */
.pill.st-pending{
  border-color: rgba(245, 158, 11, .45);
  background: rgba(245, 158, 11, .12);
  color: #92400e;
}
.pill.st-paid{
  border-color: rgba(59, 130, 246, .45);
  background: rgba(59, 130, 246, .12);
  color: #1e3a8a;
}
.pill.st-shipping{
  border-color: rgba(168, 85, 247, .45);
  background: rgba(168, 85, 247, .12);
  color: #5b21b6;
}
.pill.st-done{
  border-color: rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .12);
  color: #166534;
}
.pill.st-cancel{
  border-color: rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .12);
  color: #7f1d1d;
}

/* =========================
 * Bigger UI + nicer actions
 * 直接貼在 admin.css 最下面
 * ========================= */

/* 1) 整體放大一點 */
:root{
  --ui-scale: 1.08; /* 想更大：1.12；想更小：1.05 */
}

.wrap{
  max-width: 1320px;   /* 原本 1180，放大容器 */
}

.card{
  padding: 20px;       /* 原本 16 */
  border-radius: 22px; /* 更圓一點 */
}

body{
  font-size: calc(14px * var(--ui-scale));
}

/* 2) 按鈕/輸入框放大 */
.btn{
  padding: calc(9px * var(--ui-scale)) calc(14px * var(--ui-scale));
  border-radius: calc(12px * var(--ui-scale));
  font-size: calc(14px * var(--ui-scale));
}

.tab{
  height: calc(42px * var(--ui-scale));
  padding: 0 calc(16px * var(--ui-scale));
  border-radius: 999px;
  font-size: calc(14px * var(--ui-scale));
}

.input, .select, .textarea{
  height: calc(44px * var(--ui-scale));
  border-radius: calc(12px * var(--ui-scale));
  font-size: calc(14px * var(--ui-scale));
}

.pill{
  padding: calc(6px * var(--ui-scale)) calc(12px * var(--ui-scale));
  font-size: calc(12px * var(--ui-scale));
}

/* 3) 表格也放大一點，且欄位看起來更舒服 */
.data-table thead th{
  padding: 14px 14px;
  font-size: calc(12.5px * var(--ui-scale));
}

.data-table td{
  padding: 16px 14px;
  font-size: calc(14px * var(--ui-scale));
}

/* 4) ✅ 讓「操作」按鈕變好看：同一列排、可換行但整齊 */
.data-table td:last-child{
  width: 240px;              /* 操作欄固定寬度，避免擠來擠去 */
}

.actions{
  display: flex;
  flex-wrap: wrap;           /* 不夠寬就換行 */
  gap: 10px;                 /* 按鈕間距 */
  justify-content: flex-start;
}

.actions .btn{
  padding: 10px 14px;        /* 讓操作按鈕看起來像一組 */
  font-size: calc(13.5px * var(--ui-scale));
  border-radius: 14px;
}

/* 讓「重設密碼連結」不要變超長：限制寬度自動省略 */
.actions .btn[data-act="reset_link"]{
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 停用/解停用：小一點一致 */
.actions .btn[data-act="ban"],
.actions .btn[data-act="unban"]{
  min-width: 72px;
}

/* 刪除：保持醒目但不會太巨大 */
.actions .btn.danger{
  min-width: 72px;
}

/* 5) 小螢幕時：整體不要爆版，允許 table 區塊橫向捲 */
@media (max-width: 980px){
  .panel{ overflow-x: auto; }
  .data-table{ min-width: 1100px; }
}
/* =========================
 * Product Edit Modal
 * ========================= */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

.modal__card{
  position: relative;
  width: min(980px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;

  margin: 12px auto;
  background:#fff;
  border-radius: 18px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.25);
  padding: 16px;
}

.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
/* =========================
 * Product Edit: images list UI
 * ========================= */

.imglist{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}

.imgrow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
}

.imgrow__thumb{
  width:64px;
  height:64px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  object-fit:cover;
  background:#fafafa;
  flex:0 0 auto;
}

.imgrow__meta{
  flex:1 1 auto;
  min-width:0;
}

.imgrow__url{
  font-size:12px;
  color:rgba(0,0,0,.60);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.imgrow__hint{
  font-size:12px;
  opacity:.65;
  margin-top:4px;
}

.imgrow__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex:0 0 auto;
}

.imgrow__actions .btn{
  padding:6px 10px;
  border-radius:12px;
  font-size:13px;
}

.imgrow.is-main{
  border-color: rgba(76,111,191,.35);
  box-shadow: 0 0 0 3px rgba(76,111,191,.10);
}

.imgbadge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(76,111,191,.35);
  background: rgba(76,111,191,.10);
  color:#2f4fa8;
  margin-right:8px;
}

/* 手機：讓按鈕掉到下一行，不要爆版 */
@media (max-width: 640px){
  .imgrow{
    align-items:flex-start;
  }
  .imgrow__actions{
    width:100%;
    justify-content:flex-start;
    margin-top:6px;
  }
}
/* =========================
 * RWD (mobile/tablet)
 * ========================= */
:root{
  --admin-pad: 18px;
}

/* 讓容器在小螢幕有舒服邊距 */
@media (max-width: 960px){
  .wrap{ padding: 18px; }
  .card{ padding: 18px; }
}

/* ===== Topbar / Tabs ===== */
@media (max-width: 768px){
  .topbar{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .topbar .row{ width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }

  /* tabs 太多：改成橫向可滑 */
  .tabs{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 10px;
    padding-bottom: 6px;
  }
  .tabs::-webkit-scrollbar{ height: 6px; }
  .tabs .tab{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ===== Forms grid ===== */
@media (max-width: 768px){
  .grid2{
    grid-template-columns: 1fr !important;
  }
  /* 你有很多 field 用 grid-column:1/-1；在 1 欄下不用特別處理也 OK */
  .field .row{ flex-wrap: wrap; }
  .field .input,
  .field .select{
    width: 100%;
  }
}

/* ===== Tables: 手機直接橫滑，不要硬擠 ===== */
@media (max-width: 768px){
  .data-table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
  }
  .data-table table{ width: 100%; }
  .data-table th,
  .data-table td{
    white-space: nowrap;
  }

  /* 操作按鈕區：直排更好按 */
  .actions{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .actions .btn,
  .actions .select{
    width: 100%;
  }
}

/* ===== Preview images: 改成比較小格 ===== */
@media (max-width: 768px){
  .preview{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .preview img{
    width: 100%;
    height: 74px;
    object-fit: cover;
    border-radius: 12px;
  }
}

/* ===== Modal: 手機全螢幕 + 內容可捲 ===== */
@media (max-width: 768px){
  .modal__card{
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    overflow: auto !important; /* ✅ 讓內容可以滑 */
  }
  .modal__head{
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding: 14px 14px;
  }
  .modal__card .grid2,
  .modal__card .field{
    padding-left: 14px;
    padding-right: 14px;
  }

  /* 底部按鈕固定，手機好按 */
  .modal__card .row[style*="justify-content:flex-end"]{
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 14px;
    border-top: 1px solid rgba(0,0,0,.08);
    z-index: 3;
  }
  .modal__card .row[style*="justify-content:flex-end"] .btn{
    flex: 1 1 auto;
  }
}

/* ===== imglist: 手機縮成直排，按鈕換行 ===== */
@media (max-width: 768px){
  .imgrow{
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px;
  }
  .imgrow__thumb{
    width: 74px;
    height: 74px;
    border-radius: 14px;
    object-fit: cover;
  }
  .imgrow__actions{
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .imgrow__actions .btn{
    flex: 1 1 46%;
  }
}
/* =========================
 * Home Image Blocks (pretty)
 * ========================= */
.homeimg-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.homeimg-title{
  font-weight:900;
  font-size:18px;
}
.homeimg-sub{
  opacity:.7;
  margin-top:6px;
}

.homeimg-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){
  .homeimg-grid{ grid-template-columns: 1fr; }
}

.homeimg-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background: linear-gradient(180deg, #fff, #fbfbfd);
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  padding:16px;
}

.homeimg-card-title{
  font-weight:900;
  margin-bottom:10px;
}

.homeimg-uploader{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.homeimg-uploader .input{
  flex: 1 1 420px;
  min-width: 260px;
}
.homeimg-uploader .btn{
  flex: 0 0 auto;
}

.homeimg-hint{
  margin-top:8px;
  opacity:.7;
}

.homeimg-list-wrap{
  padding: 2px;
}
.homeimg-list-title{
  font-weight:900;
  margin: 10px 0 6px;
}

.block-row{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:#fff;
  margin: 10px 0;
}
.block-thumb{
  width:86px;
  height:86px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  object-fit:cover;
  background:#fafafa;
  flex:0 0 auto;
}
.block-meta{
  flex:1 1 auto;
  min-width:0;
}
.block-meta .mono{
  opacity:.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.block-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width: 640px){
  .block-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .block-actions{
    width:100%;
    justify-content:flex-start;
  }
}
/* =========================
 * Homeimg lists -> Grid cards (2~3 per row) + RWD
 * 直接貼在 admin.css 最下面
 * ========================= */

/* 1) 三個列表容器改成 grid */
#listEvent, #listDeal, #listTribe{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 桌機 3 欄 */
  gap: 12px;
  margin-top: 10px;
}

/* 平板 2 欄 */
@media (max-width: 1024px){
  #listEvent, #listDeal, #listTribe{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 手機 1 欄 */
@media (max-width: 640px){
  #listEvent, #listDeal, #listTribe{
    grid-template-columns: 1fr;
  }
}

/* 2) 卡片化：把原本橫條 block-row 變成直式卡片 */
#listEvent .block-row,
#listDeal .block-row,
#listTribe .block-row{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;                 /* 交給 grid gap 控制間距 */
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

/* 3) 圖片變成卡片上方大圖 */
#listEvent .block-thumb,
#listDeal .block-thumb,
#listTribe .block-thumb{
  width: 100%;
  height: 160px;             /* 你想大一點可調 180 */
  border-radius: 16px;
  object-fit: cover;
}

/* 4) 文字區 */
#listEvent .block-meta,
#listDeal .block-meta,
#listTribe .block-meta{
  min-width: 0;
}

/* 5) 按鈕區：同列排、在小螢幕變兩顆一排更好按 */
#listEvent .block-actions,
#listDeal .block-actions,
#listTribe .block-actions{
  justify-content: flex-start;
  gap: 10px;
}

@media (max-width: 640px){
  #listEvent .block-actions .btn,
  #listDeal .block-actions .btn,
  #listTribe .block-actions .btn{
    flex: 1 1 45%;
  }
  /* 刪除按鈕可以獨佔一排（更安全更好按） */
  #listEvent .block-actions .btn.danger,
  #listDeal .block-actions .btn.danger,
  #listTribe .block-actions .btn.danger{
    flex: 1 1 100%;
  }
}
/* ✅ 關掉 topbar sticky：不要跟著滑 */
@media (max-width: 980px){
  .topbar{
    position: static !important;
    top: auto !important;
    backdrop-filter: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}
/* ✅ 手機：整體上方不要空太多 */
@media (max-width: 768px){
  .wrap{
    margin: 16px auto 24px !important; /* 原本 90px 太高 */
    padding: 12px !important;
  }
  .card{
    padding: 14px !important;
  }
}

/* ✅ 手機：把「對象」那行 input + 一鍵按鈕改成更好按 */
@media (max-width: 520px){
  #pAudience{ width: 100%; }
  #btnAudienceAll{ width: 100%; }

  #peAudience{ width: 100%; }
  #btnPeAudienceAll{ width: 100%; }
}

/* ✅ 手機：你 HTML inline 寫了 min-width:420px，會讓小螢幕很卡 */
@media (max-width: 520px){
  #pCustomSizes,
  #peCustomSizes{
    min-width: 0 !important;
    width: 100% !important;
  }
}
/* =========================
 * Edit Modal RWD polish
 * 貼在 admin.css 最底部
 * ========================= */

@media (max-width: 520px){
  /* 整個 modal 內容邊距更舒服 */
  .modal__card{
    padding: 12px !important;
  }

  /* Header：改成上下排列，避免標題被「關閉」擠爆 */
  .modal__head{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 12px !important; /* 你原本 sticky 有 padding，這裡統一 */
  }

  /* 讓標題區塊可換行，不要硬撐一行 */
  #pEditTitle{
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  /* ID 那行：允許換行、不會跑版 */
  #pEditSub{
    white-space: normal !important;
    word-break: break-all !important;
  }

  /* 右上角關閉按鈕：改成滿寬好按，也不擠標題 */
  #pEditClose{
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
  }

  /* 內容區左右 padding 一致（你原本有給 grid/field padding，這裡補齊） */
  .modal__card .hr{
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  /* inputs/textarea：確保滿寬，不會有奇怪 min-width 影響 */
  .modal__card .input,
  .modal__card .select,
  .modal__card .textarea{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 底部按鈕列：兩顆平均分，間距固定 */
  .modal__card .row[style*="justify-content: flex-end"]{
    gap: 10px !important;
  }
  #pEditCancel,
  #pEditSave{
    flex: 1 1 0 !important;
    height: 44px !important;
  }
}
/* ✅ 修正：modal 底部 savebar 跑版/超出視窗 */
@media (max-width: 768px){
  .modal__card{
    overflow-x: hidden !important;   /* 避免任何內容撐出橫向 */
  }

  .modal__card .savebar{
    position: sticky;
    left: 0; right: 0; bottom: 0;   /* ✅ 關鍵：鎖住左右，不讓它跑出去 */
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    background: #fff;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); /* iPhone 底部安全區 */
    border-top: 1px solid rgba(0,0,0,.08);
    z-index: 5;
  }

  .modal__card .savebar .btn{
    flex: 1 1 0;
    height: 44px;
  }

  /* file input 的「未選擇任何檔案」太長時，不要撐爆 */
  .modal__card input[type="file"]{
    max-width: 100%;
  }
}
/* ✅ 桌機：顯示「關閉」文字 */
#pEditClose .close-x{ display:none; }

/* ✅ 手機：改成右上角小 X，不佔 header 空間 */
@media (max-width: 520px){
  #pEditClose{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: grid;
    place-items: center;
  }

  #pEditClose .close-text{ display:none; }
  #pEditClose .close-x{
    display:block;
    font-size: 18px;
    line-height: 1;
  }

  /* header 變成相對定位，才能讓 X 定位在右上角 */
  .modal__head{ position: relative; }
}
/* variants list */
.variants .vrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  margin:8px 0;
  background:#fff;
}
.variants .vrow .input{
  height:36px;
}
.variants .vrow .vlabel{ width:180px; }
.variants .vrow .vnum{ width:120px; }
.variants .vrow .vstock{ width:110px; }
/* ✅ 商品簡介/尺寸：允許換行，不要 ellipsis */
.td-wrap{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  max-width: none !important;
}

/* ✅ 操作欄固定寬，讓中間欄位可以吃掉剩餘空間 */
.data-table th:last-child,
.data-table td:last-child{
  width: 220px;
}
.data-table{ table-layout: fixed; width: 100%; }

/* =========================
 * Popup Ad Admin UI
 * 貼到 admin.css 最底部
 * ========================= */

/* 讓這一塊看起來像一個「設定模組」 */
.ad-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ad-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.ad-title{
  font-weight:900;
  font-size:18px;
}

.ad-sub{
  opacity:.72;
  margin-top:6px;
}

/* 左右分欄：設定 / 預覽 */
.ad-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:12px;
  align-items:start;
}

@media (max-width: 980px){
  .ad-grid{ grid-template-columns: 1fr; }
}

/* 卡片（沿用你整體風格，但更像設定區塊） */
.ad-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background: linear-gradient(180deg, #fff, #fbfbfd);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  padding:16px;
}

.ad-card .hr{ margin: 12px 0; }

/* 右側預覽框 */
.ad-preview{
  position: sticky;
  top: 12px; /* 會黏在 card 裡面上方 */
}

@media (max-width: 980px){
  .ad-preview{ position: static; }
}

.ad-preview-box{
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(0,0,0,.02);
  border-radius: 18px;
  padding: 14px;
}

.ad-preview-title{
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ad-preview-note{
  margin-top:6px;
  font-size:12px;
  opacity:.65;
}

/* 預覽：模擬彈窗 */
.ad-modal-mock{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
  overflow:hidden;
  background:#fff;
}
/* ✅ 預覽大圖：不裁切（contain）+ 用比例控制高度 */
.ad-modal-mock__hero{
  width:100%;
  aspect-ratio: 16 / 9;       /* 想更長：改 3/1 或 5/2 */
  background:#f3f4f6;
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.ad-modal-mock__hero img{
  width:100%;
  height:100%;
  object-fit: contain;         /* ✅ 關鍵：不裁切 */
  display:block;
}

.ad-modal-mock__body{
  padding: 12px 14px 14px;
}

.ad-modal-mock__text{
  font-size:14px;
  line-height:1.6;
  color: rgba(0,0,0,.82);
  white-space: pre-line;
}

.ad-modal-mock__cta{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.ad-modal-mock__cta .btn{
  flex: 1 1 140px;
}

/* 小縮圖：顯示目前上傳的圖 */
.ad-thumb{
  width:100%;
  height: 160px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  object-fit: cover;
  background:#fafafa;
}

/* 啟用開關：比 checkbox 好看 */
.ad-switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background:#fff;
}

.ad-switch .label{
  margin:0;
  font-weight:800;
  color: rgba(0,0,0,.78);
}

.ad-switch .small{
  margin-top:4px;
}

/* switch toggle UI */
.toggle{
  position: relative;
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.10);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
  flex: 0 0 auto;
}

.toggle::after{
  content:"";
  position:absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .15s ease;
}

/* 只要你在 toggle 外層加 .is-on 就會變成開啟 */
.toggle.is-on{
  background: rgba(25,135,84,.35);
  border-color: rgba(25,135,84,.45);
}
.toggle.is-on::after{
  transform: translateX(24px);
}

/* actions 按鈕列 */
.ad-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ad-actions .btn{
  min-width: 120px;
}

/* 小提醒區塊（例如顯示「上次更新時間」之類） */
.ad-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.08);
}
.ad-meta .mono{ opacity:.75; }

/* 手機：按鈕變滿寬比較好按 */
@media (max-width: 520px){
  .ad-actions{ justify-content:stretch; }
  .ad-actions .btn{ width:100%; }
}
.ad-modal-mock__body{
  padding: 12px 16px 16px;
}

.ad-modal-mock__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}