/* ===== 颜色搜索弹窗：搜索优先的色板浏览体验 ===== */
#colorPickerModal .drawer-title{gap:9px}
#colorPickerModal .drawer-title>span{white-space:nowrap}
#colorPickerBrandMeta{color:var(--apple-secondary,var(--t3));font-size:12px;font-weight:500;white-space:nowrap}
#colorPickerModal .drawer-search{display:grid;gap:8px}
/* 移动 WebView 对 label 内嵌图标、输入框、按钮的宽度计算不一致；搜索框保持单输入控件，彻底消除横向争抢。 */
#colorPickerModal .color-picker-search-field{display:block;min-height:46px;padding:0 12px;border:1px solid var(--apple-separator,var(--bd));border-radius:12px;background:var(--apple-fill,var(--bg));box-sizing:border-box;overflow:hidden}
/* 仅保留容器的一条焦点边框；Android WebView 的输入控件焦点环必须彻底关闭，避免两侧出现双线。 */
#colorPickerModal .color-picker-search-field:focus-within{border-color:var(--apple-blue,#0071e3);box-shadow:none}
#colorPickerModal .color-picker-search-field .icon,#colorPickerModal #cpSearchClear{display:none!important}
#colorPickerModal .color-picker-search-field input{display:block;width:100%!important;min-width:0;max-width:100%;height:46px;min-height:46px;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;outline:0!important;-webkit-appearance:none!important;appearance:none!important;background:transparent!important;box-shadow:none!important;color:var(--apple-label,var(--t));font-size:15px;line-height:46px;box-sizing:border-box}
/* 覆盖 style.css 的全局 input:focus-visible 焦点轮廓，输入框不再与容器边框叠画。 */
#colorPickerModal .color-picker-search-field input:is(:focus,:focus-visible){border-color:transparent!important;outline:0!important;outline-offset:0!important;box-shadow:none!important}
#colorPickerModal .color-picker-selection{display:flex;align-items:center;gap:7px;min-height:30px;padding:6px 9px;border-radius:9px;background:color-mix(in srgb,var(--apple-blue,#0071e3) 8%,transparent);color:var(--apple-secondary,var(--t2));font-size:12px}
#colorPickerModal .color-picker-selection i{width:18px;height:18px;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
#colorPickerModal .color-picker-selection b{color:var(--apple-label,var(--t));font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
#colorPickerModal .color-picker-selection small{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--apple-secondary,var(--t3))}
#colorPickerModal .series-tabs{gap:6px}
#colorPickerModal .series-tab{display:inline-flex;align-items:center;gap:4px;border:1px solid transparent;background:var(--apple-fill,var(--fill-tertiary));color:var(--apple-secondary,var(--t2));font-weight:650}
#colorPickerModal .series-tab em{font-size:10px;font-style:normal;font-weight:550;opacity:.65}
#colorPickerModal .series-tab.active{border-color:color-mix(in srgb,var(--apple-blue,#0071e3) 18%,transparent);background:color-mix(in srgb,var(--apple-blue,#0071e3) 12%,transparent);color:var(--apple-blue,#0071e3);box-shadow:none}
#colorPickerModal .picker-color-grid{padding:3px}
#colorPickerModal .color-picker-item{display:block;padding:0;border:1px solid rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#colorPickerModal .color-picker-item:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 4px 10px rgba(15,23,42,.13)}
#colorPickerModal .color-picker-item.selected{border-color:var(--apple-blue,#0071e3)!important;box-shadow:0 0 0 2px var(--apple-blue,#0071e3),0 4px 10px color-mix(in srgb,var(--apple-blue,#0071e3) 28%,transparent)!important;transform:translateY(-1px)}
#colorPickerModal .color-picker-label{inset:auto 3px 3px!important;padding:2px 3px;border-radius:5px;background:rgba(255,255,255,.74);color:#172033!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px!important;font-weight:750;line-height:14px!important;text-align:center;text-shadow:none;opacity:.94}
#colorPickerModal .picker-empty{display:grid;place-content:center;gap:6px;grid-column:1/-1;min-height:180px;padding:18px;text-align:center;color:var(--apple-secondary,var(--t3))}
#colorPickerModal .picker-empty strong{color:var(--apple-label,var(--t));font-size:15px}
#colorPickerModal .picker-empty span{font-size:12px;line-height:1.5}

