/* 右上角套装名泡泡样式 */
.suitname-bubble {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 14px;
  color: var(--fg);
  margin-left: 16px;
  min-width: 120px;
  text-align: right;
  display: inline-block;
}
    :root{
      /* 默认 纯黑(56, 54, 61) */
      --bg:#0f1115; --fg:#eaeef2; --muted:#a8b0ba; --acc:#6ea8fe;
      --panel:#10131b; --border:#20283a;
      --btn-bg:#141a27; --btn-border:#273148;
      --input-bg:#111520;
      --stage:#0b0e14;
      --row-h: 40px; /* 列表行高度，用于固定分页垂直位置 */
    }
    /* 中灰 */
    :root[data-theme="ash"]{
      /* 背景按你要求：R160 G163 B164 */
      --bg: rgb(160,163,164);              /* #A0A3A4 中灰底 */
      --fg: #1f2328;                        /* 深色文字，增强对比 */
      --muted: #3b424a;                     /* 次级文字 */
      --acc: #0b57d0;                       /* 强调色（你可自选） */
    
      /* 卡片/面板与边框（比背景略浅，层次更清晰） */
      --panel: #e6e8ea;                     /* 浅灰面板 */
      --border: #b8bcc0;                    /* 边框浅灰 */
    
      /* 按钮/输入框 */
      --btn-bg: #eef0f1;
      --btn-border: #c3c7cc;
      --input-bg: #f3f5f6;
    
      /* 画布背景（stage）：略浅，避免一整块深灰显得闷） */
      --stage: rgb(160,163,164);
    }

    /* 深灰 */
    :root[data-theme="deepgray"]{
      --bg: rgb(56,54,61);                  /* #38363D 深灰底 */
      --fg: #e8eaed;                        /* 浅色文字 */
      --muted: #9aa0a6;                     /* 次级文字 */
      --acc: #8ab4f8;                       /* 强调色 */
    
      /* 卡片/面板与边框 */
      --panel: #292831;                     /* 更深的面板 */
      --border: #4a4850;                    /* 边框 */
    
      /* 按钮/输入框 */
      --btn-bg: #3a3842;
      --btn-border: #4a4850;
      --input-bg: #2f2d36;
    
      /* 画布背景 */
      --stage: rgb(56,54,61);
    }

    /* 素白 */
    :root[data-theme="white"]{
      --bg:#f7f7f5; --fg:#1f2328; --muted:#57606a; --acc:#2563eb;
      --panel:#ffffff; --border:#d0d7de; --btn-bg:#e8eaed; --btn-border:#c9cdd1;
      --input-bg:#f8f9fb; --stage:#f2f4f7;
    }


    
    *{box-sizing:border-box}
    /* 顶部：用变量替换 */
    body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",微软雅黑,"PingFang SC",sans-serif}
    header{
      position:sticky;top:0;
      /* 原：background: rgba(15,17,21,.9); */
      background: color-mix(in oklab, var(--bg) 92%, black 8%);
      backdrop-filter: blur(6px);z-index:10;
      /* 原：#1b1f2a */
      border-bottom:1px solid var(--border)
    }
    .wrap{max-width:1200px;margin:0 auto;padding:12px 16px}
    .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    input[type=search]{
      flex: 0 1 50%;
      max-width: 480px;
      min-width: 240px;
      padding:10px 12px;
      border:1px solid var(--btn-border);
      border-radius:10px;background:var(--input-bg);color:var(--fg);outline:none
    }
    select#fromWhereFilter,
    select#singleClothFromWhereFilter,
    select#singleClothTypeFilter{
      flex: 1;
      max-width: 400px;
      padding: 10px 12px;
      border: 1px solid var(--btn-border);
      border-radius: 10px;
      background: var(--input-bg);
      color: var(--fg);
      outline: none;
      cursor: pointer;
    }
    select#fromWhereFilter:hover,
    select#singleClothFromWhereFilter:hover,
    select#singleClothTypeFilter:hover{
      border-color: var(--acc);
    }
    select#fromWhereFilter option,
    select#singleClothFromWhereFilter option,
    select#singleClothTypeFilter option{
      background: var(--input-bg);
      color: var(--fg);
    }
    @media (max-width: 960px){
      /* 关键：不要让输入框生长去占满 */
      input[type=search]{
        flex: 0 0 50% !important;  /* grow:0, shrink:0, basis:50% */
        width: 50%;
        max-width: none;
        min-width: 0;              /* 允许缩到一半，避免被 min-width 顶住 */
      }
      /* 手机端限制服装分类选择框宽度 */
      select#fromWhereFilter,
      select#singleClothFromWhereFilter,
      select#singleClothTypeFilter{
        max-width: 33% !important;
        min-width: 120px;
      }
    }


    input[type=search]::placeholder{color:var(--muted)}
    /* 原：.pill 边框 #2a3140 + 文字 #c7cfdb */
    .pill{padding:8px 12px;border:1px solid var(--btn-border);border-radius:999px;color:var(--fg)}
    
    /* 主题和语言切换按钮 */
    .theme-btn{
      padding:10px 16px;
      background:var(--btn-bg);
      border:1px solid var(--btn-border);
      border-radius:10px;
      color:var(--fg);
      cursor:pointer;
      font-size:14px;
      font-weight:600;
      white-space:nowrap;
      transition: all 0.2s ease;
    }
    .theme-btn:hover{
      background:color-mix(in oklab, var(--btn-bg) 85%, var(--fg) 15%);
    }
    .theme-btn:active{
      transform:scale(0.96);
    }
    
    main{display:grid;grid-template-columns:320px 1fr;gap:16px}
    @media (max-width: 960px){ main{grid-template-columns:1fr} }

    @media (max-width: 640px) {
      input[type=search] {
        width: 25% !important;
        min-width: 0 !important;
        max-width: 160px !important;
      }
    }
    
    /* 面板：原 #10131b / #20283a / 标题色 #cdd6e0 */
    .panel{background:var(--panel);border:1px solid var(--border);border-radius:14px}
    .panel h3{margin:0;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--fg)}
    
  .list{max-height:70vh;overflow:auto;padding:8px;min-height:calc(var(--row-h) * 10 + 16px)}
    
    /* 列表项：原 hover #141a27；name #dfe6f3；id #8b95a5 */
  .item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;min-height:var(--row-h)}
    .item:hover{background: color-mix(in oklab, var(--panel) 85%, var(--fg) 15%)}
    /* 当前选中项高亮 */
    .item.active{
      background: color-mix(in oklab, var(--panel) 72%, var(--acc) 28%);
      outline: 2px solid var(--acc);
    }

    .item .name{color:var(--fg)}
    .item .id{color:var(--muted);font-variant-numeric:tabular-nums}
    
    /* 分页按钮：原 #141a27 / #273148 / #c7cfdb */
    .pagination{display:flex;gap:6px;flex-wrap:wrap;padding:10px}
    .pagination.fixed{display:flex;justify-content:space-between;align-items:center}
    .pagination .pager-left,
    .pagination .pager-center,
    .pagination .pager-right{display:flex;gap:6px;align-items:center}
    .pagination button{
      padding:6px 10px;background:var(--btn-bg);
      border:1px solid var(--btn-border);border-radius:8px;color:var(--fg);cursor:pointer
    }
    .pagination button[disabled]{opacity:.5;cursor:not-allowed}
    
    /* 右侧展示区：边框 #20283a，画布 #0b0e14 */
    .viewer{display:grid;grid-template-rows:auto 1fr auto}
    .stage-wrap{position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
    canvas{width:100%;height:70vh;display:block;background:var(--stage)}
    
    /* 画布内右上角工具栏 */
    .stage-wrap{ position:relative; } /* 已有就不用改 */
    .toolbar{
      position:absolute; top:10px; right:10px; z-index:5;
      display:flex; gap:8px;
      padding:6px;
      background:color-mix(in oklab, var(--btn-bg) 75%, transparent 25%);
      border:1px solid var(--btn-border);
      border-radius:12px;
      backdrop-filter: blur(6px);
    }
    .toolbar button{
      width:36px; height:36px;
      display:grid; place-items:center;
      font-size:18px; line-height:1;
      border:1px solid var(--btn-border);
      background:var(--btn-bg); color:var(--fg);
      border-radius:10px; cursor:pointer;
    }
    .toolbar button:hover{ background:color-mix(in oklab, var(--btn-bg) 85%, var(--fg) 15%); }
    .toolbar button:active{ transform:scale(0.96); }



    /* 画布内左右下角"上一套/下一套"按钮 */
    .nav-btn{
      position:absolute; bottom:10px; z-index:6;
      width:42px; height:42px; display:grid; place-items:center;
      font-size:18px; line-height:1; font-weight:700;
      background:color-mix(in oklab, var(--btn-bg) 75%, transparent 25%);
      border:1px solid var(--btn-border);
      color:var(--fg); border-radius:12px;
      backdrop-filter: blur(6px);
      cursor:pointer;
    }
    .nav-btn:hover{ background:color-mix(in oklab, var(--btn-bg) 85%, var(--fg) 15%); }
    .nav-btn:active{ transform:scale(.96); }
    .nav-btn[hidden]{ display:none !important; }
    
    .nav-prev{ left:10px; }
    .nav-next{ right:10px; }
    
    /* 按钮组容器 - 神祇化和部件按钮 - 使用和性别按钮相同的样式 */
    .nav-btn-group {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: inline-flex;
      flex-direction: row;
      gap: 0;
      border: 1px solid var(--btn-border);
      border-radius: 10px;
      overflow: hidden;
      background: var(--btn-bg);
      z-index: 6;
    }
    
    .nav-btn-group .nav-btn {
      position: static;
      transform: none;
      border: 0;
      border-radius: 0;
      margin: 0;
      padding: 4px 14px;
      min-width: 50px;
      font-size: 12px;
      font-weight: 600;
      background: transparent;
      color: var(--fg);
      cursor: pointer;
      white-space: nowrap;
    }
    
    .nav-btn-group .nav-btn:not(:last-child) {
      border-right: 1px solid var(--btn-border);
    }
    
    .nav-btn-group .nav-btn:hover {
      background: color-mix(in oklab, var(--btn-bg) 85%, var(--fg) 15%);
    }
    
    .nav-btn-group .nav-btn:active {
      transform: scale(0.96);
    }
    
    .nav-btn-group .nav-btn.active {
      background: color-mix(in oklab, var(--btn-bg) 80%, var(--fg) 20%);
      color: var(--fg);
    }

    
    /* 元信息：原 #c7cfdb；kv 背景 #141a27，边框 #273148 */
    .meta{display:flex;flex-wrap:wrap;gap:12px;padding:10px;color:var(--fg)}
    .kv{background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:10px;padding:6px 10px}
    
    /* 水印不变，只是透明度 */
    /* 永远盖住 godImg 和 canvas，但不抢事件 */
    .watermark{
    position:absolute;
    inset:0;
    pointer-events:none;
    display:grid;
    place-items:center;
    font-weight:600;
    letter-spacing:2px;
    opacity:.15;

    z-index: 7;                 /* 新增/提升：比 godImg、canvas 都高 */
    color: var(--fg);           /* 用主题前景色 */
    text-align:center;
    }

    
    img,canvas{user-drag:none;-webkit-user-drag:none}
    
    @media (max-width: 640px){ canvas{ height:70vh; } }
    
    /* 底部公告条：用变量适配主题（可直接替换整段） */
    body { padding-bottom: 0; }
    .notice-fixed{
      position: static;
      left: 0; right: 0; bottom: 0;
      background: color-mix(in oklab, var(--bg) 60%, #8b1e1e 40%);
      border-top: 1px solid color-mix(in oklab, var(--border) 60%, #8b1e1e 40%);
      box-shadow: 0 -8px 20px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06);
      color: color-mix(in oklab, var(--fg) 75%, #ffdede 25%);
    }
    .notice-fixed .wrap{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px}
    .notice-fixed .badge{background:#8b1e1e;color:#fff;font-weight:700;letter-spacing:1px;padding:4px 8px;border-radius:999px;font-size:12px;line-height:1}
    .notice-fixed .msg{font-size:18px}
    .notice-fixed .msg b{color:#ffb4b4;font-weight:800}
    @media (max-width: 640px){ .notice-fixed .wrap{padding:8px 12px}.notice-fixed .msg{font-size:16px} }


    /* 跳页输入样式（小胶囊） */
    .jumpbar{padding:0 10px 12px 10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
    .jumpbar input{
      width:90px;padding:6px 8px;
      background:var(--input-bg);
      border:1px solid var(--btn-border);
      border-radius:8px;
      color:var(--fg);
    }
    .jumpbar .go{
      padding:6px 10px;
      background:var(--btn-bg);
      border:1px solid var(--btn-border);
      border-radius:8px;
      color:var(--fg);
      cursor:pointer;
    }
    /* 在画布区域内，禁用浏览器默认手势，防止页面滚动抢手势 */
    .stage-wrap, .stage-wrap canvas{
      touch-action: none;             /* 禁用浏览器的 pan/zoom 默认行为 */
      overscroll-behavior: contain;   /* 阻止滚动链到页面（防止“下拉刷新/橡皮筋”） */
    }

      /* 分段开关（性别切换） */
  .seg {
    display:inline-flex; gap:0; border:1px solid var(--btn-border); border-radius:10px; overflow:hidden;
    background:var(--btn-bg);
  }
  .seg button{
    padding:6px 10px; border:0; background:transparent; color:var(--fg); cursor:pointer; font-weight:600;
  }
  .seg button + button{ border-left:1px solid var(--btn-border); }
  .seg button.active{ background:color-mix(in oklab, var(--btn-bg) 80%, var(--fg) 20%); color:var(--fg); }
  
  /* 画布左上角的性别切换条（内侧悬浮） */
  .stage-switch{
    position:absolute; top:10px; left:10px; z-index:6;
    background:color-mix(in oklab, var(--btn-bg) 75%, transparent 25%); border:1px solid var(--btn-border); border-radius:12px; backdrop-filter:blur(6px);
    padding:6px;
  }
  /* 头部下方的页面元信息（更新时间） */
  .page-meta{
    font-size: 12px;
    color: var(--muted);
    padding: 4px 0 8px 0;
  }
  .page-meta b{ color: var(--fg); }

  /* 分层：画布<神祇图层<按钮 */
.stage-wrap { position: relative; }
canvas { position: relative; z-index: 3; }      /* 画布要能接收事件 */
#godImg, #godVid {
  position: absolute; top: 0; left: 0;
  z-index: 4;
  pointer-events: none;   /* 关键：让手势穿透到canvas */
  display: none;
}
.toolbar, .seg, .nav-btn { z-index: 6; }

/* 全屏时的样式调整 */
.stage-wrap:fullscreen canvas,
.stage-wrap.is-fullscreen canvas{ height: 100vh; }

/* —— 伪全屏（移动端兜底）—— */
body.mobile-fs { overflow: hidden; }
.stage-wrap.pseudo-fs{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--stage);
}
.stage-wrap.pseudo-fs canvas{ height: 100svh; }

/* 部件展示面板样式 */
.viewer-content {
  position: relative;
}

.stage-wrap {
  position: relative;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.parts-panel {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px;
  margin-left: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow-y: auto;
  max-height: 70vh;
  transition: all 0.3s ease;
  z-index: 10;
}

.parts-panel.collapsed {
  display: none;
}

.part-item {
  position: relative;
  width: 100px;
  height: 100px;
  background: var(--stage);
  border: 2px solid var(--btn-border);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.part-item:hover {
  border-color: var(--acc);
  background: color-mix(in oklab, var(--stage) 85%, var(--acc) 15%);
}

.part-item.active {
  background: color-mix(in oklab, var(--stage) 72%, var(--acc) 28%);
  border-color: var(--acc);
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.part-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.part-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--btn-bg);
  color: var(--fg);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid var(--btn-border);
}

/* 移动端适配 */
@media (max-width: 960px) {
  .parts-panel {
    position: static;
    transform: none;
    margin-left: 0;
    margin-top: 12px;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    width: 100%;
    justify-content: center;
    gap: 20px; /* 增加间距从 12px 到 20px，为长名字留出更多空间 */
    padding: 8px;
  }
  
  .part-item {
    width: 60px;
    height: 60px;
  }
  
  .part-label {
    font-size: 9px;
    bottom: -16px;
  }
}

/* ====== 骨架屏动画已移除，改用简单 loading 提示 ====== */