/* ClearanceNest CRM — 主题与 clearancenest.com 保持一致
   品牌色板取自站点：主橙 #ff6600，CTA 渐变 #ff713c→#ff2a41 / #ff2929→#ff6812，
   文字 #1c1c1c/#404040，浅底 #f4f4f5，描边 #e4e4e4，辅灰 #8f8f8f */
:root{
  --bg:#f4f4f5; --card:#ffffff;
  --ink:#1c1c1c; --ink-2:#404040; --sub:#8f8f8f;
  --line:#e4e4e4; --line-light:#efefef;
  --brand:#ff6600; --brand-deep:#ff2a41; --brand-amber:#ffac1b;
  --brand-soft:#fff3ea; --brand-softer:#fff8f3;
  --grad:linear-gradient(135deg,#ff713c 0%,#ff2a41 100%);
  --grad-btn:linear-gradient(145deg,#ff2929 22%,#ff6812 100%);
  --slate:#4c6971; --slate-soft:#eef2f4;
  --green:#1a8a4f; --green-soft:#e6f5ec;
  --red:#d92b2b; --red-soft:#fdecec;
  --grey-soft:#f4f4f5;
  --radius:12px; --radius-md:10px; --radius-sm:8px;
  --shadow:0 5px 20px 0 rgba(0,0,0,.02),0 1px 2px rgba(0,0,0,.04);
  /* 统一字体与字号体系（全站只用这 5 档字号） */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --fs-xs:12px;    /* 辅助：表头 / 标签 / 副标题 / 小按钮 / 头像字母 */
  --fs-sm:13px;    /* 次要：说明 / 计数 / 菜单项 / 表单标签 / 分页 */
  --fs-base:14px;  /* 正文：输入框 / 页签 / 按钮 / 表格单元格 */
  --fs-md:15px;    /* 标题：品牌名 / 卡片标题 / 菜单头部 */
  --fs-lg:20px;    /* 展示：登录页主标题 */
  --fs-xl:28px;    /* 展示：指标大数字 */
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased}
/* 表单控件默认用 Arial，这里统一继承站点字体与字号 */
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
::selection{background:var(--brand-soft)}

/* ---------- 顶栏（与站点一致：白底 + 细描边 + 轻投影） ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 5px 20px 0 rgba(0,0,0,.02);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo-img{height:20px;width:auto;display:block}
.brand-name{font-weight:700;font-size:var(--fs-md);color:var(--ink);letter-spacing:.3px}
.brand-sub{color:var(--sub);font-size:var(--fs-xs)}
.topbar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}

/* ---------- 用户菜单（低调，避免误触退出） ---------- */
.usermenu{position:relative}
.um-btn{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border:1px solid var(--line);
  background:#fff;border-radius:var(--radius-md);cursor:pointer;font-size:var(--fs-sm);color:var(--ink-2);transition:border-color .15s,background .15s,box-shadow .15s}
.um-btn:hover{border-color:var(--brand);background:var(--brand-softer)}
.um-btn:active{box-shadow:0 0 0 3px var(--brand-soft)}
.um-avatar{width:24px;height:24px;border-radius:50%;background:var(--grad-btn);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:600;flex:0 0 auto}
.um-name{color:var(--sub);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-caret{color:var(--sub);font-size:var(--fs-xs);line-height:1;margin-left:3px;transition:transform .2s ease}
.usermenu.open .um-caret{transform:rotate(180deg);color:var(--brand)}
.um-drop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:0 12px 32px rgba(0,0,0,.12);min-width:200px;padding:6px;z-index:30;
  display:none;transform-origin:top right}
.um-drop.show{display:block;animation:umIn .16s ease both}
@keyframes umIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.um-head{padding:10px 12px;font-size:var(--fs-sm);color:var(--ink);border-bottom:1px solid var(--line-light);
  margin-bottom:6px;word-break:break-all;font-weight:600;display:flex;align-items:center;gap:9px}
.um-head .h-av{width:26px;height:26px;border-radius:50%;background:var(--grad-btn);color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:600}
.um-head .h-id{display:block;line-height:1.3}
.um-head .e{display:block;color:var(--sub);font-size:var(--fs-xs);margin-top:2px;font-weight:400}
.um-item{width:100%;text-align:left;padding:9px 12px;border:none;background:none;border-radius:var(--radius-sm);
  cursor:pointer;font-size:var(--fs-sm);color:var(--ink-2);transition:background .15s,color .15s}
.um-item:hover{background:var(--brand-soft);color:var(--brand)}

/* ---------- 页签 ---------- */
.tabs{display:flex;gap:4px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line)}
.tab{appearance:none;border:none;background:none;padding:14px 16px;font-size:var(--fs-base);color:var(--sub);
  cursor:pointer;border-bottom:2px solid transparent;font-weight:500;transition:color .15s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

.content{padding:24px;max-width:1200px;margin:0 auto}
.view{display:none}
.view.active{display:block}

/* ---------- 工具栏 / 输入 ---------- */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.input{height:36px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 12px;background:#fff;
  font-size:var(--fs-base);color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.input{height:auto;padding:8px 12px;resize:vertical}
select.input{cursor:pointer;min-width:120px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='%23ff6600' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;color:var(--ink)}
select.input option{color:var(--ink);background:#fff}
.count{color:var(--sub);font-size:var(--fs-sm);margin-left:auto}

/* ---------- 表格 ---------- */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:600;font-size:var(--fs-xs);color:var(--sub);padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--grey-soft);white-space:nowrap}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line-light);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--brand-softer)}
.num{text-align:right;font-variant-numeric:tabular-nums}
/* 产品表：固定列宽；标题/中文名固定单行省略，hover 显示全称（title） */
.tbl-products{table-layout:fixed;min-width:960px}
.tbl-products th,.tbl-products td{white-space:nowrap}
.tbl-products th:nth-child(1),.tbl-products td:nth-child(1){width:64px}
.tbl-products th:nth-child(3){width:88px}
.tbl-products th:nth-child(4){width:104px}
.tbl-products th:nth-child(5){width:76px}
.tbl-products th:nth-child(6){width:72px}
.tbl-products th:nth-child(7){width:80px}
.tbl-products th:nth-child(8){width:82px}
.tbl-products th:nth-child(9){width:108px}
.tbl-products th:nth-child(10){width:88px}
.tbl-products td:nth-child(2){white-space:normal}
.tbl-products .pname,.tbl-products .psub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pname{font-weight:500;color:var(--ink)}
.psub{color:var(--sub);font-size:var(--fs-xs);margin-top:3px;line-height:1.4}
.copybtn{margin-left:8px;padding:1px 8px;font-size:var(--fs-xs);line-height:1.6;color:var(--brand);
  background:var(--brand-soft);border:1px solid var(--line);border-radius:999px;cursor:pointer;
  font-weight:500;transition:background .15s,border-color .15s}
