:root{
  --glass-bg:rgba(255,255,255,.72);
  --glass-sidebar:rgba(245,245,247,.85);
  --glass-border:rgba(255,255,255,.6);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, #d9ebff 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #e8f0fe 0%, transparent 55%),
    linear-gradient(180deg,#f5f7fb 0%,#eef1f6 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 24px rgba(15,23,42,.06);
}
.glass-sidebar{
  background:var(--glass-sidebar);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.nav-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.55rem .75rem;border-radius:.75rem;
  color:#424245;cursor:pointer;font-weight:500;
  transition:all .15s ease;
}
.nav-item:hover{background:rgba(10,132,255,.08);color:#0a84ff}
.nav-item.active{
  background:linear-gradient(90deg,rgba(10,132,255,.14),rgba(10,132,255,.04));
  color:#0050b3;
}
.nav-group-title{
  font-size:11px;font-weight:600;color:#86868b;text-transform:uppercase;
  letter-spacing:.08em;padding:.5rem .75rem .25rem;
}
.nav-sub{padding-left:2rem;font-size:13px}
.kpi-card{transition:transform .2s ease,box-shadow .2s ease}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.10)}
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .9rem;border-radius:.65rem;font-size:13px;font-weight:500;
  transition:all .15s;cursor:pointer;border:1px solid transparent;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,#0a84ff,#0050b3);color:white;box-shadow:0 4px 12px rgba(10,132,255,.25)}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 6px 16px rgba(10,132,255,.32)}
