
:root{
  --bg:#f6f8fc;
  --panel:#ffffff;
  --panel-soft:#f8fbff;
  --line:#e6ebf5;
  --text:#172033;
  --muted:#6b7280;
  --accent:#5b6cff;
  --accent-2:#7c88ff;
  --sidebar:#f4f7fb;
  --sidebar-soft:#edf2f9;
  --sidebar-text:#42506b;
  --success:#17b26a;
  --warning:#f79009;
  --danger:#f04438;
  --card-shadow:0 14px 30px rgba(16,24,40,.06);
  --radius:24px;
}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--accent)}
body{min-height:100vh}.shell{display:grid;grid-template-columns:276px 1fr;min-height:100vh;gap:20px;padding:18px}.sidebar{background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-soft) 100%);color:var(--sidebar-text);padding:20px 16px;display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:18px;height:calc(100vh - 36px);border:1px solid var(--line);border-radius:28px;box-shadow:var(--card-shadow)}
.sidebar-top{display:grid;gap:18px}.brand-lockup{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#7c88ff,#5b6cff);display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;box-shadow:0 10px 24px rgba(91,108,255,.22)}.brand{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#172033}.brand-sub{font-size:12px;color:#7b8798;margin-top:2px}.sidebar-section-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8;font-weight:800;padding:0 12px}.nav{display:grid;gap:8px}.nav-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;color:#50607b;text-decoration:none;font-weight:700;position:relative}.nav-item:hover,.nav-item.active{background:#ffffff;color:#22314d;border:1px solid #e4eaf4;box-shadow:0 6px 16px rgba(16,24,40,.05)}.nav-icon{width:22px;text-align:center;opacity:.92}.sidebar-bottom{padding-top:18px}.sidebar-cta-card{border:1px solid #e6ebf5;background:#fff;border-radius:20px;padding:16px;box-shadow:0 8px 20px rgba(16,24,40,.04)}.sidebar-cta-title{font-size:15px;font-weight:800;color:#172033;margin-bottom:6px}.sidebar-cta-copy{font-size:12px;line-height:1.7;color:#6b7280;margin-bottom:14px}.sidebar-cta-btn{display:inline-flex;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:800}
.main{padding:4px 8px 18px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}.dashboard-topbar{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:16px 18px;box-shadow:var(--card-shadow)}.topbar-left{display:flex;align-items:center;gap:14px}.sidebar-toggle{width:42px;height:42px;border:none;border-radius:14px;background:#f4f7fb;color:#4b5563;font-size:18px;cursor:pointer;border:1px solid var(--line)}.page-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#98a2b3}.page-heading{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#0f172a}.topbar-right{display:flex;align-items:center;gap:12px}.top-search{display:flex;align-items:center;gap:10px;min-width:340px;background:#fbfcfe;border:1px solid #e8edf7;border-radius:16px;padding:10px 14px}.top-search input{border:none;outline:none;background:transparent;width:100%;font-size:14px;color:#111827}.top-search-icon{color:#98a2b3}.header-tools{display:flex;align-items:center;gap:8px}.tool-btn{width:40px;height:40px;border:1px solid #e9edf6;background:#fbfcfe;border-radius:14px;color:#667085;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.03)}
.card,.stat-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--card-shadow)}.stack-sm>*+*{margin-top:8px}.stack-md>*+*{margin-top:16px}.mt-lg{margin-top:24px}.mt-xl{margin-top:32px}.wfull{width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:12px 16px;font-weight:800;font-size:13px;cursor:pointer;text-decoration:none;transition:.15s ease}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 10px 24px rgba(79,70,229,.25)}.btn.ghost{background:#fff;color:#374151;border:1px solid #e7ebf3}.btn.sm{padding:10px 14px;font-size:12px}
.user-menu{position:relative} .user-menu-trigger{display:flex;align-items:center;gap:12px;border:1px solid #e8edf7;background:#fbfcfe;border-radius:18px;padding:7px 10px;cursor:pointer;box-shadow:0 6px 16px rgba(15,23,42,.04)}.avatar{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 10px 22px rgba(79,70,229,.24)}.avatar.large{width:44px;height:44px}.user-meta{display:grid;gap:2px;text-align:left}.user-name{font-size:13px;font-weight:800;color:#111827}.user-plan{font-size:11px;color:#667085}.caret{font-size:12px;color:#98a2b3}.user-menu-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:292px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(15,23,42,.16);padding:10px;z-index:40}.user-menu-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:#f8fbff;margin-bottom:8px}.menu-user-name{font-size:14px;font-weight:800}.menu-user-email{font-size:12px;color:#667085}.menu-link{display:flex;width:100%;padding:12px 12px;border-radius:14px;text-decoration:none;color:var(--text);font-size:14px;font-weight:700;background:none;border:none;cursor:pointer;text-align:left}.menu-link:hover{background:#f8faff}.menu-link.danger{color:var(--danger)}
.table-wrap{overflow:auto}.status{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800}.status.completed,.status.ready,.status.approved,.status.success,.status.active{background:rgba(16,185,129,.1);color:#059669}.status.pending,.status.pending_review,.status.processing,.status.running{background:rgba(245,158,11,.12);color:#b45309}.status.failed,.status.rejected,.status.error,.status.disabled,.status.deleted{background:rgba(239,68,68,.1);color:#dc2626}.muted{color:var(--muted)}.danger-text{color:var(--danger)}.pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.pill.plan{background:rgba(79,70,229,.1);color:#4f46e5}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--accent-2);color:#fff;border-radius:9px;font-size:11px;font-weight:700;margin-left:auto}
.modal-shell{position:fixed;inset:0;z-index:100}.modal-mask{position:absolute;inset:0;background:rgba(15,23,42,.48)}.modal-card{position:relative;max-width:440px;margin:9vh auto 0;background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:0 30px 80px rgba(15,23,42,.24)}.modal-close{position:absolute;top:12px;right:12px;border:none;background:#f8fafc;width:32px;height:32px;border-radius:10px;font-size:18px;cursor:pointer}.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:12px}.modal-title{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:0 0 8px}.modal-subtitle{font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 18px}.modal-footer{font-size:13px;color:var(--muted);margin-top:14px}.modal-footer a{color:var(--accent);font-weight:700;text-decoration:none}
label span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#667085;font-weight:800;margin-bottom:8px}
.modal-card input{width:100%;border:1px solid #dde3f0;border-radius:16px;padding:13px 14px;background:#fafbff;font-size:14px;outline:none}.modal-card input:focus{border-color:#6d5efc;background:#fff;box-shadow:0 0 0 4px rgba(109,94,252,.1)}
@media(max-width:1180px){.shell{grid-template-columns:96px 1fr;padding:14px}.brand-lockup .brand,.brand-lockup .brand-sub,.sidebar-section-label,.nav-item span:not(.nav-icon):not(.nav-badge),.sidebar-bottom{display:none}.nav-item{justify-content:center}.main{padding:4px}.top-search{min-width:220px}}
@media(max-width:820px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}.topbar{flex-direction:column;align-items:stretch}.topbar-right{justify-content:flex-end}.top-search{min-width:0;flex:1}.user-menu-trigger .user-meta{display:none}}

/* ════════════════════════════════════════════════════════════
   移动端响应式适配
   ════════════════════════════════════════════════════════════ */

/* 平板 (768px - 1024px) */
@media(max-width:1024px){
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card{padding:16px}
}

/* 手机 (< 768px) */
@media(max-width:767px){
  /* 布局 */
  .shell{grid-template-columns:1fr;padding:0}
  .sidebar{
    position:fixed;bottom:0;left:0;right:0;top:auto;
    height:60px;width:100%;
    flex-direction:row;padding:0;
    background:var(--surface);border-top:1px solid var(--line);
    border-right:none;z-index:200;overflow:hidden;
  }
  .sidebar-top{flex-direction:row;width:100%;padding:0;justify-content:space-around}
  .sidebar nav{display:flex;flex-direction:row;width:100%;gap:0}
  .nav-item{
    flex:1;flex-direction:column;justify-content:center;
    padding:6px 4px;font-size:9px;gap:2px;
    border-radius:0;border-left:none;border-bottom:2px solid transparent;
  }
  .nav-item.active{border-bottom:2px solid var(--accent);border-left:none;background:none}
  .nav-icon{font-size:18px}
  .nav-item span:not(.nav-icon):not(.nav-badge){display:block;font-size:9px}
  .sidebar-bottom,.brand-lockup,.sidebar-section-label{display:none}
  .nav-badge{position:absolute;top:4px;right:8px;font-size:8px;padding:1px 4px}

  /* 主内容区 */
  .main{padding:12px 12px 72px;min-height:100vh}
  .topbar{padding:10px 14px;gap:8px}
  .topbar-left h1,.dashboard-topbar h1{font-size:18px}
  .top-search{min-width:0;flex:1;font-size:13px}
  .user-meta{display:none}

  /* 卡片和网格 */
  .card{padding:14px;border-radius:12px}
  .grid{grid-template-columns:1fr!important}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .summary-tile{padding:10px}
  .summary-value{font-size:20px}

  /* 表格 */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px}
  table{min-width:500px}
  th,td{padding:8px 10px;font-size:12px}

  /* 按钮组 */
  .btn{padding:8px 12px;font-size:12px}
  .btn.sm{padding:5px 10px;font-size:11px}
  .section-head{flex-wrap:wrap;gap:8px}
  .section-head h2{font-size:15px}

  /* 商品追踪收藏卡片 */
  .fav-grid{grid-template-columns:1fr 1fr!important;gap:10px}
  .fav-card{min-width:0}
  .fav-img{height:140px}

  /* 分析页排行榜 */
  .rank-item{padding:10px 12px;gap:8px}
  .rank-img{width:48px;height:48px}
  .rank-meta{font-size:11px}

  /* 登录/注册页 */
  .login-body{padding:16px}
  .login-card{padding:24px 20px;border-radius:16px}

  /* 弹窗 */
  .modal-card{margin:4vh 16px 0;padding:20px}
  #_batchFolderModal>div,#_analysisFolderModal>div,#editPkgModal>div{
    margin:0 8px;max-width:100%;border-radius:12px;padding:20px
  }

  /* 单品工作台 */
  .detail-card{padding:14px}
  #detailRoot{grid-template-columns:1fr!important}

  /* 隐藏非核心列 */
  .hide-mobile{display:none!important}

  /* 文字大小 */
  h1{font-size:20px}
  h2{font-size:16px}
  h3{font-size:14px}
  p,.muted{font-size:13px}
}

/* 极小屏 (< 380px) */
@media(max-width:380px){
  .fav-grid{grid-template-columns:1fr!important}
  .summary-grid{grid-template-columns:1fr 1fr}
  .topbar{padding:8px}
}