.copybtn:hover{background:#ffe7d6;border-color:var(--brand)}
.copybtn:active{transform:scale(.96)}
.row-actions{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.dlbtn{padding:1px 8px;font-size:var(--fs-xs);line-height:1.6;color:var(--slate);
  background:var(--slate-soft);border:1px solid var(--line);border-radius:999px;cursor:pointer;
  font-weight:500;transition:background .15s,border-color .15s}
.dlbtn:hover{background:#dfe7ea;border-color:var(--slate)}
.dlbtn:active{transform:scale(.96)}

/* ---------- 产品主图缩略图 + hover 放大 + 下载 ---------- */
.tbl th.imgcol,.tbl td.imgcol{width:52px;padding-left:12px;padding-right:8px}
.thumb{width:44px;height:44px;flex:0 0 auto}
.thumb-img{width:44px;height:44px;border-radius:var(--radius-sm);overflow:hidden;background:var(--slate-soft);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:zoom-in;transition:box-shadow .15s}
.thumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-img:hover{box-shadow:0 0 0 2px var(--brand)}
.thumb-empty{color:var(--sub);font-size:var(--fs-base);cursor:default;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.img-zoom{position:fixed;z-index:9999;display:none;padding:0;background:#fff;border:3px solid #fff;
  border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.28);pointer-events:none;overflow:hidden;
  max-width:340px;max-height:340px;line-height:0}
.img-zoom img{max-width:340px;max-height:340px;object-fit:contain;display:block}

/* ---------- 标签 ---------- */
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.tag.fba{background:var(--brand-soft);color:var(--brand)}
.tag.pickup{background:var(--slate-soft);color:var(--slate)}
.tag.yes{background:var(--green-soft);color:var(--green)}
.tag.no{background:var(--grey-soft);color:var(--sub)}
/* 上下架状态（与 WP 后台 product_state 同步）：在售=绿 / 售罄=红 */
.tag.onsale{background:var(--green-soft);color:var(--green)}
.tag.soldout{background:var(--red-soft);color:var(--red)}

/* ---------- 按钮 ---------- */
.btn{height:38px;padding:0 16px;border-radius:var(--radius-md);border:1px solid var(--line);background:#fff;
  font-size:var(--fs-base);font-weight:500;cursor:pointer;color:var(--ink-2);transition:all .15s}
.btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-softer)}
.btn-ghost{background:rgba(255,255,255,.7)}
.btn-primary{background:var(--grad-btn);color:#fff;border:none;
  box-shadow:0 4px 12px rgba(255,102,0,.25)}
.btn-primary:hover{background:var(--grad-btn);filter:brightness(1.06);color:#fff;
  box-shadow:0 6px 16px rgba(255,102,0,.32)}
.btn-block{width:100%;justify-content:center}
/* 小号按钮（与筛选框等高） */
.btn-sm{height:36px;padding:0 14px;font-size:var(--fs-sm)}
.btn-sortdir{width:38px;padding:0;justify-content:center;font-weight:700;font-size:var(--fs-base)}
.btn:disabled{opacity:.45;cursor:default}
.linkbtn{color:var(--brand);background:none;border:none;cursor:pointer;font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.linkbtn:hover{text-decoration:underline}

/* ---------- 分页 ---------- */
.pager{display:flex;gap:6px;align-items:center;margin-top:14px;flex-wrap:wrap}
.pager button{height:32px;min-width:32px;padding:0 10px;border:1px solid var(--line);background:#fff;
  border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);color:var(--ink-2);transition:all .15s}
.pager button:hover{border-color:var(--brand);color:var(--brand)}
.pager button.active{background:var(--grad-btn);color:#fff;border-color:transparent}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .count{margin-left:6px}

/* ---------- 布局 ---------- */
.grid2{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px}
.card h3{margin:0 0 14px;font-size:var(--fs-md);color:var(--ink);position:relative;padding-left:12px}
.card h3::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;
  border-radius:999px;background:var(--grad)}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-sm);color:var(--sub);font-weight:500}

