/* ============================================================
   後台改版(20261029):站長小管家 + 總覽數字卡 + 分頁 + 商品卡 + 郵件預覽 + 帳號搜尋
   沿用全站變數(--accent / --panel / --field / --border / --muted …),深色主題自動跟著變。
   ============================================================ */
#v-admin .adm-hero{display:flex;align-items:center;gap:16px;padding:16px 20px;margin:4px 0 16px;border-radius:var(--radius);
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),var(--panel) 70%);border:1px solid var(--border)}
#v-admin .adm-mascot{width:64px;height:64px;flex-shrink:0;animation:admBob 3.2s ease-in-out infinite}
#v-admin .adm-mascot svg,#v-admin .adm-mascot img{width:100%;height:100%;display:block}
@keyframes admBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
#v-admin .adm-hero-t{display:flex;flex-direction:column;gap:2px}
#v-admin .adm-hero-t b{font-size:20px;color:var(--text)}
#v-admin .adm-hero-t span{color:var(--muted);font-size:14px}
#v-admin .adm-hero-t em{font-style:normal;font-weight:900;color:var(--accent-ink)}

/* 分頁:底線(色塊)滑到目前分頁 */
#v-admin .adm-tabs{position:relative;display:flex;gap:4px;margin:0 0 18px;padding:4px;border-radius:14px;background:var(--field);
  border:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
#v-admin .adm-tabs::-webkit-scrollbar{display:none}
#v-admin .adm-tabs button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:9px 14px;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;font-weight:700;cursor:pointer;transition:color .2s}
#v-admin .adm-tabs button:hover{color:var(--text)}
#v-admin .adm-tabs button.on{color:var(--accent-fg,#fff)}
#v-admin .adm-tabs button:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
#v-admin .adm-ink{position:absolute;z-index:0;top:4px;left:0;height:calc(100% - 8px);border-radius:10px;background:var(--accent);
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1)}
#v-admin .adm-pane{display:none}
#v-admin .adm-pane.show{display:block}
#v-admin .adm-pane.enter{animation:admIn .28s ease-out}
@keyframes admIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 總覽數字卡(點了跳到對應分頁) */
#v-admin .adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
#v-admin .adm-stat{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:12px;
  text-align:left;padding:16px;border-radius:16px;border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;cursor:pointer;
  transition:transform .18s,box-shadow .18s,border-color .18s}
#v-admin .adm-stat:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 20px rgba(16,32,26,.10)}
#v-admin .adm-stat:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#v-admin .adm-stat-i{grid-row:1/4;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-ink);font-size:18px}
#v-admin .adm-stat-l{font-size:13px;color:var(--muted);font-weight:700}
#v-admin .adm-stat-v{font-size:26px;font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums;position:relative;z-index:1}
#v-admin .adm-stat-n{font-size:12.5px;color:var(--muted);position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#v-admin .adm-stat-bg{position:absolute;right:-10px;bottom:-10px;width:110px;height:70px;object-fit:cover;border-radius:12px;opacity:.5;
  transform:rotate(-6deg);image-rendering:pixelated;pointer-events:none}
#v-admin .adm-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:14px}
#v-admin .adm-q{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:16px;border:1px dashed var(--border);
  background:none;color:var(--text);font:inherit;cursor:pointer;transition:background .18s,border-color .18s}
#v-admin .adm-q:hover{background:var(--accent-soft);border-color:var(--accent)}
#v-admin .adm-q:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#v-admin .adm-q img{width:36px;height:36px;image-rendering:pixelated;flex-shrink:0}
#v-admin .adm-q span{display:flex;flex-direction:column;font-size:12.5px;color:var(--muted)}
#v-admin .adm-q b{font-size:15px;color:var(--text)}

/* 商店:商品卡 */
#v-admin .adm-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
#v-admin .adm-item{position:relative;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;gap:12px;align-items:center;padding:14px;
  border-radius:14px;border:1px solid var(--border);background:var(--field)}
#v-admin .adm-item-img{width:48px;height:48px;image-rendering:pixelated;background:var(--panel);border-radius:12px;padding:6px;box-sizing:border-box}
#v-admin .adm-item-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
#v-admin .adm-item-t b{font-size:15px;white-space:nowrap}
#v-admin .adm-item-t small{width:100%;color:var(--muted);font-size:12px}
#v-admin .adm-price{grid-column:1/3;display:flex;align-items:center;gap:8px;margin-right:86px;padding:0 10px;height:38px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel);color:var(--d-heart,#f2506e)}
#v-admin .adm-price input{border:0;background:none;width:100%;font:inherit;font-weight:800;color:var(--text);outline:none;padding:0}
#v-admin .adm-set{position:absolute;right:14px;bottom:14px;height:38px;min-width:76px;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  border:0;border-radius:10px;background:var(--accent);color:var(--accent-fg,#fff);font:inherit;font-weight:800;cursor:pointer}
#v-admin .adm-set:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#v-admin .adm-set i{display:none}

/* 儲存成功:按鈕變打勾、彈一下 */
#v-admin .adm-ok{animation:admPop .45s cubic-bezier(.34,1.56,.64,1)}
#v-admin .adm-set.adm-ok i{display:inline}
#v-admin .adm-set.adm-ok span{display:none}
@keyframes admPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

/* 郵件:左填寫、右即時預覽 */
#v-admin .adm-mail{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
#v-admin .adm-mail-prev{position:sticky;top:12px;padding:16px;border-radius:16px;background:var(--field);border:1px dashed var(--border)}
#v-admin .adm-prev-lbl{font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:10px}
#v-admin .adm-mail-prev .mail-card{cursor:default}
#v-admin .adm-prev-to{margin-top:10px;font-size:12.5px;color:var(--muted)}

/* 帳號:搜尋 + 頭像字母 */
#v-admin .adm-users-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap}
#v-admin .adm-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--field);color:var(--muted)}
#v-admin .adm-search input{border:0;background:none;outline:none;font:inherit;color:var(--text);width:160px}
#v-admin .adm-ava{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;margin-right:8px;
  background:var(--accent-soft);color:var(--accent-ink);font-weight:900;font-size:12.5px;vertical-align:middle}

@media (prefers-reduced-motion:reduce){
  #v-admin .adm-mascot,#v-admin .adm-pane.enter,#v-admin .adm-ok{animation:none}
  #v-admin .adm-ink,#v-admin .adm-stat{transition:none}
}
@media (max-width:760px){
  #v-admin .adm-hero{padding:12px 14px}
  #v-admin .adm-mascot{width:48px;height:48px}
  #v-admin .adm-hero-t b{font-size:17px}
  #v-admin .adm-stats{grid-template-columns:1fr 1fr;gap:8px}
  #v-admin .adm-stat{grid-template-columns:1fr;padding:12px}
  #v-admin .adm-stat-i{grid-row:auto;width:32px;height:32px;font-size:15px;margin-bottom:6px}
  #v-admin .adm-stat-v{font-size:22px}
  #v-admin .adm-mail{grid-template-columns:1fr}
  #v-admin .adm-mail-prev{position:static}
  #v-admin .adm-search input{width:120px}
}
#v-admin .adm-stat-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#v-admin .adm-stat > span{min-width:0}