/* 款式中台 · 共享样式（所有页面 common.css） */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f5f6f8; color: #333; font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.wrap { max-width: 1600px; margin: 0 auto; padding: 0 20px 60px; }

/* 顶栏 */
.topnav { background: #1677ff; }
.topnav-inner { max-width: 1600px; margin: 0 auto; padding: 0 20px; display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.topnav a { color: rgba(255,255,255,.85); text-decoration: none; padding: 10px 22px; font-size: 14px; display: inline-block; }
.topnav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.topnav a.on { color: #fff; font-weight: 600; background: rgba(255,255,255,.18); }
.topbar { background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 20; }
.topbar-inner { max-width: 1600px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo { font-size: 20px; font-weight: 700; color: #1677ff; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.chip { background: #f0f7ff; color: #1677ff; border-radius: 20px; padding: 3px 12px; font-size: 12px; }
.chip.orange { background: #fff7e6; color: #d46b08; }
.chip.gray { background: #f5f5f5; color: #666; }
.who { color: #666; font-size: 13px; }
.who b { color: #1677ff; }
.logout { border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 4px 12px; color: #999; cursor: pointer; font-size: 12px; }

/* 页签（真跳转） */
.tabs { display: flex; border: 1px solid #d9e6ff; border-radius: 8px; overflow: hidden; }
.tabs button { border: 0; background: #fff; color: #666; padding: 6px 18px; cursor: pointer; font-size: 13px; }
.tabs button.on { background: #1677ff; color: #fff; }

/* 筛选栏 */
.filters { background: #fff; border-radius: 12px; padding: 14px 16px; margin: 16px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters input[type=text] { border: 1px solid #ddd; border-radius: 8px; padding: 8px 12px; width: 220px; font-size: 14px; outline: none; }
.filters input[type=text]:focus { border-color: #1677ff; }
.filters select { border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; font-size: 13px; background: #fff; color: #333; }
.filters label { font-size: 13px; color: #666; display: flex; align-items: center; gap: 4px; }
.btn-reset { border: 1px solid #ddd; background: #fff; color: #999; border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.btn-reset:hover { color: #1677ff; border-color: #1677ff; }
.count { margin-left: auto; color: #999; font-size: 13px; }

/* 表格卡片 */
.card { background: #fff; border-radius: 12px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead th { background: #fafbfc; color: #888; font-weight: 500; font-size: 12px; text-align: left; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
tbody td { padding: 10px 12px; border-bottom: 1px solid #f6f6f6; vertical-align: middle; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: #f7faff; }
tbody tr.clickable { cursor: pointer; }
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: #f0f0f0; display: block; }
.noimg { width: 44px; height: 44px; border-radius: 8px; background: #f0f0f0; color: #ccc; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.code { font-family: "SF Mono", Consolas, monospace; font-size: 13px; color: #1677ff; }
.name { font-weight: 500; }
.muted { color: #999; font-size: 12px; }
.price { font-variant-numeric: tabular-nums; }
.badge { display: inline-block; border-radius: 6px; padding: 1px 8px; font-size: 12px; white-space: nowrap; }
.badge-lingmao { background: #e6f4ff; color: #1677ff; }
.badge-jushuitan { background: #fff7e6; color: #d46b08; }
.badge-baison { background: #f5f5f5; color: #8c8c8c; }
.frozen { background: #fff1f0; color: #cf1322; border-radius: 6px; padding: 1px 8px; font-size: 12px; }
.hits span { margin-right: 4px; font-size: 12px; }
.hit-y { color: #52c41a; } .hit-n { color: #ddd; }
.empty { text-align: center; color: #999; padding: 60px 0; }
.pager { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 14px; flex-wrap: wrap; }
.pager button { border: 1px solid #d9e6ff; background: #fff; color: #1677ff; border-radius: 8px; padding: 6px 18px; cursor: pointer; }
.pager button:disabled { color: #ccc; border-color: #eee; cursor: default; }
.pager .pg-nums { display: inline-flex; gap: 6px; align-items: center; }
.pager .pg-nums button { min-width: 34px; padding: 6px 8px; text-align: center; }
.pager .pg-nums button.on { background: #1677ff; color: #fff; border-color: #1677ff; }
.pager .pg-nums .pg-gap { color: #bbb; padding: 0 2px; }

/* 详情抽屉 */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.drawer { position: fixed; top: 0; right: -920px; width: 900px; max-width: 94vw; height: 100vh; background: #f5f6f8; z-index: 50; transition: right .25s; overflow-y: auto; box-shadow: -4px 0 20px rgba(0,0,0,.1); }
body.drawer-open .mask { opacity: 1; pointer-events: auto; }
body.drawer-open .drawer { right: 0; }
.drawer-head { background: #fff; padding: 16px 20px; display: flex; gap: 16px; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid #eee; }
.drawer-head img { width: 110px; height: 110px; border-radius: 10px; object-fit: contain; background: #f0f0f0; }
.drawer-head .noimg { width: 110px; height: 110px; font-size: 13px; }
.drawer-close { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 20px; color: #999; cursor: pointer; }
.d-title { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.d-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; font-size: 12.5px; color: #666; margin-top: 6px; }
.d-fields b { color: #333; font-weight: 500; }
.section { background: #fff; border-radius: 12px; margin: 14px; padding: 14px 16px; }
.section h3 { font-size: 14px; margin-bottom: 10px; color: #333; }
.section h3 .muted { font-weight: 400; margin-left: 6px; }
.sku-table td, .sku-table th { padding: 7px 10px; font-size: 13px; }
.maincolor { color: #faad14; }

/* 三源对照 */
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.src-card { border: 1px solid #f0f0f0; border-radius: 10px; padding: 10px; font-size: 12.5px; }
.src-card h4 { font-size: 13px; margin-bottom: 6px; }
.src-card img { width: 110px; height: 110px; object-fit: contain; border-radius: 6px; background: #f5f5f5; margin: 0 auto 6px; display: block; }
.src-card .row { color: #666; word-break: break-all; }
.src-miss { color: #bbb; text-align: center; padding: 24px 0; font-size: 13px; }

/* 档案详细信息折叠区（下探抽屉） */
.arch-det summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.arch-det summary::-webkit-details-marker { display: none; }
.arch-det summary::before { content: '▸ '; color: #999; }
.arch-det[open] summary::before { content: '▾ '; }
.foot { text-align: center; color: #000; font-size: 12px; margin-top: 24px; }
.foot .foot-brand { color: #bbb; }  /* 版权行保持灰色，与数据来源黑字区分 */

/* 图片放大浮层（img.img-zoom 点击开原图，common.js 全局代理） */
img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }  /* 防点按选中变蓝/拖拽残影 */
img.img-zoom { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: none;
            align-items: center; justify-content: center; z-index: 999; cursor: zoom-out; }
.lightbox.on { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; background: #fff;
                object-fit: contain; }

/* 登录页 */
.login-box { max-width: 380px; margin: 12vh auto; background: #fff; border-radius: 16px; padding: 44px 36px; text-align: center; }
.login-box h1 { font-size: 22px; color: #1677ff; margin-bottom: 8px; }
.login-box p { color: #999; font-size: 13px; margin-bottom: 26px; }
.btn-login { display: inline-block; background: #1677ff; color: #fff; border: 0; border-radius: 10px; padding: 12px 40px; font-size: 15px; cursor: pointer; }
.login-err { color: #cf1322; font-size: 13px; margin-top: 14px; }

/* 图表页 */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.chart-card { background: #fff; border-radius: 12px; padding: 16px; }
.chart-card.chart-wide { grid-column: 1 / -1; }
.chart-card h3 { font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.chart-card h3 .btn-junk { margin-left: auto; font-size: 12px; padding: 4px 12px; }
.chart-card h3 .btn-junk.on { background: #1677ff; color: #fff; border-color: #1677ff; }
.chart-box { height: 340px; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }

/* ---------- 三段式日期选择器（createDp 工厂配套） ---------- */
.dp { position: relative; font-size: 13px; color: #333; user-select: none; }
.dp, .dp-seg, .dp-cell { touch-action: manipulation; }  /* 手机端点选不触发页面放大 */
.dp i { font-style: normal; margin: 0 3px 0 1px; color: #999; }
.dp-seg { padding: 5px 7px; border: 1px solid #d9d9d9; border-radius: 8px; cursor: pointer; background: #fff; font-weight: 600; color: #1677ff; }
.dp-seg:hover, .dp-seg.on { border-color: #333; box-shadow: 0 0 0 1px #333; }
.dp-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: #fff; border: 1px solid #333; border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.12); display: none; min-width: 252px; }
.dp-panel.on { display: block; }
.dp-head { font-size: 12px; color: #999; margin-bottom: 8px; }
.dp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dp-grid.d7 { grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-cell { text-align: center; padding: 6px 0; border-radius: 6px; cursor: pointer; font-size: 13px; }
.dp-cell:hover { background: #f0f5ff; }
.dp-cell.dis { color: #ccc; cursor: default; }
.dp-cell.dis:hover { background: none; }
.dp-cell.sel { background: #1677ff; color: #fff; }
.dp-wd { text-align: center; font-size: 12px; color: #999; padding: 2px 0; }

/* 顶栏品牌（公司名+系统名，开放平台审核展示） */
.topnav-brand { color: #fff; font-weight: 700; font-size: 15px; padding: 10px 20px 10px 0; display: inline-flex; align-items: center; letter-spacing: .5px; white-space: nowrap; }

/* ---------- 全局提示 toast（common.js toast()） ---------- */
.toast-wrap { position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
              z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center;
              pointer-events: none; }
.toast { background: rgba(0,0,0,.78); color: #fff; padding: 9px 18px; border-radius: 8px;
         font-size: 13px; max-width: 76vw; box-shadow: 0 4px 14px rgba(0,0,0,.25);
         animation: toastIn .18s ease-out; }
.toast-err { background: #cf1322; }
.toast-ok { background: #237804; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 全局加载条（common.js loadingOn/loadingOff/withLoading） ---------- */
.loadbar { position: fixed; top: 0; left: 0; height: 2px; width: 40%; z-index: 9998;
           background: #1677ff; border-radius: 0 2px 2px 0; display: none;
           animation: loadbarSlide 1s ease-in-out infinite alternate; }
.loadbar.on { display: block; }
@keyframes loadbarSlide { from { margin-left: 0; } to { margin-left: 60%; } }

/* 列表加载中占位（setListLoading 配套，替代静默空白） */
.list-loading { text-align: center; color: #999; padding: 40px 0; font-size: 13px; }

/* ---------- 顶栏「其他」下拉（hover 展开，收纳低频板块；common.js TOPNAV 第 4 元素组） ----------
   菜单用 position:fixed + JS 定位（renderTopbar 内）：脱离 .topnav-inner 的 overflow-x:auto 裁剪，
   也不受顶栏层叠上下文限制，任何屏宽都能完整浮出 */
.topnav .nav-drop { position: relative; color: rgba(255,255,255,.85); padding: 10px 22px;
                    font-size: 14px; display: inline-block; cursor: pointer; user-select: none; }
.topnav .nav-drop:hover, .topnav .nav-drop:focus-within { color: #fff; background: rgba(255,255,255,.12); }
.topnav .nav-drop.on { color: #fff; font-weight: 600; background: rgba(255,255,255,.18); }
.topnav .nav-drop-menu { display: none; position: fixed; min-width: 110px;
                         background: #fff; border-radius: 0 0 10px 10px;
                         box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 100; overflow: hidden; }
.topnav .nav-drop:hover .nav-drop-menu,
.topnav .nav-drop:focus-within .nav-drop-menu { display: block; animation: navDropIn .15s ease-out; }
@keyframes navDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.topnav .nav-drop-menu a { display: block; color: #333; padding: 10px 22px; font-size: 14px;
                           white-space: nowrap; text-align: center; }
.topnav .nav-drop-menu a:hover { background: #f0f5ff; color: #1677ff; }
.topnav .nav-drop-menu a.on { color: #1677ff; font-weight: 600; background: #e6f0ff; }