/* ---------- 指标卡 / 仪表盘 ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;position:relative;overflow:hidden}
.metric::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.metric .v{font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.metric .k{color:var(--sub);font-size:var(--fs-sm);margin-top:4px}
.metric .sub{color:var(--ink-2);font-size:var(--fs-xs);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-light)}
.metric .sub .dot{margin-right:2px}
.dash-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.bar{display:flex;align-items:center;gap:10px;margin:8px 0}
.bar .name{width:110px;color:var(--ink-2);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{flex:1;height:12px;background:var(--grey-soft);border-radius:999px;overflow:hidden}
.bar .fill{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .4s ease}
.bar .fill.fill-orange{background:linear-gradient(90deg,#ff713c,#ff9a3c)}
.bar .fill.fill-slate{background:var(--slate)}
.bar .val{width:70px;text-align:right;font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap}
.bar .val em{font-style:normal;color:var(--sub);font-size:var(--fs-xs)}

/* 状态堆叠条 / 图例 */
.stack{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--grey-soft);margin:6px 0 14px}
.stack .seg{display:block;height:100%}
.stack .seg.on{background:var(--green)}
.stack .seg.off{background:var(--red)}
.legend{display:flex;gap:20px;flex-wrap:wrap}
.legend .lg{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-2)}
.legend .lg b{font-size:var(--fs-base);color:var(--ink)}
.legend .lg em{font-style:normal;color:var(--sub);font-size:var(--fs-xs)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.dot.on{background:var(--green)}
.dot.off{background:var(--red)}
.hint{color:var(--sub);font-size:var(--fs-xs);margin-top:12px;line-height:1.6}
.empty-inline{color:var(--sub);font-size:var(--fs-sm);padding:14px 0;text-align:center}

/* 最近跟进列表 */
.recent-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-light)}
.recent-row:last-child{border-bottom:none}
.recent-row .r-date{color:var(--sub);font-size:var(--fs-xs);flex:0 0 44px;font-variant-numeric:tabular-nums}
.recent-row .r-main{flex:1;min-width:0;line-height:1.35}
.recent-row .r-main b{font-weight:500;color:var(--ink);font-size:var(--fs-sm)}
.recent-row .r-main small{display:block;color:var(--sub);font-size:var(--fs-xs);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 最近上架 */
.latest-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.latest-item{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.latest-item:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(255,102,0,.10)}
.latest-item .l-img{display:block;height:96px;border-radius:6px;overflow:hidden;background:var(--slate-soft)}
.latest-item .l-img img{width:100%;height:100%;object-fit:cover;display:block}
.latest-item .l-name{color:var(--ink-2);font-size:var(--fs-xs);line-height:1.4;height:2.8em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.latest-item .l-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}
.latest-item .l-date{color:var(--sub);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}

/* ---------- 登录页 ---------- */
.login-view{display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;overflow:hidden;
  background:
    radial-gradient(640px 420px at 10% 6%, rgba(255,138,76,.16), transparent 62%),
    radial-gradient(560px 420px at 92% 94%, rgba(255,42,65,.13), transparent 62%),
    linear-gradient(180deg,#fffdfb 0%, #f4f4f5 100%)}
.login-view::before,.login-view::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none}
.login-view::before{width:360px;height:360px;left:-100px;top:-80px;background:radial-gradient(circle,#ffb27a,transparent 70%)}
.login-view::after{width:460px;height:460px;right:-140px;bottom:-160px;background:radial-gradient(circle,#ff9d9d,transparent 70%)}
.login-card{position:relative;z-index:1;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(228,228,228,.9);border-radius:20px;
  box-shadow:0 24px 60px rgba(28,28,28,.10),0 2px 6px rgba(28,28,28,.04);
  padding:44px 40px 36px;width:min(400px,92vw);text-align:center;animation:cardIn .5s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.login-card::before{content:"";position:absolute;top:0;left:28px;right:28px;height:3px;border-radius:999px;background:var(--grad)}
.login-logo{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 14px;padding:12px 20px;border-radius:16px;
  background:linear-gradient(145deg,#fff6ee,#ffe7d4);
  box-shadow:inset 0 0 0 1px rgba(255,102,0,.10),0 10px 22px rgba(255,102,0,.10)}
.login-logo img{height:24px;width:auto;display:block}
.login-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink);letter-spacing:1px;margin-bottom:24px}
.login-err{color:#c0392b;font-size:var(--fs-sm);margin-top:14px;min-height:18px}
/* 登录表单（邮箱 + 访问密钥） */
.login-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.login-form[hidden]{display:none}
.lf-account[hidden]{display:none}
.lf-label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.lf-row{display:flex;gap:10px}
.lf-row .input{flex:1;min-width:0}
.lf-code{white-space:nowrap;flex-shrink:0}
.lf-account{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:var(--fs-sm);color:var(--ink-2)}
.lf-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-account a{color:var(--brand);text-decoration:none;font-size:var(--fs-xs);flex-shrink:0}
.lf-account a:hover{text-decoration:underline}
.login-links{margin-top:16px;display:flex;justify-content:center;align-items:center;gap:10px;font-size:var(--fs-sm)}
.login-links[hidden]{display:none}
.login-links a{color:var(--sub);text-decoration:none;transition:color .15s}
.login-links a:hover{color:var(--brand)}
.login-links i{color:var(--line);font-style:normal}
.lf-back{margin-top:2px}
@media(max-width:820px){
  .login-card{padding:36px 26px 30px}
}
.who{color:var(--sub);font-size:var(--fs-sm)}

/* ---------- 提示 ---------- */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:var(--fs-base);
  opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.empty{padding:40px;text-align:center;color:var(--sub)}

@media(max-width:820px){
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .dash-grid2{grid-template-columns:1fr}
  .latest-grid{grid-template-columns:repeat(3,1fr)}
  .topbar{flex-wrap:wrap}
  .logo-img{height:18px}
}