@media (max-width:599px){
  /* 弹出键盘时 WebView 会重算可视高度；不用四个子节点配三行的 grid，
     改为明确的纵向 flex 流，搜索区、分类标签和色卡区绝不会相互覆盖。 */
  #colorPickerModal.drawer{display:flex!important;flex-direction:column;height:min(84dvh,720px);max-height:min(84dvh,720px);padding:8px 14px calc(12px + var(--safe-b));overflow:hidden}
  #colorPickerModal .drawer-handle{flex:0 0 auto;margin-bottom:8px}
  #colorPickerModal .drawer-title{position:relative;flex:0 0 auto;min-height:32px;margin:0 0 8px;padding:0 36px 0 2px;text-align:left;font-size:18px}
  #colorPickerBrandMeta{display:none}
  #colorPickerModal .drawer-title>span{overflow:hidden;text-overflow:ellipsis}
  #colorPickerModal .color-picker-search-field{padding:0 10px}
  #colorPickerModal .drawer-search{position:relative;z-index:2;flex:0 0 auto;padding:0 0 9px}
  /* 使用确定的 0 基准剩余高度：无论“全部”有多少色块，内容高度都不会参与父级尺寸计算。 */
  #colorPickerModal .drawer-grid{position:relative;z-index:1;display:grid!important;grid-template-rows:auto minmax(0,1fr);flex:1 1 0;min-height:0;min-width:0;overflow:hidden;padding:0}
  #colorPickerModal .series-tabs{min-width:0;margin:0 0 8px;padding:1px 0 3px}
  #colorPickerModal .series-tab{min-height:30px;padding:4px 10px;font-size:12px}
  #colorPickerModal .picker-color-grid{display:grid!important;width:auto;min-width:0;min-height:0;height:auto;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));align-content:start;overflow-y:scroll;-webkit-overflow-scrolling:touch;gap:7px;overscroll-behavior:contain}
  #colorPickerModal .color-picker-item{height:50px;min-width:50px;border-radius:10px}
  #colorPickerModal .color-picker-close{position:absolute;top:0;right:0;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--apple-fill,var(--bg));color:var(--apple-secondary,var(--t2));font-size:24px}
}

@media (min-width:600px) and (max-width:899px){
  #colorPickerModal .picker-color-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
  #colorPickerModal .color-picker-item{height:52px;min-width:52px}
}

/* The picker owns a fixed outer surface; category and result counts only affect its inner scroll pane. */
#colorPickerModal.drawer,
#colorPickerModal.drawer .drawer-grid,
#colorPickerModal.drawer .series-tabs,
#colorPickerModal.drawer .picker-color-grid{box-sizing:border-box;min-width:0}
#colorPickerModal.drawer .drawer-grid,
#colorPickerModal.drawer .series-tabs,
#colorPickerModal.drawer .picker-color-grid{width:100%;max-width:none}
#colorPickerModal.drawer .drawer-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  justify-items:stretch;
  min-width:0;
}
#colorPickerModal.drawer .series-tabs{justify-self:stretch;overflow-x:auto}
#colorPickerModal.drawer .picker-color-grid{
  display:grid!important;
  grid-column:1 / -1;
  justify-self:stretch;
  min-width:100%;
  grid-template-columns:repeat(auto-fill,minmax(60px,1fr))!important;
  align-content:start;
  overflow-y:auto;
  overflow-x:hidden;
  gap:9px;
}
#colorPickerModal.drawer .color-picker-item{width:auto;min-width:0}

@media (max-width:599px){
  #colorPickerModal.drawer{left:0!important;right:0!important;width:100%!important;max-width:none!important;border-radius:22px 22px 0 0!important}
}

@media (hover:none) and (pointer:coarse) and (min-width:600px){
  #colorPickerModal.drawer{
    left:24px!important;
    right:24px!important;
    bottom:0!important;
    width:auto!important;
    height:min(78dvh,760px)!important;
    min-height:520px;
    max-height:calc(100dvh - 48px)!important;
    padding:0!important;
    border-radius:20px 20px 0 0!important;
    overflow:hidden!important;
  }
  #colorPickerModal.drawer .drawer-grid{min-height:0!important;height:auto!important;overflow:hidden!important}
  #colorPickerModal.drawer .picker-color-grid{min-height:0!important;height:auto!important;overflow-y:auto!important}
}

@media (hover:none) and (pointer:coarse) and (min-width:900px) and (orientation:landscape){
  #colorPickerModal.drawer{
    top:72px!important;
    bottom:48px!important;
    left:50%!important;
    right:auto!important;
    width:min(900px,calc(100vw - 96px))!important;
    height:auto!important;
    min-height:0;
    transform:translate(-50%,-8px)!important;
    border-radius:18px!important;
  }
  #colorPickerModal.drawer.show{transform:translate(-50%,0)!important}
}