.btn-secondary{background:white;color:#1d1d1f;border-color:#d2d2d7}
.btn-secondary:hover{background:#f5f5f7}
.btn-ghost{background:transparent;color:#0a84ff}
.btn-ghost:hover{background:rgba(10,132,255,.08)}
.btn-danger{background:#fff1f0;color:#d93026;border-color:#ffccc7}
.btn-danger:hover{background:#ffe0dd}
.input,select.input,textarea.input{
  width:100%;padding:.55rem .75rem;border-radius:.6rem;
  border:1px solid #d2d2d7;background:white;font-size:13px;color:#1d1d1f;
  transition:border-color .15s,box-shadow .15s;
}
.input:focus{outline:none;border-color:#0a84ff;box-shadow:0 0 0 3px rgba(10,132,255,.12)}
.label{font-size:12px;font-weight:500;color:#424245;margin-bottom:.25rem;display:block}
.table-card{overflow:hidden;border-radius:1rem}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{
  text-align:left;font-weight:600;color:#424245;background:#f5f5f7;
  padding:.65rem .85rem;border-bottom:1px solid #e5e5ea;white-space:nowrap;
}
table.data td{padding:.65rem .85rem;border-bottom:1px solid #f0f0f3;color:#1d1d1f;vertical-align:top}
table.data tr:hover td{background:#fafbff}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:500}
.badge-blue{background:#e8f1ff;color:#0050b3}
.badge-green{background:#e8f8ef;color:#147a3d}
.badge-amber{background:#fff5e0;color:#9a6700}
.badge-red{background:#fde8e7;color:#b42318}
.badge-gray{background:#eeeef0;color:#555}
.modal-mask{
  position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);
  z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;
}
.modal{
  background:white;border-radius:1.25rem;width:100%;max-width:760px;
  box-shadow:0 30px 80px rgba(15,23,42,.35);overflow:hidden;
}
.modal-head{padding:18px 22px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:20px 22px;max-height:70vh;overflow-y:auto}
.modal-foot{padding:14px 22px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:8px;background:#fafafa}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;background:#f0f4ff;color:#0a84ff;font-size:11px;font-weight:500;margin-right:4px}
.tab-bar{display:flex;gap:4px;border-bottom:1px solid #e5e5ea;margin-bottom:18px}
.tab-item{padding:10px 16px;font-size:13px;font-weight:500;color:#86868b;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}
.tab-item:hover{color:#1d1d1f}
.tab-item.active{color:#0a84ff;border-color:#0a84ff}
.progress-track{height:8px;background:#eef1f6;border-radius:999px;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,#0a84ff,#5ac8fa);border-radius:999px;transition:width .4s}
.timeline-node{position:relative;padding-left:28px;padding-bottom:18px}
.timeline-node:before{content:'';position:absolute;left:8px;top:18px;bottom:-2px;width:2px;background:#e5e5ea}
.timeline-node:last-child:before{display:none}
.timeline-dot{position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:#e5e5ea;border:3px solid white;box-shadow:0 0 0 1px #d2d2d7}
.timeline-node.done .timeline-dot{background:#34c759;box-shadow:0 0 0 1px #34c759}
.timeline-node.active .timeline-dot{background:#0a84ff;box-shadow:0 0 0 4px rgba(10,132,255,.2)}
.empty{text-align:center;padding:48px 20px;color:#86868b}
.empty svg{margin:0 auto 12px;opacity:.4}

/* ===== v3 新增组件样式 ===== */

/* 可排序列表头 */
.sortable{cursor:pointer;user-select:none;transition:color .15s}
.sortable:hover{color:#0a84ff;background:#eef4ff!important}
.sortable:active{background:#dde9ff!important}

/* 运费/物流 Tab 按钮（基于 btn 复用，增加 active 强化） */
.tracking-tab{transition:all .15s}
.tracking-tab.active{box-shadow:0 4px 12px rgba(10,132,255,.25)}

/* 产品详情可选中文本（默认已可选，此处理论上无需额外样式） */
.select-text{user-select:text;-webkit-user-select:text}

/* 采购订单 A4 打印样式 */
.po-print{
  font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  color:#1d1d1f;font-size:11px;line-height:1.5;
  max-width:210mm;margin:0 auto;padding:0;
}
.po-print .po-header{text-align:center;border-bottom:2px solid #1d1d1f;padding-bottom:8px;margin-bottom:12px}
.po-print .po-title{font-size:18px;font-weight:700;letter-spacing:2px}
.po-print .sub{font-size:10px;color:#555;margin-top:2px}
.po-print .info{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:10px 0;font-size:10.5px}
.po-print .info > div{padding:2px 0;border-bottom:1px dotted #e5e5ea}
.po-print table.po-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:10.5px}
.po-print table.po-table th,.po-print table.po-table td{border:1px solid #1d1d1f;padding:4px 6px;text-align:center}
.po-print table.po-table th{background:#f5f5f7;font-weight:600}
.po-print table.po-table td.amount{text-align:right;font-variant-numeric:tabular-nums}
.po-print .tax-row{font-size:10px;color:#555;margin:6px 0;padding:4px 8px;background:#f5f5f7;border-radius:4px}
.po-print .terms{font-size:10px;margin:8px 0;padding:8px;border:1px solid #e5e5ea;border-radius:4px;line-height:1.6}
.po-print .terms ol{margin:4px 0 0 16px;padding:0}
.po-print .terms li{margin-bottom:2px}
.po-print .sign{display:flex;justify-content:space-between;margin-top:24px;font-size:10.5px}
.po-print .sign > div{min-width:200px}
.po-print .sign .line{display:inline-block;border-bottom:1px solid #1d1d1f;min-width:140px;margin-left:4px}

/* 图表容器 */
.chart-box{position:relative;background:white;border:1px solid #f0f0f3;border-radius:12px;padding:14px}
.chart-box .chart-title{font-size:13px;font-weight:600;color:#1d1d1f;margin-bottom:8px}
.chart-box canvas{max-width:100%}

/* 缩略图占位 */
.thumb-placeholder{
  width:40px;height:40px;border-radius:8px;
  background:linear-gradient(135deg,#f5f5f7,#e8e8ed);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#86868b;font-weight:600;
}

/* 文件上传区域 */
.upload-zone{
  border:2px dashed #d2d2d7;border-radius:12px;padding:24px;
  text-align:center;color:#86868b;transition:all .15s;cursor:pointer;
}
.upload-zone:hover,.upload-zone.dragover{border-color:#0a84ff;background:rgba(10,132,255,.04);color:#0a84ff}

/* 产品媒体网格（图片/视频预览） */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.media-item{
  position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;
  border:1px solid #e5e5ea;background:#f5f5f7;
}
.media-item img,.media-item video{width:100%;height:100%;object-fit:cover}
.media-item .media-del{
  position:absolute;top:4px;right:4px;width:20px;height:20px;
  border-radius:50%;background:rgba(0,0,0,.6);color:white;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;cursor:pointer;border:none;
}
.media-item .media-del:hover{background:rgba(217,48,38,.9)}

/* 筛选栏紧凑模式 */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:12px 16px;background:rgba(255,255,255,.6);
  border-radius:12px;margin-bottom:16px;
}

/* 四流合一级别标签 */
.level-required{color:#b42318;font-weight:600}
.level-recommended{color:#9a6700;font-weight:500}
.level-optional{color:#86868b}
.purpose-tax{background:#fde8e7;color:#b42318}
.purpose-supply{background:#e8f1ff;color:#0050b3}
.purpose-finance{background:#fff5e0;color:#9a6700}
.purpose-customs{background:#e8f8ef;color:#147a3d}
.purpose-archive{background:#eeeef0;color:#555}

/* 滚动条美化 */
.modal-body::-webkit-scrollbar{width:8px}
.modal-body::-webkit-scrollbar-thumb{background:#d2d2d7;border-radius:4px}
.modal-body::-webkit-scrollbar-track{background:transparent}

/* 飞书未来部署预留：容器安全区 */
#appView{min-height:100vh}
@supports(padding:env(safe-area-inset-top)){
  #appView{padding-top:env(safe-area-inset-top)}
}

/* A4 打印时隐藏所有非打印区域（采购订单专用） */
@media print{
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{position:absolute;left:0;top:0;width:100%;padding:12mm}
  .no-print{display:none!important}
  .po-print{font-size:11px;max-width:100%}
  .po-print table.po-table{font-size:10px}
  .po-print .terms{font-size:9.5px}
  @page{size:A4;margin:12mm}
}