/* =========================================================================
 * 产品数据库 · 开发部门
 * 设计语言沿用「自有产品分析看板」：豆沙粉浅色 / 黑粉深色 · Bento · 卡片
 * 图标统一小尺寸（logo 20px、卡片/动作 14-16px）
 * ========================================================================= */

/* ========== 主题变量：浅色 ========== */
:root,
[data-theme="light"]{
  --bg:#F4F6FA; --bg-elev:#FFFFFF; --bg-grid:#E8ECF3;
  --panel:#FFFFFF; --panel-soft:#EEF1F7; --panel-deep:#DDE3EC;
  --ink:#0F1822; --ink2:#4A5566; --ink3:#8A95A5;
  --line:#DCE0E8; --line-soft:#E8ECF2;
  --accent:#0F1822; --accent-glow:#4A5566; --accent-deep:#060D17; --accent-soft:#DCE3EC;
  --good:#3F8A5B; --warn:#B07A30; --bad:#B05050;
  --grad-main:linear-gradient(135deg,#2A3140 0%,#0F1822 100%);
  --grad-soft:linear-gradient(135deg,#FFFFFF 0%,#E8ECF2 100%);
  --grad-glow:radial-gradient(120% 120% at 0% 0%,rgba(15,24,34,.06) 0%,transparent 55%);
  --shadow-sm:0 1px 2px rgba(15,24,34,.04),0 2px 6px rgba(15,24,34,.06),inset 0 1px 0 rgba(255,255,255,.7);
  --shadow:0 1px 2px rgba(15,24,34,.05),0 6px 18px rgba(15,24,34,.10),0 1px 0 rgba(15,24,34,.04),inset 0 1px 0 rgba(255,255,255,.85);
  --shadow-lg:0 2px 4px rgba(15,24,34,.06),0 14px 32px rgba(15,24,34,.14),inset 0 1px 0 rgba(255,255,255,.9);
  --glow:0 0 0 3px rgba(15,24,34,.10);
  --btn-glow:rgba(15,24,34,.30); --btn-glow-strong:rgba(15,24,34,.45); --dot-glow:rgba(15,24,34,.40);
  --t-own-bg:#EEF1F7; --t-own-fg:#0F1822; --t-own-bd:#D8DDE6;
  --t-rival-bg:#E8ECF3; --t-rival-fg:#2A3140; --t-rival-bd:#D2D8E2;
  --t-issue-bg:rgba(176,80,80,.10); --t-issue-fg:#B05050; --t-issue-bd:rgba(176,80,80,.28);
  --radius:14px; --radius-sm:10px; --radius-pill:999px;
}
/* ========== 主题变量：深色 ========== */
[data-theme="dark"]{
  --bg:#1F1F25; --bg-elev:#262630; --bg-grid:#161619;
  --panel:#272730; --panel-soft:#2E2E38; --panel-deep:#36363F;
  --ink:#F0F0F2; --ink2:#B5B5BD; --ink3:#75757F;
  --line:#2F2F38; --line-soft:#282830;
  --accent:#D4859A; --accent-glow:#E5A0B0; --accent-deep:#B86A82; --accent-soft:#2A2128;
  --good:#7DD49C; --warn:#E8B07A; --bad:#E89090;
  --grad-main:linear-gradient(135deg,#E5A0B0 0%,#D4859A 50%,#B86A82 100%);
  --grad-soft:linear-gradient(135deg,#2E2E38 0%,#262630 100%);
  --grad-glow:radial-gradient(120% 120% at 0% 0%,rgba(212,133,154,.18) 0%,transparent 55%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.04);
  --shadow:0 1px 2px rgba(0,0,0,.40),0 6px 18px rgba(0,0,0,.50),0 1px 0 rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45),0 14px 32px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  --glow:0 0 0 3px rgba(212,133,154,.20);
  --btn-glow:rgba(212,133,154,.35); --btn-glow-strong:rgba(212,133,154,.50); --dot-glow:rgba(212,133,154,.50);
  --t-own-bg:rgba(212,133,154,.14); --t-own-fg:#E5A0B0; --t-own-bd:rgba(212,133,154,.30);
  --t-rival-bg:#2D2D36; --t-rival-fg:#B5B5BD; --t-rival-bd:#353540;
  --t-issue-bg:rgba(232,144,144,.14); --t-issue-fg:#E89090; --t-issue-bd:rgba(232,144,144,.30);
  --radius:14px; --radius-sm:10px; --radius-pill:999px;
}

/* ========== 基础 ========== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:"Source Han Sans CN","Noto Sans SC","PingFang SC","Microsoft YaHei","Heiti SC",sans-serif;
  font-weight:500;background:var(--bg);color:var(--ink);line-height:1.5;font-size:14px;
  background-image:var(--grad-glow);background-attachment:fixed;
  transition:background-color .35s ease,color .35s ease;
}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
.hidden{display:none !important}

/* ========== 顶栏 ========== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 26px;background:linear-gradient(180deg,var(--panel) 0%,var(--bg-elev) 100%);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
}
.brand{display:flex;align-items:center;gap:13px}
.logo{
  width:38px;height:38px;border-radius:11px;background:var(--grad-main);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 14px var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.35);
}
.topbar h1{font-size:18px;font-weight:700;letter-spacing:.3px}
.sub{font-size:12px;color:var(--ink2);margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:12px}

.theme-switch{display:flex;align-items:center;background:var(--panel-soft);border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px;position:relative}
.theme-switch .pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--radius-pill);background:var(--panel);box-shadow:var(--shadow-sm);transition:transform .28s ease;z-index:0}
.theme-switch[data-mode="dark"] .pill{transform:translateX(100%)}
.theme-switch button{position:relative;z-index:1;border:0;background:transparent;color:var(--ink2);font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--radius-pill)}
.theme-switch button.on{color:var(--accent-deep)}
[data-theme="dark"] .theme-switch button.on{color:var(--accent)}

.badge{background:var(--panel-soft);color:var(--accent-deep);border:1px solid var(--line);padding:6px 13px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;white-space:nowrap}
[data-theme="dark"] .badge{color:var(--accent)}

/* ========== 类型分段 ========== */
.typebar{padding:12px 26px 0;max-width:1440px;margin:0 auto}
.types{display:inline-flex;background:var(--panel-soft);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px;gap:2px}
.types button{border:0;background:transparent;color:var(--ink2);font-size:13px;font-weight:600;padding:7px 16px;border-radius:var(--radius-pill);display:flex;align-items:center;gap:7px}
.types button b{font-size:11px;background:var(--panel);color:var(--ink3);border-radius:var(--radius-pill);padding:1px 7px;font-weight:700}
.types button.on{background:var(--panel);color:var(--accent-deep);box-shadow:var(--shadow-sm)}
[data-theme="dark"] .types button.on{color:var(--accent)}
.types button.on b{background:var(--accent-soft);color:var(--accent-deep)}
[data-theme="dark"] .types button.on b{background:rgba(212,133,154,.18);color:var(--accent)}

/* ========== KPI ========== */
.kpis{max-width:1440px;margin:14px auto 0;padding:0 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:12px}
.kpi .kic{width:32px;height:32px;border-radius:9px;background:var(--panel-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0}
[data-theme="dark"] .kpi .kic{color:var(--accent)}
.kpi .kv{font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.kpi .kl{font-size:11.5px;color:var(--ink2);margin-top:2px}
.kpi.warn .kv{color:var(--warn)}

/* ========== 布局 ========== */
.layout{max-width:1440px;margin:16px auto 40px;padding:0 26px;display:grid;grid-template-columns:216px 1fr;gap:16px;align-items:start}

/* 筛选 */
.filters{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:4px;position:sticky;top:76px}
.filters-head{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-bottom:1px solid var(--line-soft);font-size:12px;font-weight:700;color:var(--ink2)}
.filters-head .reset{border:0;background:transparent;color:var(--ink3);font-size:11.5px;font-weight:600;padding:3px 6px;border-radius:6px}
.filters-head .reset:hover{color:var(--bad);background:var(--panel-soft)}
.fgroup{padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.fgroup:last-child{border-bottom:0}
.fgroup-t{font-size:11px;color:var(--ink3);font-weight:700;margin-bottom:7px;letter-spacing:.4px}
.fchips{display:flex;flex-wrap:wrap;gap:5px}
.fchip{border:1px solid var(--line);background:var(--panel-soft);color:var(--ink2);font-size:11.5px;padding:4px 9px;border-radius:var(--radius-pill);transition:all .16s}
.fchip:hover{border-color:var(--accent-glow)}
.fchip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-theme="dark"] .fchip.on{background:var(--accent);color:#241a20;border-color:var(--accent)}

/* 主区 */
.main{min-width:0}
.main-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.searchbox{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;flex:1;min-width:200px;max-width:380px;color:var(--ink3);box-shadow:var(--shadow-sm)}
.searchbox input{border:0;background:transparent;outline:none;color:var(--ink);font-size:13px;width:100%}
.main-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.result-stat{font-size:12px;color:var(--ink2);white-space:nowrap}
.view-toggle{display:inline-flex;background:var(--panel-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px}
.view-toggle button{border:0;background:transparent;color:var(--ink2);font-size:12px;font-weight:600;padding:5px 11px;border-radius:7px}
.view-toggle button.is-active{background:var(--panel);color:var(--accent-deep);box-shadow:var(--shadow-sm)}
[data-theme="dark"] .view-toggle button.is-active{color:var(--accent)}

/* 按钮 */
.btn-primary{border:0;background:var(--grad-main);color:#fff;font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:var(--radius-sm);box-shadow:0 4px 12px var(--btn-glow)}
[data-theme="dark"] .btn-primary{color:#241a20}
.btn-primary:hover{box-shadow:0 6px 18px var(--btn-glow-strong)}
.btn-ghost{border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:var(--radius-sm)}
.btn-ghost:hover{border-color:var(--accent-glow);color:var(--ink)}
.btn-danger{border:1px solid rgba(176,80,80,.35);background:transparent;color:var(--bad);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:var(--radius-sm)}
.icon-btn{border:0;background:var(--panel-soft);color:var(--ink2);width:30px;height:30px;border-radius:8px;font-size:13px;line-height:1}

/* ========== 卡片网格（图片不撑大、图标小） ========== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-glow)}
.pcard .thumb{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,var(--panel-soft),var(--panel-deep));display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .thumb .ph{color:var(--ink3);display:flex;flex-direction:column;align-items:center;gap:5px}
.pcard .thumb .ph svg{opacity:.55}
.pcard .thumb .ph span{font-size:10.5px;letter-spacing:.5px}
.pcard .ttag{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);border:1px solid}
.ttag.own{background:var(--t-own-bg);color:var(--t-own-fg);border-color:var(--t-own-bd)}
.ttag.rival{background:var(--t-rival-bg);color:var(--t-rival-fg);border-color:var(--t-rival-bd)}
.ttag.issue{background:var(--t-issue-bg);color:var(--t-issue-fg);border-color:var(--t-issue-bd)}
.pcard .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard .bline{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3)}
.pcard .bline .no{margin-left:auto;font-variant-numeric:tabular-nums}
.pcard .pname{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pcard .metarow{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.schip{font-size:10px;color:var(--ink2);background:var(--panel-soft);border:1px solid var(--line-soft);border-radius:5px;padding:1px 6px}
.score{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--radius-pill)}
.score.good{color:var(--good);background:rgba(63,138,91,.12)}
.score.mid{color:var(--warn);background:rgba(176,122,48,.12)}
.score.bad{color:var(--bad);background:rgba(176,80,80,.12)}
.stag{font-size:10px;color:var(--ink3);margin-left:auto}

/* ========== 表格 ========== */
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto}
table.ptable{width:100%;border-collapse:collapse;font-size:12.5px;min-width:760px}
.ptable th{text-align:left;font-size:11px;color:var(--ink3);font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line);background:var(--panel-soft);position:sticky;top:0}
.ptable td{padding:10px 12px;border-bottom:1px solid var(--line-soft);color:var(--ink2);vertical-align:middle}
.ptable tr:hover td{background:var(--panel-soft);cursor:pointer}
.ptable td.strong{color:var(--ink);font-weight:600}
.ptable .tthumb{width:34px;height:34px;border-radius:7px;background:var(--panel-deep);display:flex;align-items:center;justify-content:center;color:var(--ink3);overflow:hidden}
.ptable .tthumb img{width:100%;height:100%;object-fit:cover}

/* ========== 空态 / 加载更多 ========== */
.empty{text-align:center;color:var(--ink3);font-size:13px;padding:60px 0}
.more-row{text-align:center;margin-top:16px}

/* ========== 详情抽屉 ========== */
.drawer{position:fixed;inset:0;z-index:60;pointer-events:none}
.drawer[aria-hidden="false"]{pointer-events:auto}
.drawer-mask{position:absolute;inset:0;background:rgba(10,12,18,.42);opacity:0;transition:opacity .25s}
.drawer[aria-hidden="false"] .drawer-mask{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,92vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column}
.drawer[aria-hidden="false"] .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.drawer-title{font-size:15px;font-weight:700}
.drawer-acts{display:flex;align-items:center;gap:7px}
.drawer-body{padding:16px 18px 40px;overflow:auto}
.d-block{margin-bottom:18px}
.d-h{font-size:11px;color:var(--ink3);font-weight:700;letter-spacing:.4px;margin-bottom:8px}
.d-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.d-meta .mi{background:var(--panel-soft);border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px}
.d-meta .mk{font-size:10.5px;color:var(--ink3)}
.d-meta .mv{font-size:13px;font-weight:600;color:var(--ink);margin-top:2px;word-break:break-all}
.d-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.d-gallery .gitem{aspect-ratio:1;border-radius:9px;background:var(--panel-deep);display:flex;align-items:center;justify-content:center;color:var(--ink3);overflow:hidden}
.d-gallery .gitem img{width:100%;height:100%;object-fit:cover}
.d-table{width:100%;border-collapse:collapse;font-size:12px}
.d-table th,.d-table td{padding:7px 8px;border-bottom:1px solid var(--line-soft);text-align:left;color:var(--ink2)}
.d-table th{color:var(--ink3);font-weight:700;font-size:10.5px}
.d-tryon{display:flex;flex-direction:column;gap:8px}
.d-tryon .tr{background:var(--panel-soft);border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px;font-size:12px;color:var(--ink2)}
.d-tryon .tr b{color:var(--ink)}
.d-note{font-size:12.5px;color:var(--ink2);background:var(--panel-soft);border-radius:9px;padding:10px 12px;line-height:1.6}
.d-empty{color:var(--ink3);font-size:12px}

/* ========== 弹窗 ========== */
.modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center}
.modal-mask{position:absolute;inset:0;background:rgba(10,12,18,.5)}
.modal-panel{position:relative;width:min(640px,94vw);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1}
.modal-title{font-size:15px;font-weight:700}
.p-form{padding:16px 18px 20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.p-form label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink3);font-weight:600}
.p-form label.full{grid-column:1/-1;margin-top:11px}
.p-form input,.p-form select,.p-form textarea{border:1px solid var(--line);background:var(--panel-soft);color:var(--ink);border-radius:8px;padding:8px 10px;font-size:13px;outline:none}
.p-form input:focus,.p-form select:focus,.p-form textarea:focus{border-color:var(--accent-glow);box-shadow:var(--glow)}
.form-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}

/* ========== Toast ========== */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;padding:9px 18px;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .25s;z-index:90}
[data-theme="dark"] .toast{color:#241a20}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ========== 登录门 ========== */
.gate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(120% 120% at 0% 0%,rgba(15,24,34,.08) 0%,transparent 55%),var(--bg)}
.gate.off{display:none}
.gate-card{width:min(360px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:28px 26px;text-align:center}
.gate-logo{width:46px;height:46px;border-radius:13px;background:var(--grad-main);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 6px 16px var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.gate-card h2{font-size:20px;font-weight:700;letter-spacing:.3px}
.gate-sub{font-size:12px;color:var(--ink3);margin:4px 0 18px}
.gate-form{display:flex;flex-direction:column;gap:9px}
.gate-form input{border:1px solid var(--line);background:var(--panel-soft);color:var(--ink);border-radius:9px;padding:10px 12px;font-size:13px;outline:none}
.gate-form input:focus{border-color:var(--accent-glow);box-shadow:var(--glow)}
.gate-form .btn-primary{padding:10px;margin-top:2px}
.gate-msg{min-height:16px;font-size:11.5px;color:var(--bad);margin-top:9px}
.gate-guest{border:0;background:transparent;color:var(--ink3);font-size:12px;margin-top:8px;cursor:pointer}
.gate-guest:hover{color:var(--ink2);text-decoration:underline}

/* ========== 响应式 ========== */
@media(max-width:880px){
  .layout{grid-template-columns:1fr}
  .filters{position:static;order:2}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .topbar{padding:12px 16px}
  .typebar,.kpis,.layout{padding-left:16px;padding-right:16px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .form-grid{grid-template-columns:1fr}
}