body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; margin: 0; background: #f5f6f8; color: #222; }
.topbar { background: #2b3a55; color: #fff; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
.topbar a { color: #ffd166; text-decoration: none; }
.topbar .brand { font-weight: bold; font-size: 16px; }
.container { max-width: 1100px; margin: 16px auto; padding: 0 12px; }
.card { background: #fff; border-radius: 8px; padding: 14px 18px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.card h2 { margin: 0 0 10px; font-size: 17px; }
.form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-row input, .form-row select { padding: 6px 8px; border: 1px solid #bbb; border-radius: 6px; }
.table { border-collapse: collapse; width: 100%; font-size: 13px; }
.table th, .table td { border: 1px solid #ddd; padding: 5px 8px; text-align: left; }
.table th { background: #eef1f5; }
.table.small td input { width: 90px; padding: 4px; }
.btn { padding: 8px 14px; border: 0; border-radius: 6px; background: #2b3a55; color: #fff; cursor: pointer; font-size: 13px; }
.btn:hover { opacity: .9; }
.btn.warn { background: #d98a2b; }
.btn.danger { background: #c0392b; }
.route-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }

/* 编辑器 */
.layout { display: flex; height: calc(100vh - 52px); }
.view3d { flex: 1; position: relative; background: #1c2430; min-width: 0; touch-action: none; }
.view3d canvas { display: block; }
.view3d svg { max-width: 96%; height: auto; }
.view3d-hint { position: absolute; left: 12px; top: 10px; color: #aab; font-size: 12px; background: rgba(0,0,0,.35); padding: 5px 9px; border-radius: 6px; pointer-events: none; }
.panel { width: 370px; background: #fff; border-left: 1px solid #ddd; padding: 12px; overflow: auto; }
.panel h3 { margin: 8px 0 6px; font-size: 14px; }
.pallet-tab { display: inline-block; padding: 6px 12px; margin: 3px; border: 1px solid #bbb; border-radius: 6px; cursor: pointer; background: #eef; font-size: 13px; }
.pallet-tab.active { background: #2b3a55; color: #fff; }
.item-row { font-size: 12px; padding: 3px 0; border-bottom: 1px dashed #eee; }
.status-ok { color: #2e9e4f; font-weight: bold; }
.status-err { color: #d33; font-weight: bold; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.dot { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.sel-info { background: #f0f4ff; border: 1px solid #c9d7f0; border-radius: 6px; padding: 8px; font-size: 13px; margin: 8px 0; }

/* 打印页 */
.print-page { page-break-after: always; }
.print-page:last-child { page-break-after: auto; }
.print-page h2 { margin: 0 0 4px; }
.print-meta { color: #444; margin-bottom: 8px; font-size: 13px; }
.print-cols { display: flex; gap: 12px; }
.print-left { flex: 1; }
.print-right { flex: 1; }
.print-views { display: flex; flex-direction: column; gap: 6px; }
.print-views svg { width: 100%; height: auto; border: 1px solid #999; background: #fff; }
.print-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.print-table th, .print-table td { border: 1px solid #333; padding: 3px 6px; text-align: left; }
.print-table th { background: #e8e8e8; }
@media print {
  body { background: #fff; }
  .no-print { display: none; }
}

/* ===== 手机适配（工人扫码用手机看 3D） ===== */
.rotate-hint { display: none; }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .layout { flex-direction: column; height: auto; }
  .view3d { flex: none; }
  .panel { width: 100%; border-left: none; border-top: 1px solid #ddd; }
  .container { margin: 8px auto; }
  .btn { padding: 8px 10px; }
}
/* 竖屏：3D 占大半个屏幕，信息面板在下面滚动看 */
@media (max-width: 900px) and (orientation: portrait) {
  .view3d { height: 58vh; }
  .rotate-hint { display: block; position: fixed; bottom: 0; left: 0; right: 0;
    background: #2b3a55; color: #ffd166; text-align: center; padding: 8px;
    font-size: 13px; z-index: 999; }
}
/* 横屏：3D 全屏看，效果最好 */
@media (max-width: 900px) and (orientation: landscape) {
  .view3d { height: calc(100vh - 52px); }
}